iOS-视图切圆角

许多应用中会有视图圆角效果, 如头像会切成圆形样式显示

• 直接设置视图layer层属性

//声明
@property (nonatomic, strong) UIImageView *carImgView;

//懒加载
- (UIImageView *)carImgView
{
    if (!_carImgView) {
        _carImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 100, 80, 80)];
        _carImgView.backgroundColor = [UIColor orangeColor];
        _carImgView.image = [UIImage imageNamed:@"car"];
        _carImgView.layer.cornerRadius = 40;
        _carImgView.layer.masksToBounds = YES;
    }
    return _carImgView;
}

• 贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

//声明
@property (nonatomic, strong) UIImageView *dogImgView;

//懒加载
- (UIImageView *)dogImgView
{
    if (!_dogImgView) {
        _dogImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 200, 80, 80)];
//        _dogImgView.backgroundColor = [UIColor orangeColor];
        _dogImgView.image = [UIImage imageNamed:@"dog"];
    }
    return _dogImgView;
}

//圆角
//开始对imageView进行画图
    UIGraphicsBeginImageContextWithOptions(self.dogImgView.bounds.size, NO, 40.0);
    //使用贝塞尔曲线画出一个圆形
    [[UIBezierPath bezierPathWithRoundedRect:self.dogImgView.bounds cornerRadius:self.dogImgView.frame.size.width] addClip];
    [self.dogImgView drawRect:self.dogImgView.bounds];
    self.dogImgView.image = UIGraphicsGetImageFromCurrentImageContext();
    //结束画图
    UIGraphicsEndImageContext();

• 使用CAShapeLayer和UIBezierPath设置圆角

//声明
@property (nonatomic, strong) UIImageView *plantImgView;

//懒加载
- (UIImageView *)plantImgView
{
    if (!_plantImgView) {
        _plantImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 300, 80, 80)];
        _plantImgView.backgroundColor = [UIColor orangeColor];
        _plantImgView.image = [UIImage imageNamed:@"plant"];
    }
    return _plantImgView;
}

//圆角
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.plantImgView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:self.plantImgView.bounds.size];
    
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
    
    //设置大小
    maskLayer.frame = self.plantImgView.bounds;
    
    //设置图形样子
    maskLayer.path = maskPath.CGPath;
    self.plantImgView.layer.mask = maskLayer;

• 根据使用CAShapeLayer和UIBezierPath设置圆角 利用byRoundingCorners设置不同枚举和cornerRadii 可以做出一些其他效果 如有些需求需要我们将视图的部分位置切圆角其他仍保持直角

//声明
@property (nonatomic, strong) UIImageView *girlImgView;

//懒加载
- (UIImageView *)girlImgView
{
    if (!_girlImgView) {
        _girlImgView = [[UIImageView alloc] initWithFrame:CGRectMake(5, kScreen_Height - (kScreen_Width - 10) * 281/450.0 - 5, kScreen_Width - 10, (kScreen_Width - 10) * 281/450.0)];
        _girlImgView.backgroundColor = [UIColor orangeColor];
        _girlImgView.image = [UIImage imageNamed:@"girl"];
    }
    return _girlImgView;
}

//枚举
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
     UIRectCornerTopLeft     = 1 << 0,
     UIRectCornerTopRight    = 1 << 1,
     UIRectCornerBottomLeft  = 1 << 2,
     UIRectCornerBottomRight = 1 << 3,
     UIRectCornerAllCorners  = ~0UL
     };

//部分切圆角
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.girlImgView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc]init];
    
    //设置大小
    layer.frame = self.girlImgView.bounds;
    
    //设置图形样子
    layer.path = path.CGPath;
    self.girlImgView.layer.mask = layer;

最终效果:

Simulator Screen Shot 2017年7月25日 13.31.23.png

代码