如何高效的為控件實現(xiàn)圓角

注意:因為在項目中會用到各種奇形怪狀的控件扣泊,有時候設計切圖也比較費勁近范,那就自己動手吧正好了解一下高效切割圓角的方法,Let`s do it

通常我們經常會習慣性的直接在控件的Layer層進行設置延蟹,這樣設置一個控件也許沒有多大的性能影響评矩,但是如果控件多的話估計就不行了。

self.button.layer.cornerRadius = 20;
self.button.layer.masksToBounds = YES;

下面就介紹兩種比較常見的設置圓角的方法

第一種方法:使用Quartz2D直接繪制圖片
- (UIImage*)cropImageWithRect:(CGRect)cropRect 
{
    CGRect drawRect = CGRectMake(-cropRect.origin.x , -cropRect.origin.y, self.size.width * self.scale, self.size.height * self.scale);
    UIGraphicsBeginImageContext(cropRect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, CGRectMake(0, 0, cropRect.size.width, cropRect.size.height));
    [self drawInRect:drawRect];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
第二種方法:使用貝塞爾曲線(UIBezierPath)
self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    self.button.frame = CGRectMake(10, 200, self.view.frame.size.width - 20, 40);
    self.button.backgroundColor = [UIColor brownColor];
    [self.view addSubview:self.button];
    
    /* 貝塞爾曲線切割 */
    /**
     *  @param UIRectCorner
     *  左上 UIRectCornerTopLeft     = 1 << 0,
     左下 UIRectCornerBottomLeft  = 1 << 2,
     右下 UIRectCornerBottomRight = 1 << 3,
     所有角 UIRectCornerAllCorners  = ~0UL
     */
    
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.button.bounds byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:self.button.bounds.size];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    [self.button setTitle:@"type: UIRectCornerTopRight | UIRectCornerBottomRight" forState:UIControlStateNormal];
    self.button.titleLabel.font = [UIFont systemFontOfSize:14];
    //設置大小
    maskLayer.frame = self.button.bounds;
    //設置圖形樣子
    maskLayer.path = maskPath.CGPath;
    self.button.layer.mask = maskLayer;
  • 下面是實現(xiàn)各種圓角的效果
    屏幕快照 2018-06-15 10.23.55.png
屏幕快照 2018-06-15 10.24.34.png
屏幕快照 2018-06-15 10.26.08.png
屏幕快照 2018-06-15 10.30.26.png
屏幕快照 2018-06-15 10.31.50.png
屏幕快照 2018-06-15 10.32.21.png
屏幕快照 2018-06-15 10.33.08.png
屏幕快照 2018-06-15 10.35.52.png

下次需要啥效果直接看看就知道了阱飘,因為平常實在是遇到的不多斥杜,多以記錄一下,如果你覺得有用沥匈,留下您的腳诱嵛埂!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末高帖,一起剝皮案震驚了整個濱河市缰儿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌散址,老刑警劉巖乖阵,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宣赔,死亡現(xiàn)場離奇詭異,居然都是意外死亡瞪浸,警方通過查閱死者的電腦和手機儒将,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來对蒲,“玉大人钩蚊,你說我怎么就攤上這事∑氡危” “怎么了两疚?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵床估,是天一觀的道長含滴。 經常有香客問我,道長丐巫,這世上最難降的妖魔是什么谈况? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮递胧,結果婚禮上碑韵,老公的妹妹穿的比我還像新娘。我一直安慰自己缎脾,他們只是感情好祝闻,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著遗菠,像睡著了一般联喘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辙纬,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天豁遭,我揣著相機與錄音,去河邊找鬼贺拣。 笑死蓖谢,一個胖子當著我的面吹牛,可吹牛的內容都是我干的譬涡。 我是一名探鬼主播闪幽,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼涡匀!你這毒婦竟也來了盯腌?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤渊跋,失蹤者是張志新(化名)和其女友劉穎腊嗡,沒想到半個月后着倾,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡燕少,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年卡者,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片客们。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡崇决,死狀恐怖,靈堂內的尸體忽然破棺而出底挫,到底是詐尸還是另有隱情恒傻,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布建邓,位于F島的核電站盈厘,受9級特大地震影響,放射性物質發(fā)生泄漏官边。R本人自食惡果不足惜沸手,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望注簿。 院中可真熱鬧契吉,春花似錦、人聲如沸诡渴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妄辩。三九已至惑灵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間恩袱,已是汗流浹背泣棋。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留畔塔,地道東北人潭辈。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像澈吨,于是被迫代替她去往敵國和親把敢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內容

  • 1谅辣、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數(shù)據庫組件 SD...
    陽明先生_X自主閱讀 15,985評論 3 119
  • 1.ios高性能編程 (1).內層 最小的內層平均值和峰值(2).耗電量 高效的算法和數(shù)據結構(3).初始化時...
    歐辰_OSR閱讀 29,405評論 8 265
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫修赞、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,117評論 4 61
  • 我用消逝代替了那個詞。 第一次深刻面對消逝柏副,是初中時勾邦,養(yǎng)了六年的貓病了。我和弟弟圍著它哭泣割择,看著它無能為力眷篇。至今記...
    立哥行閱讀 440評論 2 6
  • 新人,剛來到
    雨落古彭閱讀 184評論 0 0