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

但是我得到的效果如下图所示：

注意:

标签的背景使用了渐变，但是我想要的是第一张图片中的渐变效果（右上角的标签），请帮忙修改。

- Blios

---

@bilios，你需要直接在两个角上设置渐变图像。我认为这是最好的解决方案。 - Nimit Parekh

好的，谢谢Neon。你能再帮我一下吗？我想在单击左/右箭头时滚动（滑动）这三个标签吗？ - Blios

使用数组索引，在单击右箭头和左箭头时更改UILabel的文本。 - Omer Waqas Khan

是的，我知道，但我想用滑动效果更改标签？ - Blios

这看起来是正确的路径，但你需要使用渐变来遮罩视图。 - holex

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;

示例遮罩图像：

- s100i29

---

你能否详细解释一下？这意味着如何使用它以及在哪里放置这个遮罩图像？ - Blios

我创建了示例代码：项目链接。 - s100i29

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

这里是示例输出：

---

按要求更新

第一行：简单分配

CAGradientLayer *rightGradient = [CAGradientLayer layer];

第二行： CAGradientLayer的框架

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

这非常重要，这就是设置框架的地方（与UIView等相同）CAGradientLayer，意味着origin.x和origin.y也会被考虑进去。

第三行：.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)];

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

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

^_^ 干杯！

- 0yeoj

---

你能否为我的示例建议正确的颜色代码？ - Blios

好的，不需要颜色代码。相反，您能否解释一下渐变是如何工作的，例如我们应该如何设置颜色等，或者给我一些好的参考资料。 - Blios

苹果文档中关于渐变如何工作的部分，嗯...你想让我向你解释一下startPoint和endPoint吗？ - 0yeoj

谢谢Oyeoj，我还想澄清一件事，是否可以在表格单元格中使用渐变？我想在表视图中显示它，即我的表的所有行都具有右侧像问题中图片那样的渐变效果。 - Blios

没问题，但是避免冗余的“-addSublayer”，一个就够了。 :) - 0yeoj

Answer 3

您可以参考以下演示，其中提供了对UILabel的所有效果。

FXLabel

输出：

由于时间复杂性，我在此提供链接。

希望这能帮到您。

- Jatin Patel - JP

---

哈哈...你给出的链接是这个问题本身。 - Blios

抱歉，这是打字错误。请检查更新后的链接。 - Jatin Patel - JP

Answer 4

问题在于你假设UIColor.clearColor可以正常工作，但实际上它不能。它是一种透明的黑色，与透明的白色或透明版本的蓝色不同。沿着渐变，你的蓝色淡入黑色并失去了不透明度。你只想让它失去不透明度。因此，你应该使用[endColor colorWithAlphaComponent:0.0]而不是UIColor.clearColor。

此外，当你没有一个实心的背景颜色时，这种方法是不好的。考虑不添加渐变子层，而是使用黑色到透明的渐变来遮罩你的视图。

- Christian Schnorr

Answer 5

编辑：

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

- Pravin Tate

---

嗨Pravin，我在标签的背景中设置了渐变，但文字不显示。 - Blios

Answer 6

你可以使用DrawingLabel库来帮助你，而不需要任何CoreGraphics代码：

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

- sbakdemir