iOS設置圓角的方法及指定圓角的位置

• 在iOS開發中，我們經常會遇到設置圓角的問題, 以下是幾種設置圓角的方法:

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

代碼:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"willwang"]];

//只需要設置layer層的兩個屬性
//設置圓角
imageView.layer.cornerRadius =50

//將多余的部分切掉
imageView.layer.masksToBounds = YES;

[self.view addSubview:imageView];

• 這個實現方法里maskToBounds會觸發離屏渲染(offscreen rendering)，GPU在當前屏幕緩沖區外新開辟一個渲染緩沖區進行工作，也就是離屏渲染，這會給我們帶來額外的性能損耗，如果這樣的圓角操作達到一定數量，會觸發緩沖區的頻繁合並和上下文的的頻繁切換，性能的代價會宏觀地表現在用戶體驗上<掉幀>不建議使用.

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

效果圖:

代碼:

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

 imageView.image = [UIImage imageNamed:@"willwang"];

    //開始對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];

• UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale) 各參數含義:
• size —— 新創建的位圖上下文的大小
• opaque —— 透明開關，如果圖形完全不用透明，設置為YES以優化位圖的存儲。
• scale —— 縮放因子 iPhone 4是2.0，其他是1.0。雖然這里可以用[UIScreen mainScreen].scale來獲取，但實際上設為0后，系統就會自動設置正確的比例

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

代碼:

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];

    imageView.image = [UIImage imageNamed:@"willwang"];

    //開始對imageView進行畫圖
    UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.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 *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 關閉上下文
    UIGraphicsEndImageContext();

    imageView.image = newImage;

    [self.view addSubview:imageView];

 

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

代碼:

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];

    //設置大小
    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
};

效果圖:

代碼:

//設置視圖位置和大小
    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(120, 300, 100, 50)];

    //設置背景顏色
    myView.backgroundColor = [UIColor redColor];

    //添加
    [self.view addSubview:myView];

    //繪制圓角 要設置的圓角 使用“|”來組合
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];

    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

    //設置大小
    maskLayer.frame = myView.bounds;

    //設置圖形樣子
    maskLayer.path = maskPath.CGPath;

    myView.layer.mask = maskLayer;

    UILabel *label = [[UILabel alloc]init];

    //添加文字
    label.text = @"willwang";

    //文字顏色
    label.textColor = [UIColor whiteColor];

    [myView addSubview: label];

    //自動布局
    [label mas_makeConstraints:^(MASConstraintMaker *make) {

        make.center.equalTo(myView);
    }];

第五種方法 在storyboard或xib中設置