您的位置:首页 > 产品设计 > UI/UE

UIView 的渐变色呈现

2016-07-12 11:52 302 查看
今天遇到一个功能:view 的黑色渐变:由最初的黑色到一点点的颜色变为透明。现在就表述一下实现的方法。

主要的是属性:CAGradientLayer 

可以直接使用CAGradientLayer来实现渐变色。(android有各种drawable,iOS有各种layer。)

首先添加QuartzCore.framework

#import <QuartzCore/QuartzCore.h>

一、实现透明度渐变的view

1、得到渐变颜色的 方法 

- (CAGradientLayer *)shadowAsInverse

{

    CAGradientLayer *newShadow = [[CAGradientLayer alloc] init];

    CGRect newShadowFrame = CGRectMake(0, 0, SCREEN_WIDTH,20 *SCREEN_RATIO );

    newShadow.frame = newShadowFrame;

    //添加渐变的颜色组合(颜色透明度的改变)

    newShadow.colors = [NSArray arrayWithObjects:

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0] CGColor]
,

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0.1] CGColor],

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0.2] CGColor],

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0.3] CGColor],

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0.4] CGColor],

                        (id)[[[UIColor blackColor] colorWithAlphaComponent:0.5] CGColor],

                        nil];

    return newShadow;

}

2.在你需要添加的地方。添加就可以啦!例如:

 

[newCell.blackView.layer addSublayer:[self shadowAsInverse]];

二、实现颜色渐变的view

1、创建一个 UIView:

- (void)viewDidLoad {
[super viewDidLoad];
//  创建 UIView 用来承载渐变色
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 200)];
[self.view addSubview:myView];
}

2、创建渐变色颜色列表

//  创建 CAGradientLayer 对象
CAGradientLayer *gradientLayer = [CAGradientLayer layer];

//  设置 gradientLayer 的 Frame
gradientLayer.frame = myView.bounds;

//  创建渐变色数组,需要转换为CGColor颜色
gradientLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor yellowColor].CGColor,
(id)[UIColor blueColor].CGColor];

//  设置三种颜色变化点,取值范围 0.0~1.0
gradientLayer.locations = @[@(0.1f) ,@(0.4f)];

//  设置渐变颜色方向,左上点为(0,0), 右下点为(1,1)
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1);

//  添加渐变色到创建的 UIView 上去
[myView.layer addSublayer:gradientLayer];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息