- 設(shè)計(jì)圓角時(shí)候?yàn)槭裁葱枰呗?/li>
在我們做APP開發(fā)的過程中，設(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)單的策略在我們的開發(fā)過程中會(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)了許多新手開發(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有超過25個(gè)圓角(使用上面的方法)，那么那么fps將會(huì)下降很多，特別是對(duì)某些控件還設(shè)置了陰影的效果达椰，更加會(huì)加劇界面卡頓的現(xiàn)象翰蠢。此時(shí)對(duì)于不同的控件將采用不同的方法進(jìn)行處理，如下
- 對(duì)于label類啰劲，可以通過CoreGraphics來畫出一個(gè)圓角的label
- 對(duì)于imageView類梁沧，通過CoreGraphics對(duì)繪畫出來的image進(jìn)行裁邊處理，從而形成一個(gè)圓角的imageView
對(duì)如label類蝇裤，可以用如下方法進(jìn)行繪制廷支，僅給出核心的OC代碼，項(xiàng)目示例代碼可以在github中找到CornerRadius
給UILabel繪畫圓角
- (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)備開始移動(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;
}
之后用繪畫出來的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繪畫圓角-裁邊處理恋拍，如下
- (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)單的封裝，可以下載下來再仔細(xì)的看看藕甩。
聲明：如果你覺得該文章對(duì)有一點(diǎn)點(diǎn)幫助施敢，請(qǐng)移步到iOS 高效添加圓角效果實(shí)戰(zhàn)講解中點(diǎn)贊，該文章的最初想法來自于該大大bestswifter的這篇博文辛萍。并且該大大bestswifter用swift實(shí)現(xiàn)了所有的核心代碼悯姊。本文使用的全部是OC。
參考大大們的文章
iOS 高效添加圓角效果實(shí)戰(zhàn)講解
接下來會(huì)介紹使用Core Animation的UI的調(diào)試方法贩毕，歡迎一起討論
喜歡請(qǐng)隨意
