似乎沒(méi)有那家公司比Apple更愛(ài)圓角了,事實(shí)上,圓角也會(huì)讓圖形/產(chǎn)品看起來(lái)更加無(wú)侵略性,能夠帶來(lái)更好的用戶(hù)體驗(yàn).
iOS開(kāi)發(fā)中各種圓角也隨處可見(jiàn),最簡(jiǎn)單給控件添加圓角的方式就是給視圖的layer設(shè)置corner屬性了:
self.blueView.layer.cornerRadius = 5.f;
self.blueView.layer.masksToBounds = YES;
這種方式會(huì)帶來(lái)兩個(gè)問(wèn)題:
- 當(dāng)圖片數(shù)量比較多的時(shí)候,這種添加圓角方式特別消耗性能,比如在UITableViewCell
添加過(guò)多圓角的話(huà),甚至?xí)?lái)視覺(jué)可見(jiàn)的卡頓. - 無(wú)法配置圓角數(shù)量(只能添加view的四個(gè)角全為圓角),無(wú)法配置某個(gè)圓角大小.
第一個(gè)問(wèn)題實(shí)際上是由于數(shù)量太多的情況下,系統(tǒng)會(huì)頻繁的調(diào)用GPU的離屏渲染(Offscreen Rendering)機(jī)制,導(dǎo)致內(nèi)存損耗嚴(yán)重.更多關(guān)于離屏渲染的詳解,可以看這里,本文不多贅述.
第二個(gè)問(wèn)題,我們可以使用UIBezierPath
來(lái)完美解決.以下是示例代碼:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.blueView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomLeft cornerRadii:CGSizeMake(20, 0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.blueView.bounds;
maskLayer.path = maskPath.CGPath;
self.blueView.layer.mask = maskLayer;
self.blueView.layer.cornerRadius = 5.f;
self.blueView.layer.masksToBounds = YES;
想要配置某個(gè)角為圓角的話(huà),只需要指定對(duì)應(yīng)的UIRectCorner
即可
也可以采用下面這種方法 : 采取預(yù)先生成圓角圖片割按，并緩存起來(lái)這個(gè)方法才是比較好的手段资溃。預(yù)處理圓角圖片可以在后臺(tái)處理藐吮，處理完畢后緩存起來(lái)，再在主線(xiàn)程顯示哭尝，這就避免了不必要的離屏渲染了驹吮。
self.layer.cornerRadius = 6;
self.layer.masksToBounds = YES; // 裁剪
self.layer.shouldRasterize = YES; // 緩存
self.layer.rasterizationScale = [UIScreen mainScreen].scale;
當(dāng)shouldRasterize設(shè)成true時(shí)，layer被渲染成一個(gè)bitmap贡定，并緩存起來(lái)赋访，等下次使用時(shí)不會(huì)再重新去渲染了。實(shí)現(xiàn)圓角本 身就是在做顏色混合（blending），如果每次頁(yè)面出來(lái)時(shí)都blending蚓耽，消耗太大渠牲，這時(shí)shouldRasterize = yes，下次就只是簡(jiǎn)單的從渲染引擎的cache里讀取那張bitmap步悠，節(jié)約系統(tǒng)資源签杈。
如果在滾動(dòng)tableView時(shí)，每次都執(zhí)行圓角設(shè)置鼎兽，肯定會(huì)阻塞UI答姥，設(shè)置這個(gè)將會(huì)使滑動(dòng)更加流暢
