iOS UIView背景渐变

iOS UIView背景渐变

🗨

通常要把UIView背景色设置为渐变色,虽然做一张渐变的背景图很方便,但图片总归占用资源的,所以我们最好使用代码来实现效果。

我们使用的是CAGradientLayer来实现这个效果。

上代码

    //实现背景渐变

    //初始化我们需要改变背景色的UIView,并添加在视图上
    self.theView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
    [self.view addSubview:self.theView];

    //初始化CAGradientlayer对象,使它的大小为UIView的大小
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = self.theView.bounds;

    //将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
    [self.theView.layer addSublayer:self.gradientLayer];

    //设置渐变区域的起始和终止位置(范围为0-1)
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(0, 1);

    //设置颜色数组
    self.gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,
                                  (__bridge id)[UIColor redColor].CGColor];

    //设置颜色分割点(范围:0-1)
    self.gradientLayer.locations = @[@(0.5f), @(1.0f)];

注意

  • 渐变区域的范围是 (0,0) -> (1,1)
  • 渐变层要添加在需要渐变视图的layer层

iOS里面的背景颜色实现渐变的方式有两种,第一种就是给一个渐变的图片做背景,当然这样有很大的局限性,比如我现在就需要根据项目需求要动态的改变渐变背景色。

这样首先想到在自定义视图里面的drawRect方法进行绘制。

 

- (void)drawRect:(CGRect)rect {  

      

    /** 

     *  1.通过CAGradientLayer 设置渐变的背景。 

     */  

    CAGradientLayer *layer = [CAGradientLayer new];  

    //colors存放渐变的颜色的数组  

    layer.colors=@[(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor whiteColor].CGColor];  

    /** 

     * 起点和终点表示的坐标系位置,(0,0)表示左上角,(1,1)表示右下角 

     */  

    layer.startPoint = CGPointMake(0.50);  

    layer.endPoint = CGPointMake(0.51);  

    layer.frame = self.bounds;  

    [self.layer addSublayer:layer];  

      

    /** 

     *  方法2.CGGradientRef 

     */  

      

    CGContextRef ctx = UIGraphicsGetCurrentContext();  

    CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceRGB();  

    /*指定渐变色 

     space:颜色空间 

     components:颜色数组,注意由于指定了RGB颜色空间,那么四个数组元素表示一个颜色(red、green、blue、alpha), 

     如果有三个颜色则这个数组有4*3个元素 

     locations:颜色所在位置(范围0~1),这个数组的个数不小于components中存放颜色的个数 

     count:渐变个数,等于locations的个数 

     */  

    CGFloat compoents[12]={  

        0,0,0,1,  

        0.8,0.1,0.5,1.0,  

        1.0,1.0,1.0,1.0  

    };  

      

    //设置渐变的位置  

    CGFloat locations[3]={0,0.3,1.0};  

    //创建梯度上下文  

    CGGradientRef gradient= CGGradientCreateWithColorComponents(colorSpace, compoents, locations, 3);  

      

    /*绘制线性渐变 

     context:图形上下文 

     gradient:渐变色 

     startPoint:起始位置 

     endPoint:终止位置 

     options:绘制方式,kCGGradientDrawsBeforeStartLocation 开始位置之前就进行绘制,到结束位置之后不再绘制, 

     kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制,到结束点之后继续填充 

      

     startPoint endPoint 不同与上一种方法,指的是真正的坐标 

     */  

    CGContextDrawLinearGradient(ctx, gradient, CGPointMake(self.frame.size.width/20), CGPointMake(self.frame.size.width/2,self.frame.size.height), kCGGradientDrawsAfterEndLocation);  

      

    //释放颜色空间  

    CGColorSpaceRelease(colorSpace);  

}  


方法1效果:

 

方法2的效果:


频道:iOS