• 設(shè)計(jì)圓角時(shí)候?yàn)槭裁葱枰呗?/li>

在我們做APP開(kāi)發(fā)的過(guò)程中，設(shè)計(jì)圓角應(yīng)該是最為基礎(chǔ)的功能之一。就是因?yàn)闀r(shí)常需要用到，所以就有必要考慮到，圓角的設(shè)計(jì)是否會(huì)對(duì)我們APP的流暢性有影響。我們一般設(shè)計(jì)圓角的通用方法：

someView.layer.corneRadius = 10;
someView.maskToBounds = Yes;

由于maskToBounds會(huì)觸發(fā)離屏渲染，所以就有可能導(dǎo)致APP的fps下降，從而使APP產(chǎn)生卡頓的現(xiàn)象，所以遵從某些簡(jiǎn)單的策略在我們的開(kāi)發(fā)過(guò)程中會(huì)更加有利于APP的流暢。

具體的策略

• 當(dāng)界面中只有view(不包括view的子類控件)需要設(shè)計(jì)圓角

UIView *someView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
someView.layer.cornerRadius = 10;

注意到：如果僅僅是view需要設(shè)置圓角，是不要設(shè)置maskToBounds的，并且someView.layer.cornerRadius并不會(huì)觸發(fā)離屏渲染(很多的文章提到了會(huì)觸發(fā)，其實(shí)這是對(duì)該cornerRadius屬性的錯(cuò)誤認(rèn)識(shí)，可能也誤導(dǎo)了許多新手開(kāi)發(fā)者)，所以可以安心的設(shè)置

• 當(dāng)界面中有其他的包含子控件的view，如label，imageView等，需要設(shè)置圓角，但是數(shù)量并不多。此時(shí)可以安心的使用如下的方法，這里雖然會(huì)觸發(fā)離屏渲染，但是由于數(shù)量比較少，所以對(duì)全局的影響一般不會(huì)很大。

someLabel.layer.cornerRadius = 10;
someLabel.maskToBounds = Yes;

• 但是當(dāng)界面中有非常多需要設(shè)置圓角，比如tableView中。當(dāng)界面中的tableView有超過(guò)25個(gè)圓角(使用上面的方法)，那么那么fps將會(huì)下降很多，特別是對(duì)某些控件還設(shè)置了陰影的效果，更加會(huì)加劇界面卡頓的現(xiàn)象。此時(shí)對(duì)于不同的控件將采用不同的方法進(jìn)行處理，如下

  1. 對(duì)于label類，可以通過(guò)CoreGraphics來(lái)畫(huà)出一個(gè)圓角的label
  2. 對(duì)于imageView類，通過(guò)CoreGraphics對(duì)繪畫(huà)出來(lái)的image進(jìn)行裁邊處理，從而形成一個(gè)圓角的imageView

對(duì)如label類，可以用如下方法進(jìn)行繪制，僅給出核心的OC代碼，項(xiàng)目示例代碼可以在github中找到CornerRadius

給UILabel繪畫(huà)圓角

- (UIImage *)dr_drawRectWithRoundedCornerRadius:(CGFloat)radius
                                borderWidth:(CGFloat)borderWidth
                            backgroundColor:(UIColor *)backgroundColor
                               borderCorlor:(UIColor *)borderColor {
    CGSize sizeToFit = CGSizeMake([DrCorner pixel:self.bounds.size.width], self.bounds.size.height);
    CGFloat halfBorderWidth = borderWidth / 2.0;

    UIGraphicsBeginImageContextWithOptions(sizeToFit, NO, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, borderWidth);
    CGContextSetStrokeColorWithColor(context, borderColor.CGColor);
    CGContextSetFillColorWithColor(context, backgroundColor.CGColor);

 CGFloat width = sizeToFit.width, height = sizeToFit.height;
    CGContextMoveToPoint(context, width - halfBorderWidth, radius + halfBorderWidth); // 準(zhǔn)備開(kāi)始移動(dòng)坐標(biāo)
    CGContextAddArcToPoint(context, width - halfBorderWidth, height - halfBorderWidth, width - radius - halfBorderWidth, height - halfBorderWidth, radius);
    CGContextAddArcToPoint(context, halfBorderWidth, height - halfBorderWidth, halfBorderWidth, height - radius - halfBorderWidth, radius); // 左下角角度
    CGContextAddArcToPoint(context, halfBorderWidth, halfBorderWidth, width - halfBorderWidth, halfBorderWidth, radius); // 左上角
    CGContextAddArcToPoint(context, width - halfBorderWidth, halfBorderWidth, width - halfBorderWidth, radius + halfBorderWidth, radius);
    CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

之后用繪畫(huà)出來(lái)的image生成imageView，并將其插入到view的最底層

- (void)dr_addCornerRadius:(CGFloat)radius
           borderWidth:(CGFloat)borderWidth
       backgroundColor:(UIColor *)backgroundColor
          borderCorlor:(UIColor *)borderColor {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[self dr_drawRectWithRoundedCornerRadius:radius borderWidth:borderWidth backgroundColor:backgroundColor borderCorlor:borderColor]];
    [self insertSubview:imageView atIndex:0];
}

** 之后在你需要圓角的地方就可以放心的調(diào)用此方法了 **

給UIImageVIew繪畫(huà)圓角-裁邊處理，如下

- (UIImage*)dr_imageAddCornerWithRadius:(CGFloat)radius andSize:(CGSize)size{
    CGRect rect = CGRectMake(0, 0, size.width, size.height);

    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)];
    CGContextAddPath(ctx,path.CGPath);
    CGContextClip(ctx);
    [self drawInRect:rect];
    CGContextDrawPath(ctx, kCGPathFillStroke);
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

示例代碼CornerRadius中還對(duì)這些核心方法進(jìn)行了簡(jiǎn)單的封裝，可以下載下來(lái)再仔細(xì)的看看。

聲明：如果你覺(jué)得該文章對(duì)有一點(diǎn)點(diǎn)幫助，請(qǐng)移步到iOS 高效添加圓角效果實(shí)戰(zhàn)講解中點(diǎn)贊，該文章的最初想法來(lái)自于該大大bestswifter的這篇博文。并且該大大bestswifter用swift實(shí)現(xiàn)了所有的核心代碼。本文使用的全部是OC。

參考大大們的文章
iOS 高效添加圓角效果實(shí)戰(zhàn)講解

接下來(lái)會(huì)介紹使用Core Animation的UI的調(diào)試方法，歡迎一起討論

喜歡請(qǐng)隨意

圖片發(fā)自簡(jiǎn)書(shū)App