iOS UILabel 的渐变效果

Question

我想在 UILabel 上添加渐变效果，使其看起来像：

请注意左右两边的渐变效果corner.I不知道该怎么做that.any不胜感激。

编辑：-我试过这段代码-

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];

但我越来越喜欢：

注：

渐变被添加为标签的背景，但我想要第一个图像中的渐变效果（见右角的标签）

Answer 1

已编辑：

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 2

您可以借助以下演示。它提供了对 UILabel 的所有影响。

FXLabel

输出：

这里我提供 link 因为时间复杂。

希望对您有所帮助。

Answer 3

问题是您假设 UIColor.clearColor 工作正常。但事实并非如此。它是一种透明的黑色，不同于透明的白色，或者你的蓝色的透明版本。沿着渐变，您的蓝色逐渐变为黑色并失去不透明度。你只希望它失去不透明度。因此你应该使用 [endColor colorWithAlphaComponent:0.0] 而不是 UIColor.clearColor.

此外，当您没有纯色背景时，这种方法很糟糕。考虑不添加渐变子图层，而是使用黑色到透明的渐变来遮盖视图。

Answer 4

您可以添加带有遮罩图像的遮罩层，这应该有帮助：

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;

示例蒙版图像：

Answer 5

你的代码是正确的，但是你错过了设置将被 CAGradientLayer..

占用的框架

请注意，您需要使用具有 alpha 值的颜色，以避免出现黑色。例如：

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

或

[[UIColor YourColor] colorWithAlphaComponent:0] 而不是 [UIColor clearColor]

并检查此示例代码，我已经尝试过了并且对我有用，希望这对你也有用。编码愉快..:)

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];

最后一件事，如果您打算向左侧添加渐变，只需更改

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

到

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

这里是示例输出：

按要求更新

第 1 行：简单分配

CAGradientLayer *rightGradient = [CAGradientLayer layer];

第 2 行：CAGradientLayers 帧

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

这很重要，这设置了框架（与 UIView 等相同）CAGradientLayer，意思是 origin.x 和 origin.y 也被考虑..

第 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];

当你像我的例子一样分配颜色数组时，颜色会相应地排列.. (color.alpha == 0) 在索引 0 中，(color.alpha == 1) 在index 1, 将从左到右显示..

第 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).

第 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];

这里都讨论过了.. CAGradientLayer

关于你要的颜色可以用这个：UIColor Code Generator

但是如果你想像#ace123一样使用十六进制字符串作为颜色，你可以使用这个方法：

+ (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;
}

^_^ 干杯！

Answer 6

您可以在没有任何 CoreGraphics 代码的情况下使用库 DrawingLabel 的帮助：

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

iOS UILabel 的渐变效果

iOS gradient effect over UILabel

iphone

objective-c

uilabel

ios