UIView自定义圆角和渐变色添加

一:任意圆角的切割
对于UIView我们可以通过设置clipsToBounds和layer.cornerRadius属性对UIView切圆角。
但是最近在项目中遇到碰到了一个只需要切两个角为圆角的View。特将方法整理如下:

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *baseView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.baseView.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
    maskLayer.frame = self.baseView.bounds;
    maskLayer.path = maskPath.CGPath;
    self.baseView.layer.mask = maskLayer;
}
@end

页面效果如下:


UIView自定义圆角和渐变色添加_第1张图片
image.png

可以看到已经将页面的下面的两个角给切为了20为半径的圆角。此过程比较重要的是贝塞尔曲线的创建
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.baseView.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];
参数1:决定了切割的范围
参数2:决定了切割哪些角
参数3:决定了切角的半径。

二:UIView渐变色的生成
项目中进行渐变色效果的实现可以采用UIImageView加载渐变背景图片。但是在某些时候可能没有渐变的背景图片。在这种情况下我们可以对UIView属性进行设置。代码来实现渐变色
代码如下:

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.baseView.bounds;
    gradientLayer.cornerRadius = 4;
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    [self.baseView.layer addSublayer:gradientLayer];

页面截图如下
UIView自定义圆角和渐变色添加_第2张图片
image.png

代码分析

你可能感兴趣的:(UIView自定义圆角和渐变色添加)