220

可能重复：
在 iPhone 应用程序中手动绘制渐变？

我的应用程序需要在 aUIView或中显示文本，UILabel但背景必须是渐变而不是 true UIColor。使用图形程序创建所需的外观并不好，因为文本可能会因服务器返回的数据而异。

有谁知道解决这个问题的最快方法？非常感谢您的想法。

4

7 回答 7

780

我意识到这是一个较旧的线程，但供将来参考：

从 iPhone SDK 3.0 开始，自定义渐变可以很容易地实现，无需子类或图像，通过使用新的CAGradientLayer：

 UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

看看 CAGradientLayer 文档。您可以选择指定起点和终点（以防您不想要从顶部直接到底部的线性渐变），甚至可以指定映射到每种颜色的特定位置。

于 2009-12-19T00:38:31.747 回答
122

正如迈克的回应所指出的，您可以使用 Core Graphics 来绘制渐变。作为更详细的示例，您可以创建一个UIView子类用作UILabel. 在该UIView子类中，重写该drawRect:方法并插入类似于以下内容的代码：

- (void)drawRect:(CGRect)rect 
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

这个特定的示例创建了一个从顶部UIView到垂直中心绘制的白色光泽样式渐变。您可以将UIView's设置backgroundColor为您喜欢的任何值，并且该光泽将绘制在该颜色之上。您还可以使用该CGContextDrawRadialGradient函数绘制径向渐变。

您只需要UIView适当地调整它的大小并将您的添加UILabel为它的子视图即可获得您想要的效果。

编辑（2009 年 4 月 23 日）：根据 St3fan 的建议，我已经用代码中的边界替换了视图的框架。这更正了视图原点不是 (0,0) 的情况。

于 2009-01-07T21:39:21.503 回答
73

注意：以下结果适用于旧版本的 iOS，但在 iOS 13 上进行测试时，不会发生步进。我不知道删除了哪个版本的 iOS。

CAGradientLayer与 相比，使用时CGGradient，渐变不平滑，但有明显的步进。见这个例子：

为了获得更有吸引力的结果，最好使用CGGradient.

于 2011-01-13T03:18:51.877 回答
45

您还可以使用一个像素宽的图形图像作为渐变，并设置视图属性以扩展图形以填充视图（假设您正在考虑简单的线性渐变而不是某种径向图形）。

于 2009-01-08T00:59:40.553 回答
24

Mirko Froehlich 的回答对我有用，除非我想使用自定义颜色。诀窍是使用色调、饱和度和亮度而不是 RGB 来指定 UI 颜色。

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myView.bounds;
UIColor *startColour = [UIColor colorWithHue:.580555 saturation:0.31 brightness:0.90 alpha:1.0];
UIColor *endColour = [UIColor colorWithHue:.58333 saturation:0.50 brightness:0.62 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor], (id)[endColour CGColor], nil];
[myView.layer insertSublayer:gradient atIndex:0];

要获得颜色的色调、饱和度和亮度，请使用内置的 xcode 颜色选择器并转到 HSB 选项卡。在此视图中，色调以度数为单位，因此将该值除以 360 即可获得您要在代码中输入的值。

于 2012-06-17T00:41:44.040 回答
15

这就是我在 xCode 的 IB 中将工作集 UIButton 设置为透明/清晰，并且没有背景图像。

UIColor *pinkDarkOp = [UIColor colorWithRed:0.9f green:0.53f blue:0.69f alpha:1.0];
UIColor *pinkLightOp = [UIColor colorWithRed:0.79f green:0.45f blue:0.57f alpha:1.0];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = [[shareWordButton layer] bounds];
gradient.cornerRadius = 7;
gradient.colors = [NSArray arrayWithObjects:
                   (id)pinkDarkOp.CGColor,
                   (id)pinkLightOp.CGColor,
                   nil];
gradient.locations = [NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:0.0f],
                      [NSNumber numberWithFloat:0.7],
                      nil];

[[recordButton layer] insertSublayer:gradient atIndex:0];
于 2012-05-25T03:54:01.097 回答
3

我在一个带有 UIImageView 子视图的视图中实现了这一点。ImageView 指向的图像是渐变的。然后我在 UIView 中设置了一个背景颜色，我有一个彩色渐变视图。接下来我根据需要使用视图，我绘制的所有内容都将在这个渐变视图下。通过在 ImageView 顶部添加第二个视图，您可以选择一些选项，无论您的绘图是低于还是高于渐变...

于 2009-05-12T06:35:45.783 回答