在最新的版本迭代里许起，UI想給UICollectionViewCell切成圓角并且要有色邊框疗认，以那種卡片形式展現(xiàn)給用戶，iOS里有好幾種方法可以實(shí)現(xiàn)給view設(shè)計(jì)圓角并繪制邊框顏色，這篇文章里會(huì)給出我認(rèn)為性能最優(yōu)的一個(gè)方法，最終效果如下：
WechatIMG108.jpeg
方法一
最常見設(shè)計(jì)圓角管宵，繪制邊框的方法是利用CALayer的cornerRadius和borderWidth, borderColor來(lái)實(shí)現(xiàn)：
self.view.layer.maskToBounds = YES;
self.view.layer.cornerRadius = 4.f;
self.view.layer.borderWidth = 2.f;
self.view.layer.borderColor = [UIColor redColor].CGColor;
這個(gè)實(shí)現(xiàn)方法里maskToBounds會(huì)觸發(fā)離屏渲染(offscreen rendering)，會(huì)導(dǎo)致app的FPS下降攀甚，特別是給UICollectionViewCell設(shè)計(jì)圓角的時(shí)候箩朴，用戶滑動(dòng)瀏覽時(shí)，會(huì)覺得明顯的卡頓秋度，用戶體驗(yàn)非常不好炸庞，所以在給多個(gè)view設(shè)計(jì)圓角的時(shí)候不建議使用
方法二
使用四張圖片分別放在view的四角，或者拉伸一張四邊圓角的圖片實(shí)現(xiàn)圓角静陈，不建議燕雁，方法太傻X
方法三
這個(gè)方法，是我在使用并推薦的一個(gè)鲸拥。廢話不多，直接上代碼：
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);
CAShapeLayer *borderLayer = [CAShapeLayer layer];
borderLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);
borderLayer.lineWidth = 1.f;
borderLayer.strokeColor = lineColor.CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, cellWidth, cellHeight) cornerRadius:cornerRadius];
maskLayer.path = bezierPath.CGPath;
borderLayer.path = bezierPath.CGPath;
[cell.contentView.layer insertSublayer:borderLayer atIndex:0];
[cell.layer setMask:maskLayer];
- 代碼中創(chuàng)建了兩個(gè)
CAShapeLayer, 關(guān)于CAShapeLayer先講幾句僧免，CAShapeLayer屬于Core Animation框架刑赶，會(huì)通過(guò)GPU來(lái)渲染圖形，節(jié)省性能懂衩，動(dòng)畫渲染直接交給手機(jī)GPU撞叨，不消耗內(nèi)存。CAShapeLayer中shape是形狀的意思浊洞，需要形狀才能生效牵敷，而貝塞爾曲線恰恰可以為CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進(jìn)行渲染繪制出了shape - 先看代碼中創(chuàng)建的貝塞爾曲線法希，通過(guò)
UIBezierPath的bezierPathWithRoundedRect:cornerRadius:方法來(lái)繪制出一個(gè)帶圓角矩形的路徑枷餐，用來(lái)給CAShapeLayer繪制圖形 - 第一個(gè)layer叫做
maskLayer，是用來(lái)給cell實(shí)現(xiàn)遮罩效果苫亦，因?yàn)閘ayer使用的path是一個(gè)圓角矩形的貝塞爾曲線毛肋，那么這個(gè)layer形成的遮罩可以實(shí)現(xiàn)cell的圓角 - 第二個(gè)layer叫做
borderLayer，是用來(lái)繪制cell邊框顏色的屋剑，通過(guò)CAShapeLayer的lineWidth,strokeColor來(lái)繪制邊框润匙，注意fillColor一定要設(shè)置成clearColor，否則會(huì)擋住整個(gè)cell - 最后唉匾，將
borderLayer加載到cell的layer上孕讳，將maskLayer設(shè)置成cell layer的mask
用來(lái)實(shí)現(xiàn)UICollectionViewCell圓角并繪制邊框顏色的完整代碼如下：
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);
CAShapeLayer *borderLayer = [CAShapeLayer layer];
borderLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);
borderLayer.lineWidth = 1.f;
borderLayer.strokeColor = lineColor.CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, cellWidth, cellHeight) cornerRadius:cornerRadius];
maskLayer.path = bezierPath.CGPath;
borderLayer.path = bezierPath.CGPath;
[cell.contentView.layer insertSublayer:borderLayer atIndex:0];
[cell.layer setMask:maskLayer];
}
轉(zhuǎn)載請(qǐng)注明出處，原文地址：http://kobedai.me/p9rsts-6l/
