当前位置:  开发笔记 > IOS > 正文

UIView和UILabels在iPhone上的渐变

如何解决《UIView和UILabels在iPhone上的渐变》经验,为你挑选了6个好方法。

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

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



1> Mirko Froehl..:

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

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


为了防止我的评论在他们考虑实施上述其他解决方案时引起任何人的注意,请执行此操作.这可能不容易(但要记住,你需要添加QuartzCore框架并在你的类中导入`#import `).
有人可能会施加额外的效果,例如cornerRadius.他们必须在这里添加更多代码:`view.layer.masksToBounds = YES;`以确保顺利进行.
嗯.使用此解决方案时,我的标签文本消失了.
@HiveHicks我发现,如果我使用`CAGradientLayer`用于`UILabel`,我必须设置`backgroundColor`到`[的UIColor clearColor]`(或等同物)
我的实验表明,具有固定渐变图像的图像显示出使用CAGradientLayer的更好性能.
我得到它的工作,渐变,突出显示(也突出显示渐变)圆角等.您还可以下载代码:http://www.banane.com/2012/06/01/iphone-gradient-buttons-with -highlighting /

2> Brad Larson..:

您可以使用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's 设置为backgroundColor您喜欢的任何颜色,并且该颜色将在该颜色之上绘制.您还可以使用该CGContextDrawRadialGradient函数绘制径向渐变.

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

编辑(4/23/2009):根据St3fan的建议,我已经用代码中的边界替换了视图的框架.这可以纠正视图原点不是(0,0)的情况.


我试过这段代码但不正确.不应将currentFrame设置为self.frame,而应将其设置为self.bounds.

3> ThomasW..:

使用时CAGradientLayer,相反CGGradient,渐变不平滑,但有明显的步进.看到这个例子:

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


**重要提示:**我最近删除了我的CGGradient代码,并将其替换为CAGradientLayer.你知道为什么?我就像30个单元一样吸引它,性能影响很大.CAGradient在性能方面要好得多(解释微小的质量差异).
您是否介意使用CGGradient发布相当于Mirko Froehlich示例的代码?
对于Mazyod的评论,如果您发现自己以相同的方式多次生成相同的渐变(或任何其他绘图操作)并影响性能,请考虑只执行一次,将结果缓存到UIImage中并重复使用.适用于多层图纸.

4> Kendall Helm..:

您还可以使用一个像素宽的图形图像作为渐变,并设置视图属性以展开图形以填充视图(假设您考虑的是简单的线性渐变而不是某种径向图形).


使用这种方法,确保有两个不同的渐变:一个用于常规显示,一个用于视网膜显示.
与编码解决方案相比,此解决方案的一个重要优点是颜色渐变通常是装饰属性,并且实际上不应该在代码中表达.这就是图形人员的用途.编写表达颜色的代码是逻辑与表示的差分.当营销团队决定改变颜色,并且图形人员询问如何做到这一点时,他不会被告知你只是在MyLabelView.m中调整`CAGradientLayer`上的颜色数组......他也不应该.对于一个人的商店来说无关紧要,但对于团队而言却无所谓.
同样适用于具有动态高度的视图,例如一个高度取决于它必须保持多少文本的单元格.
我同意Nate的观点,让设计师尽可能轻松地更换资产是件好事.
@Nate - 您的逻辑代码应与您的演示代码分开.这并不意味着你唯一可能的解决方案是拥有一个图形文件,坦率地说,对于你的应用程序中的每个位图,你将来要做更多的工作.渐变代码总是很棒.在Apple决定再次提高屏幕分辨率之前,您的位图才会看起来很好.

5> Robert Wagst..:

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选项卡.Hue在此视图中以度为单位进行度量,因此将值除以360以获得您要在代码中输入的值.



6> Anna Billstr..:

这就是我的工作 - 将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];

推荐阅读
凹凸曼00威威_694
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有