CAGradientLayer + UIBezierPath 為檢視畫漸變背景色並帶有弧度

weixin_33890499發表於2018-09-09
UI

效果圖：


2074791-94490f10f17e5afc.png
螢幕快照 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方法的使用 ：
https://www.jianshu.com/p/6cf87ca48811

相關文章