Swift 如何为拼接的两个UIView实现无缝连续整体边框

现有实现的核心问题 #

• 分视图单独配置边框会出现轮廓断点：balloonView的底部是带7pt圆角的，原有边框绘制到圆角终点就会停止，下方TriangleView未配置边框，视觉上外轮廓是断开的
• 强行给三角单独加边框会出现冗余线条：三角的顶边会被描上白线，刚好压在两个视图的拼接缝上，破坏整体连贯感
• 单纯将两个视图硬对齐拼接，会因为图层抗锯齿渲染出现1px左右的细缝，和3pt宽的白色边框视觉不协调

具体修改步骤 #

• 移除原有视图上的独立边框配置：删掉balloonView上的borderWidth、borderColor属性，同时把balloonView的橙色背景改为透明，避免和下层填充层叠色
• 简化自定义TriangleView的绘制逻辑：删掉原有的实心橙色填充绘制代码，把视图背景设为透明，整体填充统一由下层复合图层完成
• 生成单一连续的闭合贝塞尔路径：把balloonView的圆角矩形形状、TriangleView的三角形状合并为一个完整路径，不存在分段断点
• 基于统一路径创建CAShapeLayer：
  • 设置填充色为统一的橙色，作为两个视图的整体背景
  • 设置3pt宽度的白色描边，作为整个组合视图的外边框
  • 将该图层插入到父视图层级中，放在两个业务视图的最下方
• 适配动态布局变化：在视图布局更新的回调方法中重新计算路径，刷新边框图层的路径属性，避免约束调整、屏幕旋转时边框错位

关键修改代码 #

修改后的TriangleView实现 #

class TriangleView : UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = .clear
    }
}

调整后的balloonView配置 #

lazy var balloonView: UIView = {
    let v = UIView()
    v.translatesAutoresizingMaskIntoConstraints = false
    v.backgroundColor = .clear // 替换原有的橙色背景
    v.layer.cornerRadius = 7
    v.layer.masksToBounds = true
    v.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
    return v
}()

新增统一边框逻辑 #

private var borderLayer: CAShapeLayer!

func updateCombinedBorderPath() {
    // 将两个子视图的frame转换到父视图的坐标空间
    let balloonRect = view.convert(balloonView.bounds, from: balloonView)
    let triangleRect = view.convert(triangleView.bounds, from: triangleView)
    
    // 生成气球部分的圆角矩形路径
    let combinedPath = UIBezierPath(roundedRect: balloonRect, cornerRadius: 7)
    
    // 生成三角部分的路径
    let trianglePath = UIBezierPath()
    trianglePath.move(to: CGPoint(x: triangleRect.minX, y: triangleRect.minY))
    trianglePath.addLine(to: CGPoint(x: triangleRect.maxX, y: triangleRect.minY))
    trianglePath.addLine(to: CGPoint(x: triangleRect.midX, y: triangleRect.maxY))
    trianglePath.close()
    
    combinedPath.append(trianglePath)
    
    // 仅第一次调用时初始化边框图层
    if borderLayer == nil {
        borderLayer = CAShapeLayer()
        borderLayer.fillColor = UIColor.orange.cgColor
        borderLayer.strokeColor = UIColor.white.cgColor
        borderLayer.lineWidth = 3
        view.layer.insertSublayer(borderLayer, below: balloonView.layer)
    }
    // 刷新路径
    borderLayer.path = combinedPath.cgPath
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 布局变化时重新计算边框路径
    updateCombinedBorderPath()
}

效果说明 #

• 由于描边基于单条连续闭合路径绘制，不存在分段图层的衔接缝隙，3pt的白色边框会从气球的左上角圆角开始，沿着气球四边、三角的两条斜边连续走完整个外轮廓，和目标效果完全匹配
• 两个形状的相邻边属于复合路径的内部边界，描边时不会在拼接位置生成多余的横向白线，刚好解决了单独给三角加边框会出现冗余线条的问题
• 原有标签、文本等内容的位置不需要调整，因为上层balloonView的尺寸和位置完全没有变化，只是将原本的填充和边框逻辑移到了下层的统一图层

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