iOS gradient effect over UILabel

Question

I want to add gradient effect on a UILabel so it look like:

---

Please note the gradient effect on left and right corner.I've no clue 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'm getting like:

Note:

Gradient is added as background of Label but i want gradient effect as in 1st image (see label in right corner)

Answer 1

You code is correct but you miss setting the frame that will be occupied by the CAGradientLayer..

And take note that you need to use color with alpha value, to avoid occurrence of black color.. ex:

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

or

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

And check this sample code, i've already tried this and works for me, hope this will work 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 thing, if you plan to add 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 the sample output:

---

Update as requested

line 1: Simply allocation

CAGradientLayer *rightGradient = [CAGradientLayer layer];

line 2: CAGradientLayers frame

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

This is very important, this sets the frame (same with UIView, etc) CAGradientLayer, meaning origin.x and origin.y is also considered..

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 array of color like whats in my example, color are arrange accordingly.. (color.alpha == 0) is in index 0 and (color.alpha == 1) is in index 1, and will be displayed left to right..

line 4: setStartPoint

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

The start point corresponds to the first stop of the gradient. The point is defined in the unit coordinate space and is then mapped to the layer’s bounds rectangle when drawn.

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 point is defined in the unit coordinate space and is then mapped to the layer’s bounds rectangle when drawn.

Default value is (0.5,1.0).

[YourLabel.layer addSublayer:rightGradient];

And it was all discussed here.. CAGradientLayer

About the color that you are asking you can use this: UIColor Code Generator

But if you want to use hex string for color like #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;
}

^_^ Cheers!