如何为带UIImage的UIButton添加圆形边框或外层圆形UIView？

嗨，这个问题我之前做社交类APP点赞按钮时也碰到过！直接给imageView.layer加边框确实会跟着矩形视图走，完全破坏心形的美感。这里有几个简单又实用的解决方案，你可以按需选择：

方法一：给图片本身添加心形轮廓边框 #

最直接的方式是修改UIImage本身，给它加上黑色轮廓，这样不管放在哪里，边框都是跟着心形走的。你可以写一个UIImage的扩展来实现：

extension UIImage {
    func imageWithBorder(width: CGFloat, color: UIColor) -> UIImage? {
        let borderRect = CGRect(x: 0, y: 0, width: size.width + width*2, height: size.height + width*2)
        
        UIGraphicsBeginImageContextWithOptions(borderRect.size, false, scale)
        defer { UIGraphicsEndImageContext() }
        
        // 先绘制边框（用原图的alpha通道作为蒙版）
        color.setFill()
        self.draw(in: borderRect)
        
        // 再绘制原图，覆盖在边框上，只露出边缘的边框部分
        self.draw(in: CGRect(x: width, y: width, width: size.width, height: size.height))
        
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

使用的时候直接调用：

if let originalHeartImage = UIImage(named: "heart") {
    let borderedHeartImage = originalHeartImage.imageWithBorder(width: 2, color: .black)
    yourButton.setImage(borderedHeartImage, for: .normal)
}

这个方法的好处是不需要处理视图层级，图片本身就带边框，适配各种场景。

方法二：用蒙版让边框跟随心形形状 #

如果你不想修改原图，可以通过给imageView.layer设置蒙版，让边框只显示在心形区域：

// 先给imageView加边框
yourButton.imageView?.layer.borderWidth = 2
yourButton.imageView?.layer.borderColor = UIColor.black.cgColor

// 用原图的alpha通道作为蒙版，让边框只显示心形部分
if let maskImage = yourButton.imageView?.image {
    let maskLayer = CALayer()
    maskLayer.contents = maskImage.cgImage
    maskLayer.frame = yourButton.imageView?.bounds ?? .zero
    yourButton.imageView?.layer.mask = maskLayer
}

注意要确保imageView的大小和图片匹配，不然蒙版可能会错位。

方法三：用圆形UIView包裹心形图片 #

如果想要用深色圆形包裹心形，直接给button的layer设置圆角就行（前提是button是正方形）：

// 先确保button是正方形，比如设置宽高相等
yourButton.frame = CGRect(x: 50, y: 50, width: 44, height: 44)
// 设置圆角为宽高的一半，变成圆形
yourButton.layer.cornerRadius = yourButton.bounds.width / 2
yourButton.layer.backgroundColor = UIColor.darkGray.cgColor
yourButton.clipsToBounds = true
// 调整imageView的内边距，让心形和圆形边框之间有间隙
yourButton.imageEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)

如果button不是正方形，就把cornerRadius设为min(yourButton.bounds.width, yourButton.bounds.height)/2，这样会得到一个椭圆形的包裹，也能满足需求。

这几种方法我都亲测过，根据你的需求选就行～

内容的提问来源于stack exchange，提问作者bitops