ios中为视图添加圆角

深藏阁楼爱情的钟 2021-11-04 11:31 372阅读 0赞

1.使用

# layer设置指定圆角 或者设定一个或几个圆角 #

[![96][]][96 1]

[码修][96 1] 关注

2017.04.20 19:03\* 字数 107 阅读 656评论 0喜欢 0

由于项目中需要给按钮左下 和左上加圆角，我司可爱的ui君并不想给我切图。  
所以只有自己画了。由于很久没有用过这些知识，花了一些时间，  
故记入笔记。  
也可以用来画半圆。  
选择要画圆角的位置只需要改变枚举即可。  
有空能封装一下更好。

![152][]

WX20170420-190022@2x.png

UIBezierPath \*maskPath = \[UIBezierPath bezierPathWithRoundedRect:self.statusLabel.bounds

byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerTopLeft

cornerRadii:CGSizeMake(self.statusLabel.height/2, self.statusLabel.height/2)\];

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

maskLayer.frame = self.statusLabel.bounds;

maskLayer.path = maskPath.CGPath;

self.statusLabel.layer.mask = maskLayer;

UIView \*whiteView = \[\[UIView alloc\] initWithFrame:CGRectMake((bgView.width-125)/2, -10, 125, 10)\];

whiteView.backgroundColor = \[UIColor whiteColor\];

if (@available(iOS 11.0, \*)) \{

whiteView.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner;

whiteview.layer.maskstoBound = true;

whiteview.layer.coneradio = 5.0;

whiteview.layer.shouldRasterize = YES; //圆角缓存

whiteview.layer.rasterizationScale = \[UIScreen mainScreen\].scale;//提高流畅度

经测试 加上后两句之后流畅度有了提高。

\} else \{

UIBezierPath \*maskPath = \[UIBezierPath bezierPathWithRoundedRect:whiteView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(5, 5)\];

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

//设置大小

maskLayer.frame = whiteView.bounds;

//设置图形样子

maskLayer.path = maskPath.CGPath;

whiteView.layer.mask = maskLayer;

# [iOS设置圆角的方法及指定圆角的位置][iOS] #

*  在iOS开发中，我们经常会遇到设置圆角的问题, 以下是几种设置圆角的方法:

### 第一种方法: 通过设置layer的属性 ###

### 代码: ###

![复制代码][copycode.gif]

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

//只需要设置layer层的两个属性

//设置圆角

imageView.layer.cornerRadius =50

//将多余的部分切掉

imageView.layer.masksToBounds = YES;

imageView.layer.shouldRasterize = YES; //圆角缓存

imageView.layer.rasterizationScale = \[UIScreen mainScreen\].scale;//提高流畅度

经测试 加上后两句之后流畅度有了提高。

\[self.view addSubview:imageView\];

![复制代码][copycode.gif]

*  这个实现方法里maskToBounds会触发离屏渲染(offscreen rendering)，GPU在当前屏幕缓冲区外新开辟一个渲染缓冲区进行工作，也就是离屏渲染，这会给我们带来额外的性能损耗，如果这样的圆角操作达到一定数量，会触发缓冲区的频繁合并和上下文的的频繁切换，性能的代价会宏观地表现在用户体验上<掉帧>不建议使用.

### 第二种方法: 使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角 ###

### 效果图: ###

![第二种.jpg][.jpg]

### 代码: ###

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

*  UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale) 各参数含义:
 *  size —— 新创建的位图上下文的大小
 *  opaque —— 透明开关，如果图形完全不用透明，设置为YES以优化位图的存储。
 *  scale —— 缩放因子 iPhone 4是2.0，其他是1.0。虽然这里可以用\[UIScreen mainScreen\].scale来获取，但实际上设为0后，系统就会自动设置正确的比例

### 第三种方法: 使用Core Graphics框架画出一个圆角 ###

### 代码: ###

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

### 第四种方法: 使用CAShapeLayer和UIBezierPath设置圆角 ###

### 代码: ###

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

### 第四种方法延伸 指定需要成为圆角的角 ###

### 方法: ###

![复制代码][copycode.gif]

\+ (UIBezierPath \*)bezierPathWithRoundedRect:(CGRect)rect

byRoundingCorners:(UIRectCorner)corners

cornerRadii:(CGSize)cornerRadii

corners参数指定了要成为圆角的角, 枚举类型如下:

typedef NS\_OPTIONS(NSUInteger, UIRectCorner) \{

UIRectCornerTopLeft     = 1 << 0,

UIRectCornerTopRight    = 1 << 1,

UIRectCornerBottomLeft  = 1 << 2,

UIRectCornerBottomRight = 1 << 3,

UIRectCornerAllCorners  = ~0UL

\};

![复制代码][copycode.gif]

### 效果图: ###

![14986372606268.jpg][]

### 代码: ###

![复制代码][copycode.gif]

//设置视图位置和大小

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

\}\];

![复制代码][copycode.gif]

### 第五种方法 在storyboard或xib中设置 ###

![14986398280102.jpg][]

少而好学，如日出之阳； 壮而好学，如日中之光； 老而好学，如炳烛之明。

第一种方法:通过设置layer的属性

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

//只需要设置layer层的两个属性

//设置圆角

imageView.layer.cornerRadius = imageView.frame.size.width / 2;

//将多余的部分切掉

imageView.layer.masksToBounds = YES;

\[self.view addSubview:imageView\];

注：禁用。。影响性能。

第二种方法:使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

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

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

//开始对imageView进行画图

UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);

//使用贝塞尔曲线画出一个圆形图

\[\[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width\] addClip\];

\[imageView drawRect:imageView.bounds\];

imageView.image = UIGraphicsGetImageFromCurrentImageContext();

//结束画图

UIGraphicsEndImageContext();

\[self.view addSubview:imageView\];

第三种方法:使用CAShapeLayer和UIBezierPath设置圆角

首先需要导入<AVFoundation/AVFoundation.h>

\#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

\- (void)viewDidLoad \{

\[super viewDidLoad\];

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

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

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

\}  
\---------------------  
作者：weixin\_34381687  
来源：CSDN  
原文：https://blog.csdn.net/weixin\_34381687/article/details/87515690  
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/sundaysgarden/p/11128187.html

[96]: /images/20211104/e3202c02271c4048aa4da5a36c25a032.png
[96 1]: https://www.jianshu.com/u/c5dfcae50b1d
[152]: /images/20211104/ce4dadd1fa78461ab4f187b74cdfbe56.png
[iOS]: https://www.cnblogs.com/weiming4219/p/7680715.html
[copycode.gif]: /images/20211104/b2854b25815d494eb3ac422ae44f532a.png
[.jpg]: http://blog.cocoachina.com/uploads/attachments/595139/20170628/267cd0dd9efbd734e932702da7c1347f.jpg
[14986372606268.jpg]: http://blog.cocoachina.com/uploads/attachments/595139/20170628/351865f49589e750d202fc23979f144a.jpg
[14986398280102.jpg]: http://blog.cocoachina.com/uploads/attachments/595139/20170628/fdba85417246ba90bbc49681265ffc1b.jpg