UIView和UILabels在iPhone上的渐变

Question

  

可能重复：
  Manually drawing a gradient in iPhone apps?

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

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

Answer 1

我意识到这是一个较旧的主题，但为了将来参考：

从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文档。您可以选择指定起点和终点（如果您不希望线性渐变从顶部到底部直线），甚至可以指定映射到每种颜色的特定位置。

Answer 2

您可以使用Core Graphics绘制渐变，如Mike的回应中所指出的那样。作为更详细的示例，您可以创建一个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的{​​{1}}设置为您喜欢的任何内容，此光泽度将在该颜色之上绘制。您还可以使用backgroundColor函数绘制径向渐变。

您只需要适当调整此CGContextDrawRadialGradient的大小，并将UIView添加为其子视图，以获得您想要的效果。

EDIT（4/23/2009）：根据St3fan的建议，我已经用代码中的边界替换了视图的框架。这可以纠正视图原点不是（0,0）的情况。

Answer 3

使用CAGradientLayer而不是CGGradient时，渐变不平滑，但有明显的步进。请参阅：

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

Answer 4

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

Answer 5

Mirko Froehlich的回答对我有用，除非我想使用自定义颜色。诀窍是用Hue，饱和度和亮度而不是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选项卡。 Hue在此视图中以度为单位进行度量，因此将值除以360以获得您希望在代码中输入的值。

Answer 6

这就是我的工作 - 将xCode的IB中的UIButton设置为透明/清晰，没有bg图像。

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

Answer 7

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