在多个 UIView 周围创建边框答案

【问题标题】：Create border around multiple UIViews在多个 UIView 周围创建边框
【发布时间】：2018-07-18 02:11:23
【问题描述】：

我有一堆形状不规则的键盘，我想在它们周围放置单独的边框。每个键都是一个单独的 UIView，它们都包含在包装键盘视图中。它们看起来像这样：

理想情况下，边框应该看起来像左下角的红色边框（在预览中模拟），并且在必要时具有圆角，但我会考虑让正确的形状成为一个好的开始。

最好的方法是什么？形状和面具？复杂的路径？无论哪种方式，我似乎都需要 CALayers，但我对这些有点陌生。

非常感谢任何建议。非常感谢！

杰克

【问题讨论】：

似乎您可能能够简单地使用视图层次结构和每个视图的layer.border。我说“可能”是因为它取决于三件事：（1）使用视图层次结构，您可以将每个视图的backgroundColor 设置为不透明的东西，隐藏它下方的键或视图边框吗？ (2) 还有视图层次结构......你如何检测水龙头？但最大的一个与layer.cornerRadius 有关。 (3) 只有在 iOS 11 中，视图才能有两个圆角。你可以在早期的 iOS 版本中做到这一点，但不是那么简单：useyourloaf.com/blog/masked-and-animated-corners
感谢您的回复！回答您的问题：1) 我对视图层次结构的经验并不丰富，但我确实为键盘中的每个黑键实现了 bringSubview(toFront) 方法。每个键盘都有一个名为keys 的数组变量，其中包含键盘中的每个键。所有键盘都在一个名为keyboards 的数组中。所以我可以设置任何键盘中第一个键的背景，例如，通过指定keyboards[n].keys[0].backgroundColor = UIColor.green。 2）我为每个单独的键设置了一个长按点击手势识别器，首先是白键，然后是黑键。
3) 如果我只是在视图周围实现边框，我可以为 iOS 11 做圆角。我可能也可以为早期的 iOS 版本弄清楚。我很好奇是否有一种很好的方法可以使用路径和弧线或类似的东西来模拟圆角。因此，如果我要使用视图层次结构，那将如何工作？我需要一个或多个额外的视图，然后我会用这些键覆盖吗？还是相反（或两者都不是）？

标签： swift uiview border calayer

【解决方案1】：

我想通了！我最终使用CAShapeLayers 和UIBezierPaths 在键盘周围画了一个边框；我用圆弧模拟圆角：

func createBezier(key1Num: Int, key2Num: Int, key3Num: Int, key4Num: Int) {
    borderPath = UIBezierPath()

    let key1 = self.keys[key1Num].frame
    let key2 = self.keys[key2Num].frame
    let key3 = self.keys[key3Num].frame
    let key4 = self.keys[key4Num].frame
    let arcRadius = key1.height * 1/32

    let start = CGPoint(x: key1.origin.x, y: key1.origin.y)

    func bothEdgeNotesBlack() {
        borderPath.move(to: start)
        borderPath.addLine(to: CGPoint(x: start.x, y: key1.height * 31/32))
        borderPath.addArc(withCenter: CGPoint(x: start.x + arcRadius, y: key1.height * 31/32), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key2.origin.x, y: key1.height))
        borderPath.addLine(to: CGPoint(x: key2.origin.x, y: key2.height - arcRadius))
        borderPath.addArc(withCenter: CGPoint(x: key2.origin.x + arcRadius, y: key2.height - arcRadius), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key3.origin.x + key3.width - arcRadius, y: key2.height))
        borderPath.addArc(withCenter: CGPoint(x: key3.origin.x + key3.width - arcRadius, y: key2.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key3.origin.x + key3.width, y: key4.height))
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height))
        borderPath.addArc(withCenter: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width, y: key4.origin.y))
        borderPath.close()
    }

    func leftBlackrightWhite() {
        borderPath.move(to: start)
        borderPath.addLine(to: CGPoint(x: start.x, y: key1.height * 31/32))
        borderPath.addArc(withCenter: CGPoint(x: start.x + arcRadius, y: key1.height * 31/32), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key2.origin.x, y: key1.height))
        borderPath.addLine(to: CGPoint(x: key2.origin.x, y: key2.height - arcRadius))
        borderPath.addArc(withCenter: CGPoint(x: key2.origin.x + arcRadius, y: key2.height - arcRadius), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height))
        borderPath.addArc(withCenter: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width, y: key4.origin.y))
        borderPath.close()
    }

    func leftWhiteRightBlack() {
        borderPath.move(to: start)
        borderPath.addLine(to: CGPoint(x: start.x, y: key1.height * 31/32))
        borderPath.addArc(withCenter: CGPoint(x: start.x + arcRadius, y: key1.height * 31/32), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key3.origin.x + key3.width - arcRadius, y: key3.height))
        borderPath.addArc(withCenter: CGPoint(x: key3.origin.x + key3.width - arcRadius, y: key3.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key3.origin.x + key3.width, y: key4.height))
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height))
        borderPath.addArc(withCenter: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width, y: key4.origin.y))
        borderPath.close()
    }

    func bothEdgeNotesWhite() {
        borderPath.move(to: start)
        borderPath.addLine(to: CGPoint(x: start.x, y: key1.height * 31/32))
        borderPath.addArc(withCenter: CGPoint(x: start.x + arcRadius, y: key1.height * 31/32), radius: arcRadius, startAngle: leftAng, endAngle: bottomAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height))
        borderPath.addArc(withCenter: CGPoint(x: key4.origin.x + key4.width - arcRadius, y: key4.height - arcRadius), radius: arcRadius, startAngle: bottomAng, endAngle: rightAng, clockwise: false)
        borderPath.addLine(to: CGPoint(x: key4.origin.x + key4.width, y: key4.origin.y))
        borderPath.close()
    }

    switch self.keys[key1Num].keyType {
    case 2, 5, 7, 10, 12: // 1st key is black
        switch self.keys[key4Num].keyType {
            case 2, 5, 7, 10, 12: // last key is black
            bothEdgeNotesBlack()
        case 1, 3, 4, 6, 8, 9, 11:
            leftBlackrightWhite() // last key is white
        default:
            ()
        }
    case 1, 3, 4, 6, 8, 9, 11: // 1st key is white
        switch self.keys[key4Num].keyType {
        case 2, 5, 7, 10, 12: // last key is black
            leftWhiteRightBlack()
        case 1, 3, 4, 6, 8, 9, 11: // last key is white
            bothEdgeNotesWhite()
        default:
            ()
        }
    default:
        ()
    }
}

func borderBezier(key1Num: Int, key2Num: Int, key3Num: Int, key4Num: Int) {
    self.createBezier(key1Num: key1Num, key2Num: key2Num, key3Num: key3Num, key4Num: key4Num)

    let borderLayer = CAShapeLayer()
    borderLayer.zPosition = 4
    borderLayer.path = self.borderPath.cgPath

    borderLayer.fillColor = UIColor.clear.cgColor
    borderLayer.strokeColor = UIColor.red.cgColor
    borderLayer.lineWidth = 3.0
    self.borderLayer = borderLayer
    self.layer.addSublayer(self.borderLayer)
}

下面的图片是工作代码，而不是模型 :-)

【讨论】：