利用xib设置button不规则圆角

本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

在xib上设置view的圆角其实很简单.

在`xib`上设置`view`的圆角

就这么两步就妥妥的了, 但是如果是这种不规则的圆角呢? 如下图所示:

Snip20190226_2.png

如果是用纯代码的话设置button的圆角的话, 实际上就是button的layer层的mask属性赋值一个CAShapeLayer, 而这个CAShapeLayer的路径就是我们设置的贝塞尔曲线, 代码如下:

    _yf_cornerRadius = _yf_cornerRadius ? : 10.0f;
    ///< cornerRadii : 每个角椭圆的半径
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(_yf_cornerRadius, _yf_cornerRadius)];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;

但是, 我们如何直接在xib上设置这种不规则圆角呢?
这就需要我们用到两个关键字: IB_DESIGNABLE, IBInspectable

IB_DESIGNABLE是写在类名前面的,
IBInspectable是写在属性前面的:

IB_DESIGNABLE
@interface CYFRoundedButton : UIButton

@property (nonatomic, assign) IBInspectable NSUInteger style;

@property (nonatomic, assign) IBInspectable CGFloat yf_cornerRadius;

@end

IB_DESIGNABLE标识后: 在xib的设置界面就会出现下图所示的情形:

`IB_DESIGNABLE `标识后

这样就可以实时地展示这个自定义view的图形

IBInspectable标识后, 我们就可以使用自定义的属性:

自定义属性

这样, 只要碰到这种不规则圆角的button, 我们就可以直接在xib上使用自定义button, 然后自己设置自定义的圆角属性和圆角模式, 代码我们只要写一遍即可:

.h文件

IB_DESIGNABLE
@interface CYFRoundedButton : UIButton

@property (nonatomic, assign) IBInspectable NSUInteger style;

@property (nonatomic, assign) IBInspectable CGFloat yf_cornerRadius;

@end

.m文件

@implementation CYFRoundedButton

- (void)makeCorner {
    UIRectCorner corners;
    switch (self.style) {
        case 0:
            corners = UIRectCornerBottomLeft;
            break;
        case 1:
            corners = UIRectCornerTopRight;
            break;
        case 2:
            corners = UIRectCornerTopLeft;
            break;
        case 3:
            corners = UIRectCornerTopRight;
            break;
        case 4:
            corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
            break;
        case 5:
            corners = UIRectCornerTopLeft | UIRectCornerTopRight;
            break;
        case 6:
            corners = UIRectCornerBottomLeft | UIRectCornerTopLeft;
            break;
        case 7:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight;
            break;
        case 8:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight | UIRectCornerTopLeft;
            break;
        case 9:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight | UIRectCornerBottomLeft;
            break;
        default:
            corners = UIRectCornerAllCorners;
            break;
    }
    _yf_cornerRadius = _yf_cornerRadius ? : 10.0f;
    ///< cornerRadii : 每个角椭圆的半径
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(_yf_cornerRadius, _yf_cornerRadius)];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupUIOnce];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self setupUIOnce];
    }
    return self;
}

- (void)setupUIOnce {
    [self makeCorner];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self makeCorner];
}

@end

以上!

PS. 本人有若干成套学习视频, 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.