CAGradientLayer + UIBezierPath 为
2018-09-09 本文已影响42人
白色天空729
效果图:
屏幕快照 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