IOS gradient effect over UILabel

Question

I want to add a gradient effect to UILabel so that it looks like this:

---

Notice the gradient effect in the left and right corners. I do not know how to do that. Any help or suggestion would be appreciated.

Edit : - I tried with this code -

UIColor *endColor = [UIColor colorWithRed:20/255.0 green:157/255.0 blue:189/255.0 alpha:1.0]; NSArray *gradientColors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor],(id)[endColor CGColor], nil]; CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.colors = gradientColors; [gradientLayer setStartPoint:CGPointMake(0.0, 0.5)]; [gradientLayer setEndPoint:CGPointMake(1.0, 0.5)]; [self.rightLabel.layer insertSublayer: gradientLayer atIndex:0]; 

But I get like:

Note:

A gradient is added as the background of the label, but I want the gradient effect, as in the first image (see the label in the right corner)

Answer 1

The code is correct, but you will skip setting the frame to be occupied by CAGradientLayer ..

And note that you need to use a color with an alpha value to avoid the appearance of black .. ex:

[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0]

or

[[UIColor YourColor] colorWithAlphaComponent:0] instead of [UIColor clearColor]

And check out this code example, I already tried this and it works for me, hope this works for you too .. Happy Coding .. :)

 CAGradientLayer *rightGradient = [CAGradientLayer layer]; rightGradient.frame = CGRectMake(0, 0, YourLabel.frame.size.width, YourLabel.size.height); rightGradient.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:1].CGColor, nil]; [rightGradient setStartPoint:CGPointMake(0.8, 0.9)]; [rightGradient setEndPoint:CGPointMake(1.0, 0.9)]; [YourLabel.layer addSublayer:rightGradient]; 

Oh last, if you plan on adding a gradient to the left, just change

 [rightGradient setStartPoint:CGPointMake(0.8, 0.9)]; [rightGradient setEndPoint:CGPointMake(1.0, 0.9)]; 

to

 [leftGradient setStartPoint:CGPointMake(0.2, 0.1)]; [leftGradient setEndPoint:CGPointMake(0.0, 0.1)]; 

Here's the sample output:

---

Update on request

line 1: Simple placement

 CAGradientLayer *rightGradient = [CAGradientLayer layer]; 

line 2: CAGradientLayer frame

 rightGradient.frame = CGRectMake(0, 0, YourLabel.frame.size.width, YourLabel.size.height); 

This is very important, it sets the frame (the same as in UIView, etc.) CAGradientLayer , which means origin.x and origin.y .

line 3: .colors

 rightGradient.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:1].CGColor, nil]; 

When you assign an array of colors, like Whats in my example, the color is arranged accordingly. (color.alpha == 0) is at index 0 and (color.alpha == 1) is at index 1 and will be from left to right.

line 4: setStartPoint

 [rightGradient setStartPoint:CGPointMake(0.8, 0.9)]; 

The starting point corresponds to the first stop of the gradient. the point is defined in a single coordinate space and then displayed on the layers draw a rectangle when drawing.

The default value is (0,5,0,0).

line 5: setEndPoint

 [rightGradient setEndPoint:CGPointMake(1.0, 0.9)]; 

The end point corresponds to the last stop of the gradient. The meaning is defined in a unit coordinate space and then displayed on the layers draw a rectangle when drawing.

The default value is (0,5,1,0).

 [YourLabel.layer addSublayer:rightGradient]; 

And all this was discussed here. CAGradientLayer

About the color you ask for, you can use this: UIColor Code Generator

But if you want to use the sixth line for color, for example #ace123 , you can use this method:

 + (UIColor *)colorWithHexString:(NSString *)hexString withOpacity:(CGFloat)opacity { unsigned rgbValue = 0; NSScanner *scanner; scanner = [NSScanner scannerWithString:hexString]; scanner.scanLocation = ([hexString hasPrefix:@"#"]) ? 1 : 0; [scanner scanHexInt:&rgbValue]; UIColor *color = [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16)/255.0 green:((rgbValue & 0xFF00) >> 8)/255.0 blue:(rgbValue & 0xFF)/255.0 alpha:opacity]; return color; } 

^ _ ^ Greetings!

Answer 2

You can add a mask layer with a mask image, this should help:

 CALayer *maskLayer = [CALayer layer]; maskLayer.backgroundColor = [UIColor colorWithRed:0.f green:0.f blue:0.f alpha:0.5f].CGColor; maskLayer.contents = (id)[[UIImage imageNamed:@"maskImage.png"] CGImage]; maskLayer.contentsGravity = kCAGravityCenter; maskLayer.frame = YourLabel.bounds; YourLabel.layer.mask = maskLayer; 

An example of a mask image:

Answer 3

Edited by:

 UIView * gradientView = [[UIView alloc] initWithFrame:label.frame]; [self.view addSubview:gradientView]; [self.view sendSubviewToBack:gradientView]; label.backgroundColor = [UIColor clearColor]; label.textColor = [UIColor redColor]; CAGradientLayer * gradientLayernavigationBar = [[CAGradientLayer alloc] init]; gradientLayernavigationBar.frame = label.bounds; gradientLayernavigationBar.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor redColor ] CGColor], nil]; gradientLayernavigationBar.startPoint =CGPointMake(0, 1); gradientLayernavigationBar.endPoint = CGPointMake(1, 1); gradientLayernavigationBar.opacity=1.0; [gradientView.layer insertSublayer:gradientLayernavigationBar atIndex:1]; 

Answer 4

You can use the following demo. which has an effect on UILabel .

Fxlabel

Conclusion:

Here I provide a link, because of the complexity of the time.

Help you.

Answer 5

The problem is that you assume that UIColor.clearColor working just fine. But this is not so. It is a transparent black color that is different from a transparent white or transparent version of your blue. Along the gradient, your blue color fades to black and loses transparency. You only want it to lose its opacity. Therefore, you should use [endColor colorWithAlphaComponent:0.0] instead of UIColor.clearColor .

Also, this approach is bad if you do not have a solid background color. Think without adding a gradient sublevel, but instead mask your view with a black to transparent gradient.

Answer 6

You can use the DrawingLabel library help without CoreGraphics code:

 DrawingGradient *gradient = [DrawingGradient new]; gradient.colorArray = @[[UIColor greenColor],[UIColor yellowColor],[UIColor cyanColor]]; gradient.locations = @[@0,@0.3,@0.8]; gradient.gradientType = DrawingGradientTypeVertical;