- 在iOS開(kāi)發(fā)中躯嫉,我們經(jīng)常會(huì)遇到設(shè)置圓角的問(wèn)題, 以下是幾種設(shè)置圓角的方法:
第一種方法: 通過(guò)設(shè)置layer的屬性
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"willwang"]]; //只需要設(shè)置layer層的兩個(gè)屬性 //設(shè)置圓角
imageView.layer.cornerRadius =50
//將多余的部分切掉
imageView.layer.masksToBounds = YES;
[self.view addSubview:imageView];</pre>
- 這個(gè)實(shí)現(xiàn)方法里maskToBounds會(huì)觸發(fā)離屏渲染(offscreen rendering)吸占,GPU在當(dāng)前屏幕緩沖區(qū)外新開(kāi)辟一個(gè)渲染緩沖區(qū)進(jìn)行工作凄硼,也就是離屏渲染坯苹,這會(huì)給我們帶來(lái)額外的性能損耗,如果這樣的圓角操作達(dá)到一定數(shù)量挤牛,會(huì)觸發(fā)緩沖區(qū)的頻繁合并和上下文的的頻繁切換臭家,性能的代價(jià)會(huì)宏觀地表現(xiàn)在用戶(hù)體驗(yàn)上<掉幀>不建議使用.
第二種方法: 使用貝塞爾曲線UIBezierPath和Core Graphics框架畫(huà)出一個(gè)圓角
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
imageView.image = [UIImage imageNamed:@"willwang"];
//開(kāi)始對(duì)imageView進(jìn)行畫(huà)圖
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0);
//使用貝塞爾曲線畫(huà)出一個(gè)圓形圖
[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
[imageView drawRect:imageView.bounds];
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
//結(jié)束畫(huà)圖
UIGraphicsEndImageContext();
[self.view addSubview:imageView];
UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale) 各參數(shù)含義:
size —— 新創(chuàng)建的位圖上下文的大小
opaque —— 透明開(kāi)關(guān),如果圖形完全不用透明房午,設(shè)置為YES以?xún)?yōu)化位圖的存儲(chǔ)矿辽。
scale —— 縮放因子 iPhone 4是2.0,其他是1.0郭厌。雖然這里可以用[UIScreen mainScreen].scale來(lái)獲取袋倔,但實(shí)際上設(shè)為0后,系統(tǒng)就會(huì)自動(dòng)設(shè)置正確的比例
第三種方法: 使用Core Graphics框架畫(huà)出一個(gè)圓角
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
imageView.image = [UIImage imageNamed:@"willwang"];
//開(kāi)始對(duì)imageView進(jìn)行畫(huà)圖
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
// 獲得圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 設(shè)置一個(gè)范圍
CGRect rect = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height);
// 根據(jù)一個(gè)rect創(chuàng)建一個(gè)橢圓
CGContextAddEllipseInRect(ctx, rect);
// 裁剪
CGContextClip(ctx);
// 將原照片畫(huà)到圖形上下文
[imageView.image drawInRect:rect];
// 從上下文上獲取剪裁后的照片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉上下文
UIGraphicsEndImageContext();
imageView.image = newImage;
[self.view addSubview:imageView];
第四種方法 使用CAShapeLayer和UIBezierPath設(shè)置圓角
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
imageView.image = [UIImage imageNamed:@"willwang"];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
//設(shè)置大小
maskLayer.frame = imageView.bounds;
//設(shè)置圖形樣子
maskLayer.path = maskPath.CGPath;
imageView.layer.mask = maskLayer;
[self.view addSubview:imageView];
第四種方法延伸 指定需要成為圓角的角方法:
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii
corners參數(shù)指定了要成為圓角的角, 枚舉類(lèi)型如下:
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
};
//設(shè)置視圖位置和大小
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(120, 300, 100, 50)];
//設(shè)置背景顏色
myView.backgroundColor = [UIColor redColor];
//添加
[self.view addSubview:myView];
//繪制圓角 要設(shè)置的圓角 使用“|”來(lái)組合
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
//設(shè)置大小
maskLayer.frame = myView.bounds;
//設(shè)置圖形樣子
maskLayer.path = maskPath.CGPath;
myView.layer.mask = maskLayer;
UILabel *label = [[UILabel alloc]init];
//添加文字
label.text = @"willwang";
//文字顏色
label.textColor = [UIColor whiteColor];
[myView addSubview: label];
//自動(dòng)布局
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(myView);
}];