快捷導(dǎo)航

iOS設(shè)置圓角的4種方法實(shí)例（附性能評(píng)測(cè)）

更新時(shí)間：2019年01月04日 09:42:54 作者：溪石iOS

這篇文章主要給大家介紹了關(guān)于iOS設(shè)置圓角的4種方法，并給大家附上了性能評(píng)測(cè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

四種設(shè)置圓角的方法

從網(wǎng)上收集了各種設(shè)置圓角的方法，總結(jié)起來(lái)有以下四種：

1、設(shè)置 layer 的 cornerRadius

view.layer.masksToBounds = YES;
view.layer.cornerRadius = imgSize.width / 2;

2、用貝塞爾曲線作 mask 圓角

CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:view.bounds];
layer.path = aPath.CGPath;
view.layer.mask = layer;

3、重新繪制圓角

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    UIImage *image = view.image;
    image = [image drawCircleImage];
    dispatch_async(dispatch_get_main_queue(), ^{
     view.image = image;
    });
   });
////////////////////////
@implementation UIImage (RoundedCorner)

- (UIImage *)drawCircleImage {
 CGFloat side = MIN(self.size.width, self.size.height);
 UIGraphicsBeginImageContextWithOptions(CGSizeMake(side, side), false, [UIScreen mainScreen].scale);
 CGContextAddPath(UIGraphicsGetCurrentContext(),
      [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, side, side)].CGPath);
 CGContextClip(UIGraphicsGetCurrentContext());
 CGFloat marginX = -(self.size.width - side) / 2.f;
 CGFloat marginY = -(self.size.height - side) / 2.f;
 [self drawInRect:CGRectMake(marginX, marginY, self.size.width, self.size.height)];
 CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
 UIImage *output = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 return output;
}

@end

4、混合圖層，用一張鏤空的透明圖片作遮罩

cover@2x.png

UIView *parent = [view superview];
UIImageView *cover = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, imgSize.width, imgSize.height)];
cover.image = [UIImage imageNamed:@"cover"];
[parent addSubview:cover];
cover.center = view.center;

四種方法性能測(cè)試

網(wǎng)上流傳兩個(gè)結(jié)論：

第一種方法會(huì)引發(fā)離屏渲染，所以是最慢的；
據(jù)說(shuō)第四種是效率最高的。

事實(shí)情況如何呢？

為了驗(yàn)證網(wǎng)上的結(jié)論，需要找一種性能比較的方法，這里用 Instrument 的測(cè)試 FPS （幀數(shù)）作為性能直觀的比較值，測(cè)試過(guò)程如下：

搭建collectionView 工程，連續(xù)刷新顯示 1萬(wàn)個(gè)cell，每個(gè)cell使用相同圖片，排除不同照片帶來(lái)的差異；
在真機(jī)下運(yùn)行分別運(yùn)行四種方法，用 Instrument 記錄，并計(jì)算平均FPS；
為保證平均值準(zhǔn)確，去掉頭尾幀數(shù)率過(guò)低的時(shí)間段。

1. 設(shè)置 layer 的 cornerRadius

2. 用貝塞爾曲線作 mask 圓角

3. 重新繪制圓角

4. 混合圖層，用一張鏤空的透明圖片作遮罩

結(jié)果排名如下

3 > 1 > 2 > 4

一點(diǎn)點(diǎn)優(yōu)化

第四種方式不但墊底，而且出奇的慢，說(shuō)明我們的實(shí)現(xiàn)有明顯的問(wèn)題，觀察代碼，發(fā)現(xiàn)原來(lái)的代碼沒有考慮 cell 復(fù)用，cove 視圖被反復(fù)添加到cell，哪有不慢的道理!!! 于是作以下優(yōu)化：

// 4. 混合圖層，用一張鏤空的透明圖片作遮罩 (優(yōu)化版)
UIView *parent = [view superview];
if (![parent viewWithTag:13]) {
 UIImageView *cover = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, imgSize.width, imgSize.height)];
 cover.image = [UIImage imageNamed:@"cover"];
 cover.tag = 13;
 [parent addSubview:cover];
 cover.center = view.center;
}

這樣避免了View的重復(fù)添加，F(xiàn)PS 有了明顯的回升：

4.（優(yōu)化版）