CAGradientLayer + UIBezierPath 为视图画渐变背景色并带有弧度

效果图：

屏幕快照 2018-09-09 下午12.41.51.png

实现代码：

OC版本

xxx.h


//  处理CAGradientLayer + UIBezierPath 为视图画渐变背景色

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface CornerGradientV : UIView

/**
 CAGradientLayer + UIBezierPath 为视图画渐变背景色

 @param frame 传入的大小
 @param colors 传入的渐变颜色数组
 @param radius 需要裁剪的半径
 @return 处理好的CAGradientLayer + UIBezierPath 为视图画渐变背景色矩形
 */
- (instancetype)initWithFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius;

/**
 CAGradientLayer + UIBezierPath 为视图画渐变背景色
 
 @param frame 传入的大小
 @param colors 传入的渐变颜色数组
 @param radius 需要裁剪的半径
 @return 处理好的CAGradientLayer + UIBezierPath 为视图画渐变背景色矩形
 */
- (void)withFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius;
@end

NS_ASSUME_NONNULL_END

@end

NS_ASSUME_NONNULL_END

xxx.m

/*
 属性说明：
 
 frame : 渐变层的位置及大小
 colors: 各个渐变范围的颜色
 startPoint 、endPoint: 渐变层起点 endPoint 渐变层终点 确定渐变的方向 如: (0,0)->(1,1) 左上到右下渐变 （0,0)->(0,1) 从上到下渐变 (0,0)->(1,0) 从左到右渐变
 locations: 开始渐变的停止位置即非渐变色的位置，为递增数组，默认会根据颜色个数均匀分布，如三个颜色默认数组为@[0,0.5,1],即在0处为红色0.5处为绿色1处为橘色，之间为渐变色 NSNumber 对象数组 每一个number的范围为[0,1]
 type: 渐变方式，默认 kCAGradientLayerAxial轴向方式，也只有之一种方式
 */

#import "CornerGradientV.h"

@implementation CornerGradientV

- (instancetype)initWithFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius {
    self =  [super initWithFrame:frame];
    if (self) {
        [self withFrame:frame withGradientColors:colors withCornerRius:radius];
    }
    return self;
}

- (void)withFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius {
    CAGradientLayer *gradLayer = [CAGradientLayer layer];
    
    gradLayer.frame = frame;
    
    gradLayer.colors = colors;
    gradLayer.startPoint = CGPointMake(0, 1);
    gradLayer.endPoint = CGPointMake(1, 1);
    
    [self.layer addSublayer:gradLayer];
    
    UIBezierPath *_circleSmallPath = [[UIBezierPath alloc] init];
    [_circleSmallPath moveToPoint:CGPointMake(0, 0)];
    [_circleSmallPath addLineToPoint:CGPointMake(0, frame.size.height - radius)];
    [_circleSmallPath addCurveToPoint:CGPointMake(frame.size.width, self.frame.size.height - radius) controlPoint1:CGPointMake(frame.size.width / 2, frame.size.height) controlPoint2:CGPointMake(frame.size.width, frame.size.height - radius)];
    [_circleSmallPath addLineToPoint:CGPointMake(frame.size.width, frame.size.height - radius)];
    
    [_circleSmallPath addLineToPoint:CGPointMake(frame.size.width, 0)];
    [_circleSmallPath closePath];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = _circleSmallPath.CGPath;
    
    gradLayer.mask = shapeLayer;
}

@end

代码使用：

#define ZXHexRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

//    CornerGradientV *vv = [[CornerGradientV alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 170)];
//    [vv withFrame:vv.frame withGradientColors:@[(id)ZXHexRGB(0x6db831).CGColor,(id)ZXHexRGB(0x4d912a).CGColor] withCornerRius:20];
//    [self.view addSubview:vv];
    
    CornerGradientV *vvv = [[CornerGradientV alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 170) withGradientColors:@[(id)ZXHexRGB(0x6db831).CGColor,(id)ZXHexRGB(0x4d912a).CGColor] withCornerRius:20];
    [self.view addSubview:vvv];

Swift版本

/// //  处理CAGradientLayer + UIBezierPath 为视图画渐变背景色
/*
 属性说明：
 
 frame : 渐变层的位置及大小
 colors: 各个渐变范围的颜色
 startPoint 、endPoint: 渐变层起点 endPoint 渐变层终点 确定渐变的方向 如: (0,0)->(1,1) 左上到右下渐变 （0,0)->(0,1) 从上到下渐变 (0,0)->(1,0) 从左到右渐变
 locations: 开始渐变的停止位置即非渐变色的位置，为递增数组，默认会根据颜色个数均匀分布，如三个颜色默认数组为@[0,0.5,1],即在0处为红色0.5处为绿色1处为橘色，之间为渐变色 NSNumber 对象数组 每一个number的范围为[0,1]
 type: 渐变方式，默认 kCAGradientLayerAxial轴向方式，也只有之一种方式
 */


import UIKit

class CornetGradient_Swift: UIView {

    /// CAGradientLayer + UIBezierPath 为视图画渐变背景色
    ///
    /// - Parameters:
    ///   - frame: 传入的大小
    ///   - colors: 传入的渐变颜色数组
    ///   - radius: 需要裁剪的半径
    init(frame: CGRect, withGradientColors colors: [Any]?, withCornerRius radius: CGFloat) {
        super.init(frame: frame)
        
        let gradLayer = CAGradientLayer()
        
        gradLayer.frame = frame
        
        gradLayer.colors = colors
        gradLayer.startPoint = CGPoint(x: 0, y: 1)
        gradLayer.endPoint = CGPoint(x: 1, y: 1)
        
        layer.addSublayer(gradLayer)
        
        let circleSmallPath = UIBezierPath()
        circleSmallPath.move(to: CGPoint(x: 0, y: 0))
        circleSmallPath.addLine(to: CGPoint(x: 0, y: frame.size.height - radius))
        circleSmallPath.addCurve(to: CGPoint(x: frame.size.width, y: frame.size.height - radius), controlPoint1: CGPoint(x: frame.size.width / 2, y: frame.size.height), controlPoint2: CGPoint(x: frame.size.width, y: frame.size.height - radius))
        circleSmallPath.addLine(to: CGPoint(x: frame.size.width, y: frame.size.height - radius))
        
        circleSmallPath.addLine(to: CGPoint(x: frame.size.width, y: 0))
        circleSmallPath.close()
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circleSmallPath.cgPath
        
        gradLayer.mask = shapeLayer
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

使用

  let colorArray = [ #colorLiteral(red: 0.4274509804, green: 0.7215686275, blue: 0.1921568627, alpha: 1).cgColor,#colorLiteral(red: 0.3019607843, green: 0.568627451, blue: 0.1647058824, alpha: 1).cgColor]
        
        let v = CornetGradient_Swift.init(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 170), withGradientColors: colorArray, withCornerRius: 20)
        self.view.addSubview(v)

参考资源：
https://www.cnblogs.com/jaesun/p/CAGradientLayer--UIBezierPath-wei-shi-tu-hua-jian-.html

iOS UIBezierPath方法的使用：
//www.greatytc.com/p/6cf87ca48811