iOS梯度效果超过UILabel

Question

我想在UILabel上添加渐变效果，如下所示：

请注意左右角的渐变效果。我不知道如何做到这一点。我们将不胜感激任何帮助或建议。

修改： - 我尝试使用此代码 -

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

你可以添加带有蒙版图像的蒙版图层，它应该有帮助：

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 2

您的代码是正确的，但您错过了设置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行：CAGradientLayer s frame

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）在索引1中，并且将是从左到右显示..

第4行：setStartPoint

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

  

起点对应于渐变的第一个停止点。该   point在单位坐标空间中定义，然后映射到   绘制时图层的边界矩形。

     

默认值为（0.5,0.0）。

第5行：setEndPoint

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

  

终点对应于渐变的最后一个停止点。关键点   在单位坐标空间中定义，然后映射到   绘制时图层的边界矩形。

     

默认值为（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 3

编辑：

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

您可以参考以下演示。这对important!提供了所有效果。

FXLabel

输出：

我在这里提供链接是因为时间复杂。

愿这对你有所帮助。

Answer 5

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

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

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;