iOS圆角view的Swift实现（利用Core Graphics绘制）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

因为app的列表用用到了圆形图片的头像，所以去探究并思考了一下这个问题。首先这个问题有两个方向的解决方案：

把图片弄成圆形的。
把ImageView弄成圆形的。

这两个解决方案如果只在前端解决的话，我比较推荐第二种方案类型的。因为在列表中，修改的ImageView是可以参与Cell的重用的。但是第一种方案也有特殊的，因为图片存储如果用的阿里云、七牛等的成熟的图片存储，传个参数就可以返回圆角的图片，非常方便。

第二种方案的解决方式也有很多种，这篇简书文章就介绍的很棒。其中第三种我不是很支持这么做的，因为这种是需要本地对每张图片进行处理，虽然比前两种带来的离屏渲染稍微好点，但是资源消耗也很大。文章中的第四种方法很好，但是实现方式我不是很喜欢，看她的实现方式是弄了一个图片覆盖上了，不具备通用性。下面我提供一个第四种方式的个人比较喜欢的实践。

这个实践的主要原理是自定义一个透明的view，这个view利用Core Graphic画一个矩形和圆角矩形（或者圆形）的path，然后设置两套path之间的填充色为环境色，就可以了。具体代码如下：

import UIKitclass MaskCornerView: UIView { var cornerRadius: CGFloat = 0.0 var superBackgroundColor = UIColor.white // Only override draw() if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func draw(_ rect: CGRect) { // Drawing code let shortestEdge = min(self.bounds.width, self.bounds.height)//边长稍短的边 let radius = max(min((shortestEdge / 2.0), cornerRadius), (shortestEdge / 2.0))//默认半径为稍短边的一半，防止负数或者过大的cornerRadius设置 let context = UIGraphicsGetCurrentContext() //以坐上角为原点，顺时针画矩形的path context?.move(to: CGPoint(x: self.bounds.minX, y: self.bounds.minY)) context?.addLine(to: CGPoint(x: self.bounds.maxX, y: self.bounds.minY)) context?.addLine(to: CGPoint(x: self.bounds.maxX, y: self.bounds.maxY)) context?.addLine(to: CGPoint(x: self.bounds.minX, y: self.bounds.maxY)) context?.addLine(to: CGPoint(x: self.bounds.minX, y: self.bounds.minY)) context?.closePath() //以左上角往右偏移一个半径长度的点为原点，顺时针画圆角矩形 context?.move(to: CGPoint(x: radius, y: self.bounds.minY)) context?.addLine(to: CGPoint(x: (self.bounds.maxX - radius), y: self.bounds.minY)) context?.addArc(tangent1End: CGPoint(x: self.bounds.maxX, y: self.bounds.minY), tangent2End: CGPoint(x: self.bounds.maxX, y: self.bounds.minY + radius), radius: radius) context?.addLine(to: CGPoint(x: self.bounds.maxX, y: (self.bounds.maxY - radius))) context?.addArc(tangent1End: CGPoint(x: self.bounds.maxX, y: self.bounds.maxY), tangent2End: CGPoint(x: self.bounds.maxX - radius, y: self.bounds.maxY), radius: radius) context?.addLine(to: CGPoint(x: radius, y: self.bounds.maxY)) context?.addArc(tangent1End: CGPoint(x: self.bounds.minX, y: self.bounds.maxY), tangent2End: CGPoint(x: self.bounds.minX, y: self.bounds.maxY - radius), radius: radius) context?.addLine(to: CGPoint(x: self.bounds.minX, y: radius)) context?.addArc(tangent1End: CGPoint(x: self.bounds.minX, y: self.bounds.minY), tangent2End: CGPoint(x: radius, y: self.bounds.minY), radius: radius) context?.closePath() context?.setFillColor(superBackgroundColor.cgColor)//设置填充色 context?.fillPath(using: .evenOdd)//设置使用奇偶填充的方式 } override init(frame: CGRect) { super.init(frame: frame) self.backgroundColor = UIColor.clear } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) self.backgroundColor = UIColor.clear }}

代码的主要注释在代码中已经写了。下面主要放一张图展示一下addLine和addArc地方的代码吧。

开始点移动到P1，画直线到P2，以P2-P3-P4的圆角举例，func addArc(tangent1End: CGPoint, tangent2End: CGPoint, radius: CGFloat)的两个参数tangent1End为P3，tangent2End为P4就可以画出这个圆角了（几指明切线的点）。

上面这个MaskCornerView只需要放到你需要制造圆角的view上，并与之等大小就可以了可以配置参数（默认圆形，cornerRadius比较小的时候就是圆角矩形），并且支持IB布局该MaskCornerView。这样在重用的cell里面只是相当于添加了一个view，对性能几乎没有啥影响，所以流畅度很高。不信你写个demo用Instruments看一下就知道了。

下面再附上我当初是用的裁剪图片的方式的代码（添加UIImage的Category就可以了）：

- (UIImage *)compressToSize:(CGSize)viewsize { CGFloat imgHWScale = self.size.height / self.size.width; CGFloat viewHWScale = viewsize.height/viewsize.width; CGRect rect = CGRectZero; if (imgHWScale>viewHWScale) { rect.size.height = viewsize.width*imgHWScale; rect.size.width = viewsize.width; rect.origin.x = 0.0f; rect.origin.y = (viewsize.height - rect.size.height)*0.5f; } else { CGFloat imgWHScale = self.size.width/self.size.height; rect.size.width = viewsize.height*imgWHScale; rect.size.height = viewsize.height; rect.origin.y = 0.0f; rect.origin.x = (viewsize.width - rect.size.width)*0.5f; } UIGraphicsBeginImageContext(viewsize); [self drawInRect:rect]; UIImage *newimg = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newimg; }- (UIImage *)circleImage { CGFloat radius = MIN(self.size.width, self.size.height); CGSize size = CGSizeZero; UIImage *squareImage; if (self.size.width == self.size.height) { size = CGSizeMake(self.size.width, self.size.width); squareImage = self; } else { size = CGSizeMake(radius, radius); squareImage = [self compressToSize:CGSizeMake(radius, radius)]; } //1.开启图片图形上下文:注意设置透明度为非透明 UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); //2.开启图形上下文 CGContextRef ref = UIGraphicsGetCurrentContext(); //3.绘制圆形区域(此处根据最小边来设置) CGFloat x = (self.size.width < self.size.height) ? 0 : ABS(self.size.width - self.size.height) / 2; CGFloat y = (self.size.width < self.size.height) ? ABS(self.size.width - self.size.height) / 2 : 0; CGRect rect = CGRectMake(x, y, radius, radius); CGContextAddEllipseInRect(ref, rect); //4.裁剪绘图区域 CGContextClip(ref); //5.绘制图片 [squareImage drawInRect:rect]; //6.获取图片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); //7.关闭图形上下文 UIGraphicsEndImageContext(); return image; }