Swift 使用遮罩层使UIView的部分透明

我正在努力实现这样的目标：

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

我目前有以下代码：

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

只会使圆形部分消失。我是否从根本上采取了错误的做法？非常感谢您的帮助。

首先，我们需要从

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
    }
}

然后，您可以将

MaskView

添加为

ViewController

中的子视图。确保在情节提要中选择分配给类

MaskView

的视图：

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

编译代码，看起来很棒：

如果您想要隐藏的可滚动子视图，请将其添加为maskView的子视图。以下是视图层次结构如何处理此问题：

最后，这是它在模拟器中运行的方式：

---

Ref:

请问您是如何更改“颜色为透明”的？你能给我们看一下你的代码吗？我在故事板上这样做了，但在代码中它应该是

backgroundColor=UIColor.clear

Multiplier应该是3，而不是

frame.size.height*3

让Multiplier:CGFloat=3

这个神秘的乘数就是我试图找出如何画出所有屏幕宽度相等的圆，但那是另一个故事。嗨，玉晨，谢谢。我尝试了您的示例，但得到了以下结果：具有与您相同的视图层次结构，MaskView的高度为150，固定在前导、尾随和顶部。@José，很难说您做了什么不同。我将代码推到这里：。希望有帮助。有一个稍微不同的视图层次结构。好东西，谢谢！