How to change text color of label in segment controller?

Question

I want to set different text color of label in each row SegmentControl programmatically.

Please check my ref. code.

var arrColors = [
    {"color":"white"},
    {"color":"orange"},
    {"color":"blue"},
    {"color":"yellow"},
    {"color":"gray"}
]; 
this.view.segCont.widgetDataMap = {lblColorName: "color"};
this.view.segCont.setData(arrColors);

I want to do something like attached image.

Thanks in advance!!

score 2 · Accepted Answer · edited Apr 16 '19 at 19:06

2

I got solution from kony team.

1) Create different skin for different color label. See below image:

2) Set condition for as per your require color label.

var arrColors = [
    {"color": "white"},
    {"color": "orange"},
    {"color": "blue"},
    {"color": "yellow"},
    {"color": "gray"}
];

for (i = 0; i < arrColors.length; i++) {
    if (arrColors[i].color === "orange") {
        arrColors[i].color = {
            "skin": "sknLblOrange"
        };
    } else {
        arrColors[i].color = {
            "skin": "sknLblGreen"
        };
    }
}

this.view.segCont.widgetDataMap = {
    lblColor: "color"
};
this.view.segCont.setData(arrColors);

Hope this helpful to you. Happy Coding :)

edited Apr 16 '19 at 19:06

Mig82

4,856
4
40
63

answered Apr 09 '19 at 17:57

Rishil Patel

1,977
3
14
30

Are you sure this code is complete and works? Why are you only doing this for the orange and the green? – Mig82 Apr 16 '19 at 16:22
Yes, I am sure and it works. Yes because I just show example in answer we can set condition accordingly. :) – Rishil Patel Apr 16 '19 at 16:24
So you're saying in your actual code you do this for every color, but here in the sample you're only doing it for two of them. Correct? – Mig82 Apr 16 '19 at 16:27
Also, I'm curious now. You've only set data for five rows. What happens when your segment has more than five rows? – Mig82 Apr 16 '19 at 16:30
Please check it: https://basecamp.kony.com/s/question/0D52K00003VJjk8SAD/how-to-change-text-color-of-label-in-segment-controller – Rishil Patel Apr 16 '19 at 18:04

score 0 · Answer 2 · answered Apr 16 '19 at 16:52

This is fine if your data is finite and static, or if the data array is always the same length, like with a menu.

However, if your data is dynamic you should consider instead this solution:

var arrColors = [
    {"skin": "whiteRowSkin"},
    {"skin": "orangeRowSkin"},
    {"skin": "blueRowSkin"},
    {"skin": "yellowRowSkin"},
    {"skin": "grayRowSkin"}
];

this.view.segCont.widgetDataMap = {
    lblColor: "color"
    // plus any other properties you need for this data.
};

// Lets assume this getData function fetches your dynamic data from a service.
var segData = getData();

for (var i = 0; i < segData.length; i++) {
    var colorIndex = i % arrColors.length;
    segData[i].color = arrColors[colorIndex];
};

this.view.segCont.setData(segData);

The key above is the Modulus/Remainder % operator, which allows you to decide dynamically which of the colors/skins in the skin array to corresponds to each data row, even if the size of the data array varies.

Note: This obviates the fact that the data may be a matrix if you're using segment sections.

How to change text color of label in segment controller?

2 Answers2