IOS控件渐变色实现

一些优秀的APP应用的UI设计都很漂亮，控件的颜色搭配也个性十足，给使用者留下很好的印象，其中一类是一个控件上的色彩不是整体不变的，而是前后异同的，例如：

屏幕快照 2017-01-05 20.39.09.png

屏幕快照 2017-01-05 20.38.57.png

想要让你的控件实现如上图中控件一样的颜色变化，我们需要调用CoreAnimation 里面的一个类：CAGradientLayer。

绘制渐变色的代码如下：

//  创建 UIView 用来承载渐变色
    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 200)];
    [self.view addSubview:myView];
    
 //  创建 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];

运行工程，得到的结果为：

屏幕快照 2017-01-05 20.50.28.png

途中从上而下实现了红、黄、蓝颜色的变化，当然，想要让自己的控件颜色变得绚丽，还需要对色彩进行调节，这需要多实践和摸索。

IOS控件渐变色实现

推荐阅读更多精彩内容