使用遮罩层使部分 UIView 透明

Question

我正在尝试实现这样的目标：

粉色部分是固定的，灰色区域可能会滚动。我有以下视图结构：

我目前有这个代码：

extension FloatingPoint {

    var degreesToRadians: Self { return self * .pi / 180 }
    var radiansToDegrees: Self { return self * 180 / .pi }

} 

@IBDesignable
class MaskView: UIView {

    let startAngle: CGFloat = 180
    let endAngle: CGFloat = 0

    override func layoutSubviews() {
        super.layoutSubviews()

        let multiplier: CGFloat = (frame.size.height * 3)
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height * multiplier),
                                  radius: frame.size.height * multiplier,
                                  startAngle: startAngle.degreesToRadians,
                                  endAngle: endAngle.degreesToRadians,
                                  clockwise: true).cgPath

        layer.mask = maskLayer
    }

}

蒙版视图设置为具有灰色背景色。

我遇到的问题是圆形部分不透明。将颜色更改为UIColor.clear 只会使圆形部分消失。我是否从根本上为此采取了错误的方法？任何帮助将不胜感激，谢谢。

Answer 1

首先，我们需要从UIView 创建一个子类（您已经这样做了）。但这是我使用的代码：

private extension FloatingPoint {
    var degreesToRadians: Self { return self * .pi / 180 }
    var radiansToDegrees: Self { return self * 180 / .pi }
}

@IBDesignable class MaskView: UIView {
    let startAngle: CGFloat = 180
    let endAngle: CGFloat = 0

    override func layoutSubviews() {
        super.layoutSubviews()

        // The multiplier determine how big the circle is
        let multiplier: CGFloat = 3.0
        let radius: CGFloat = frame.size.width * multipler
        let maskLayer = CAShapeLayer()
        let arcCenter = CGPoint(x: frame.size.width / 2, y: radius)
        maskLayer.path = UIBezierPath(arcCenter: arcCenter,
                                      radius: radius,
                                      startAngle: startAngle.degreesToRadians,
                                      endAngle: endAngle.degreesToRadians,
                                      clockwise: true).cgPath
        layer.mask = maskLayer
    }
}

然后您可以在ViewController 中添加MaskView 作为子视图。确保在情节提要中选择分配给 MaskView 类的视图：

现在我们有了一个非常简单的视图层次结构：

编译代码，它看起来很棒：

如果您想要一个被屏蔽的可滚动子视图，请将其添加为 maskView 的子视图。以下是视图层次结构在此之后的样子：

最后，这是它在模拟器中运行的样子：

参考：https://github.com/yzhong52/Example-LayerMask