給Button添加特定個數(shù)的圓角

前言

寫代碼的時候遇到一個問題,需要給一個按鈕設(shè)置左邊兩個圓角,右邊為直角,網(wǎng)上找了一些資料,發(fā)現(xiàn)有些確實是可以自定義圓角的位置的。

比如:大部分資料都是,使用UIBezierPath和CAShapeLayer來設(shè)置view的mask

UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(120,10,80,80)];
view2.backgroundColor = [UIColor redColor];
[self.view addSubview:view2];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10,10)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view2.bounds;
maskLayer.path = maskPath.CGPath;
view2.layer.mask = maskLayer;

但是有一點,我在項目中是使用Masonry來添加約束的,前面代碼有效果的前提是:view的frame需要在添加之前就確定下來!,而Masonry則是使用block回調(diào)來約束的,所以:使用Masonry的UI代碼,上面的是沒有效果的?。?!

經(jīng)過查閱資料,原來:
使用masonry的實質(zhì)還是調(diào)用了ios7以后的autolayout,如果要更新frame,需要調(diào)用layoutIfNeeded函數(shù)進行布局,然后所約束的控件才會按照約束條件,生成當前布局相應(yīng)的frame和bounds。這樣就可以利用這兩個屬性來進行圖片圓角剪裁。而調(diào)用layoutIfNeeded的目的是讓系統(tǒng)調(diào)用layoutSubviews方法,我們也可以直接在這個方法里獲取frame,因為這時候開始layout subviews,Masonry已經(jīng)計算出了真實的frame。
所以,上面的代碼,如果使用Masonry,則要改成:

UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor redColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(100, 40));
    make.left.equalTo(self.view).offset(100);
    make.top.equalTo(self.view).offset(100);
}];

//調(diào)用此方法,后面代碼才會起作用
[view2 layoutIfNeeded];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10,10)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view2.bounds;
maskLayer.path = maskPath.CGPath;
view2.layer.mask = maskLayer;

其實,實際中的我的代碼是這樣的:

    self.plusBtn = [WDTools createButtonWithTitle:@"+" frame:CGRectZero target:self selector:@selector(plusAction)];
    [self addSubview:self.plusBtn];
    [self.plusBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self);
        make.top.equalTo(self);
        make.height.equalTo(self);
        make.width.equalTo(self).multipliedBy(0.35);
    }];
    [self.plusBtn layoutIfNeeded];
    UIBezierPath *maskPath2 = [UIBezierPath bezierPathWithRoundedRect:self.plusBtn.bounds byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
    CAShapeLayer *maskLayer2 = [[CAShapeLayer alloc] init];
    maskLayer2.frame = self.plusBtn.bounds;
    maskLayer2.path = maskPath2.CGPath;
    
    self.plusBtn.layer.mask = maskLayer2;
    self.plusBtn.layer.borderColor = DDColorRandom.CGColor;
    self.plusBtn.layer.borderWidth = 2;

但是效果呢?

這里寫圖片描述

可以看出,我是想要給這個按鈕添加一個Border的,但是用了上述的方法,并不能達到我要的效果?。?!

如果有知道的大神們,也請給個指點!謝謝!

結(jié)果

我就怒從心頭起,惡向膽邊生,于是我就自己寫了一個Button的子類.
看效果吧!


這里寫圖片描述
    RoundedCornerButton *test = [[RoundedCornerButton alloc]init];
    [test setTitle:@"-" forState:UIControlStateNormal];
    test.direction = kCornerDirectionTopLeft | kCornerDirectionBottomLeft;
    test.roundedCornerRadius = 5.f;
    test.strokeWidth = 1.f;
    test.strokeColor = DDColorRandom;
    test.backgroundColor = DDColorRandom;
    [test addTarget:self action:@selector(minusAction) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:test];
    [test mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
        make.top.equalTo(self);
        make.height.equalTo(self);
        make.width.mas_equalTo(40);
    }];

顯然,我這里同時設(shè)置了邊框的顏色,和背景色,但是這兩個是不會產(chǎn)生影響的。

typedef NS_ENUM(NSInteger,CornerDirection) {
    kCornerDirectionTopLeft     = 1 << 0,
    kCornerDirectionTopRight    = 1 << 1,
    kCornerDirectionBottomLeft  = 1 << 2,
    kCornerDirectionBottomRight = 1 << 3,
};

@interface RoundedCornerButton : UIButton
//圓角方向
@property (assign, nonatomic) CornerDirection direction;
//圓角半徑
@property (assign, nonatomic) CGFloat roundedCornerRadius;
//邊線寬度
@property (assign, nonatomic) CGFloat strokeWidth;
//邊線顏色
@property (strong, nonatomic) UIColor *strokeColor;

@end

接口方面,不能再簡單,就不多說了,
這里傳到Github上,感覺有幫助的請給個star! 謝謝!

PS

這里還有一個以前寫的類似的設(shè)置按鈕背景色為漸變色的,還有一個給View添加指定數(shù)量的border的,有需要的可以看一下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,342評論 4 61
  • 項目里的布局一直都是純代碼流,順帶著Autolayout也一直沒有使用,直到遇到了masonry,讓我看到了希望,...
    小笨狼閱讀 9,442評論 25 128
  • http://www.itdecent.cn/p/f6cf9ef451d9 本文我們將提到: aotulayout...
    ai___believe閱讀 4,100評論 0 3
  • 有的人如酒, 初品, 苦澀、辛辣; 再品,醇香、如醉, 于是,成了戒不掉的癮。 有的人如糖, 第一口,甜蜜; 第二...
    東坡瑯閱讀 231評論 0 1
  • 昨天晚上跟妹妹去看了歐陽娜娜的生日音樂會,在北京的世紀劇院,場地不大,也沒有過多的裝飾,就這樣簡簡單單的開始,簡簡...
    桐呦呦閱讀 304評論 0 1

友情鏈接更多精彩內(nèi)容