1. 程式人生 > >筆記-iOS設定圓角方法以及指定位置設圓角

筆記-iOS設定圓角方法以及指定位置設圓角

第一種方法:通過設定layer的屬性

程式碼:

UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"TestImage"]];
// 只需設定layer層的兩個屬性
// 設定圓角
imageView.layer.cornerRadius = 50;
// 將多餘的部分切掉
imageView.layer.masksToBounds = YES;
[self.view addSubview:imageView];
複製程式碼

這個方法裡maskToBounds會觸發離屏渲染,GPU在當前螢幕緩衝區外新開闢了一個渲染緩衝區進行工作,也就是離屏渲染,這會給我們帶來額外的效能損耗,如果這樣的圓角操作達到一定數量,會觸發緩衝區的頻繁合併和上下文的頻繁切換,效能的代價會巨集觀的表現在使用者體驗上<掉幀>,不建議使用

第二種方法:使用貝塞爾曲線UIBezierPath和Core Graphics框架畫出一個圓角

程式碼:

 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
 imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
 // 開始對imageView進行畫圖
 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0);
 // 使用貝塞爾曲線畫出一個圓形圖
 [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
 [imageView drawRect:imageView.bounds];
 imageView.image = UIGraphicsGetImageFromCurrentImageContext();
 // 結束畫圖
 UIGraphicsEndImageContext();
 [self.view addSubview:imageView];
複製程式碼
  • UIGraphicsBeginImageContextWithOption(CGSize size, BOOL opaque, CGFloat scale)各引數的含義:
  • size ---新建立的文圖上下文大小
  • opaque --- 透明開關,如果圖形完全不用透明,設定為YES以優化點陣圖的儲存。
  • scale --- 縮放因子。雖然這裡可以用[UIScreen mainScreen].scale來獲取,但實際上設為0後,系統會自動設定正確的比例

第三種方法: 使用Core Graphics框架畫出一個圓角

程式碼:

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
imageView.image = [UIImage imageNamed:@"TestImage.jpg"
]; // 開始對imageView進行畫圖 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0); // 獲取圖形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 設定一個範圍 CGRect rect = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height); // 根據一個rect建立一個橢圓 CGContextAddEllipseInRect(ctx, rect); // 裁剪 CGContextClip(ctx); // 講原照片畫到圖形上下文 [imageView.image drawInRect:rect]; // 從上下文上獲取裁剪後的照片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // 關閉上下文 UIGraphicsEndImageContext(); imageView.image = image; [self.view addSubview:imageView]; 複製程式碼

第四種方法: 使用CAShapeLayer和UIBezierPath設定圓角

程式碼:

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners
cornerRadii:imageView.bounds.size];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
// 設定大小
maskLayer.frame = imageView.bounds;
// 設定圖形樣子
maskLayer.path = maskPath.CGPath;
imageView.layer.mask = maskLayer;
[self.view addSubview:imageView];
複製程式碼

指定需要的角成為圓角(第四種方法的延伸)

方法:

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect
                          byRoundingCorners:(UIRectCorner)corners
                                cornerRadii:(CGSize)cornerRadii;
                                
corners引數指定了要成為圓角的角, 列舉型別如下:
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 <&lt; 0,
    UIRectCornerTopRight    = 1 <&lt; 1,
    UIRectCornerBottomLeft  = 1 <&lt; 2,
    UIRectCornerBottomRight = 1 <&lt; 3,
    UIRectCornerAllCorners  = ~0UL
};

複製程式碼

實現程式碼:

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 200, 200)];
imageView.image = [UIImage imageNamed:@"TestImage.jpg"];

// 繪製圓角 需設定的圓角 使用"|"來組合
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerTopLeft |
UIRectCornerBottomRight cornerRadii:CGSizeMake(30, 30)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];

// 設定大小
maskLayer.frame = imageView.bounds;

// 設定圖形樣子
maskLayer.path = maskPath.CGPath;
imageView.layer.mask = maskLayer;
[self.view addSubview:imageView];
複製程式碼

效果圖:

據說,第四種方法最好,對記憶體的消耗最少,而且渲染快速。