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

標籤：屬性   圓角   phi   技術   att   自動布局   top   tag   開發   

• 在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中設定

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