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

页面效果如下:


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];

页面截图如下
image.png

代码分析

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 8,997评论 7 11
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,196评论 4 61
  • |-1-更新内容[6.从仓库解析依赖的机制(重要)] 1Maven仓库作用 仓库用来存储所有项目使用到构件,在ma...
    zlcook阅读 11,389评论 0 25
  • #幸福是需要修出来的~每天进步1%~幸福实修07班~深圳# 20170601(19/99) 【幸福三朵玫瑰】 【幸...
    风吹小树动阅读 2,981评论 0 0
  • 有一天,心血来潮,想到了要自己烤面包,烤饼干。想象着自己烤出来的东西又干净又好吃,可以给女儿当早餐,当零食...
    清晨的风儿阅读 2,900评论 3 3