似乎沒有那家公司比Apple更愛圓角了,事實(shí)上,圓角也會讓圖形/產(chǎn)品看起來更加無侵略性,能夠帶來更好的用戶體驗(yàn).
iOS開發(fā)中各種圓角也隨處可見,最簡單給控件添加圓角的方式就是給視圖的layer設(shè)置corner屬性了:
self.blueView.layer.cornerRadius = 5.f;
self.blueView.layer.masksToBounds = YES;
這種方式會帶來兩個問題:
- 當(dāng)圖片數(shù)量比較多的時候,這種添加圓角方式特別消耗性能,比如在
UITableViewCell
添加過多圓角的話,甚至?xí)硪曈X可見的卡頓.
- 當(dāng)圖片數(shù)量比較多的時候,這種添加圓角方式特別消耗性能,比如在
- 無法配置圓角數(shù)量(只能添加view的四個角全為圓角),無法配置某個圓角大小.
第一個問題實(shí)際上是由于數(shù)量太多的情況下,系統(tǒng)會頻繁的調(diào)用GPU的離屏渲染(Offscreen Rendering)機(jī)制,導(dǎo)致內(nèi)存損耗嚴(yán)重.更多關(guān)于離屏渲染的詳解,可以看這里,本文不多贅述.
第二個問題,我們可以使用UIBezierPath
來完美解決.以下是示例代碼:
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;
想要配置某個角為圓角的話,只需要指定對應(yīng)的UIRectCorner
即可
以下是顯示效果:
你可以在這些下載這個demo