Changing background of UILabels in UIStackView to gradient color

Question

I am new to iOS development and I am working with the UIStackView.
When I use StoryBoard to create two UILabels as child objects of UIStackView the following code to make gradient backround color of each UILabel works fine.

UILabel *label;
for (int ii = 1; ii < 3; ii++) {
    label = [self.view viewWithTag:ii];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = label.bounds;
    gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
    [label.layer insertSublayer:gradient atIndex:0];

    UILabel *newLabel = [[UILabel alloc] initWithFrame:label.bounds];
    newLabel.backgroundColor = [UIColor clearColor];
    newLabel.text = label.text;
    [label addSubview:newLabel];
}

But when I create two UILabels programatically with using the code bellow, my code above for making gradient background of each UILabel doesn't work and backround color stays white.
Can someone help me with this?

UILabel *myLabel;
myLabel = [[UILabel alloc] init];
[myLabel setText:@"text1"];
[myLabel setTag:1];
[stackView addArrangedSubview:myLabel];

myLabel = [[UILabel alloc] init];
[myLabel setText:@"text2"];
[myLabel setTag:2];
[stackView addArrangedSubview:myLabel];

Yes, I can see the labels however with no gradient background. — Jeavy, Jul 04 '16 at 11:02

bradkratky · Accepted Answer · 2016-07-06T13:46:17.293

0

The problem seems to be with the label bounds. The following code adds a UIStackView and adds several UILabels with gradients.

const int STACK_WIDTH = 200;
const int NUM_LABELS = 3;
const int LABEL_WIDTH = STACK_WIDTH / NUM_LABELS;

UIStackView* stack = [[UIStackView alloc] initWithFrame:CGRectMake(0, 0, STACK_WIDTH, 100)];
stack.axis = UILayoutConstraintAxisHorizontal;
stack.distribution = UIStackViewDistributionFillProportionally;
stack.alignment = UIStackViewAlignmentLeading;
stack.spacing = LABEL_WIDTH;
stack.backgroundColor = [UIColor greenColor];
[self.view addSubview:stack];

for(int i = 0; i < NUM_LABELS; i++){
    UIView* myLabelView = [[UIView alloc] initWithFrame:CGRectMake(i * LABEL_WIDTH, 0, LABEL_WIDTH, stack.frame.size.height)];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = myLabelView.bounds;
    gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
    gradient.startPoint = CGPointMake(0, 0);
    gradient.endPoint = CGPointMake(1, 0);
    [myLabelView.layer addSublayer:gradient];

    UILabel* myLabel = [[UILabel alloc] initWithFrame:myLabelView.bounds];
    myLabel.text = [NSString stringWithFormat:@"label: %d", i];
    [myLabelView addSubview:myLabel];

    [stack addArrangedSubview:myLabelView];
}

edited Jul 06 '16 at 13:46

answered Jul 03 '16 at 14:43

bradkratky

1,577
1
14
28

When you do it this way, the text of UILabel stays covered by the gradient. That's why I use adding new UILabel as a subview of other UILabel - as suggested in this posting: http://stackoverflow.com/questions/4850149/adding-a-cggradient-as-sublayer-to-uilabel-hides-the-text-of-label – Jeavy Jul 04 '16 at 11:01
Yes my mistake, I'll edit my answer - are you still having issues? – bradkratky Jul 04 '16 at 14:02
Yes, I still have this issue. – Jeavy Jul 06 '16 at 07:57
Is it still the same problem? I updated my answer again - does it work for you? Maybe you can post more of your code, like how you've created your UIStackView. – bradkratky Jul 06 '16 at 13:47
Thank you, it works. It seams that the key was in setting spacing.... Thank you very much. – Jeavy Jul 07 '16 at 14:41

Changing background of UILabels in UIStackView to gradient color

1 Answers1