为多个不规则形状UIView（键盘按键）添加独立边框的最优方案

嘿，这个需求我之前做自定义键盘的时候刚好碰过，给你分享下最靠谱的实现思路，完全不用搞太复杂的操作～

首先明确：你说的没错，确实要用到CALayer，但不用搞头疼的遮罩嵌套，核心思路是给每个按键绑定一个独立的形状边框层，这是最灵活也最精准的方案。

核心实现方式：CAShapeLayer 绑定按键路径 #

每个按键都是独立的UIView，不管它的形状是用drawRect画的、用mask裁的，还是用贝塞尔路径定义的，我们只需要拿到它的形状路径，然后用CAShapeLayer来画边框就行：

1. 如果按键是自定义绘制的（比如重写了drawRect） #

假设你的按键View里已经定义了绘制形状的UIBezierPath（可以把它存成View的属性方便复用），直接给每个按键加边框层：

// 示例：自定义按键View
class KeyView: UIView {
    // 存储按键的形状路径
    var shapePath: UIBezierPath!
    
    override func draw(_ rect: CGRect) {
        // 这里是你绘制不规则按键的代码，示例一个带圆角的异形按键
        shapePath = UIBezierPath()
        shapePath.move(to: CGPoint(x: 0, y: 0))
        shapePath.addLine(to: CGPoint(x: bounds.width, y: 0))
        shapePath.addArc(withCenter: CGPoint(x: bounds.width - 20, y: 20), radius: 20, startAngle: .pi * 3/2, endAngle: 0, clockwise: true)
        shapePath.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
        shapePath.addLine(to: CGPoint(x: 0, y: bounds.height))
        shapePath.close()
        
        // 填充按键背景（如果需要）
        UIColor.white.setFill()
        shapePath.fill()
    }
}

// 给按键加边框的代码
func addBorder(to keyView: KeyView) {
    let borderLayer = CAShapeLayer()
    borderLayer.path = keyView.shapePath.cgPath
    borderLayer.strokeColor = UIColor.red.cgColor // 你的边框颜色
    borderLayer.fillColor = UIColor.clear.cgColor // 边框层不需要填充
    borderLayer.lineWidth = 2.0 // 边框宽度
    // 如果需要圆角，只要你的shapePath里包含圆角路径，这里自动会带圆角
    
    keyView.layer.addSublayer(borderLayer)
}

2. 如果按键是用mask实现的（比如用图片或图层遮罩） #

如果你的按键是通过layer.mask来实现不规则形状的，直接拿mask的路径来做边框就行，但要注意：不要把边框层加到按键的layer上，不然会被mask裁剪掉一半边框。正确的做法是给按键套个容器View，把边框层加到容器上：

func addBorderToMaskedKey(_ keyView: UIView) {
    guard let maskPath = keyView.layer.mask?.path else { return }
    
    // 创建容器View，和按键同大小
    let container = UIView(frame: keyView.frame)
    keyView.superview?.addSubview(container)
    keyView.removeFromSuperview()
    container.addSubview(keyView)
    keyView.frame = container.bounds
    
    // 添加边框层
    let borderLayer = CAShapeLayer()
    borderLayer.path = maskPath
    borderLayer.strokeColor = UIColor.red.cgColor
    borderLayer.fillColor = UIColor.clear.cgColor
    borderLayer.lineWidth = 2.0
    
    container.layer.addSublayer(borderLayer)
}

为什么这是最优方案？ #

• 精准贴合：完全跟着按键的形状走，不管是多不规则的形状，只要路径对，边框就不会歪
• 灵活可控：随时可以修改边框颜色、宽度、甚至动态调整形状（比如按键按下时切换边框颜色）
• 性能友好：CAShapeLayer是原生图层，比用图片遮罩或重复绘制性能好得多
• 天然支持圆角：只要你的形状路径里包含圆角，边框自动会带圆角，不需要额外处理

避坑提醒 #

• 如果边框看起来被裁掉了一半，那是因为CAShapeLayer的stroke默认是在路径的中间，这时候可以把边框层的lineWidth调整，或者确保路径是在按键的bounds内偏移了边框宽度的一半（比如路径向内缩1pt，这样stroke的一半在路径内，一半在外，不会被mask裁掉）
• 尽量在layoutSubviews里添加或更新边框层，因为按键的frame可能会变化，确保边框能跟着自适应

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