Question

我可以将UIImage的mask属性设置为另一个UIView，但是如果将UIImage的mask属性设置为UISwitch，则不会显示UIImage和UISwitch。

    recordMicSwitch = UISwitch()
    guard let sc = recordMicSwitch else { return }
    sc.frame = CGRect(x: deviceWidth - sc.frame.size.width - rightMargin, y: yPos, width: 0, height: 0)
    sc.onTintColor = UIColor(red: 0, green: 0.717, blue: 1.0, alpha: 1.0)
    view.addSubview(sc)

    let image: UIImage = UIImage(named: "testBGGradient.png")!
    let bgImage = UIImageView(image: image)
    bgImage.frame = CGRect(x:200, y:120, width:bgImage.frame.width/2, height:bgImage.frame.height/2)
    bgImage.mask = recordMicSwitch!
    self.view.addSubview(bgImage)

Answer 1

因此，这实际上不只是将图像蒙版到UISwitch那样简单。

此简单方法无法使用的原因是因为屏蔽实际上是如何工作的。当我们按照您的建议遮盖图像时，我们将采用另一种视图的形状并将其应用于我们的图像。然后，我们的图像实际上已添加到父级。我们最终得到的是一幅被切成开关形状的图像（此图像未接收到任何开关事件）。

我们实际上要做的是更多的参与。我们需要将图像添加到开关的subview的不同部分，并对其进行遮罩。

为方便起见，我制作了一个自定义开关类，该类在后台进行了繁重的工作：

class ImageTintSwitch: UISwitch {

    init(tintImage: UIImage) {
        super.init(frame: .zero)

        // Make sure we have subviews & grab the first one
        guard let element = subviews.first else { return }

        // Loop through only the subviews that clipToBounds inside the one we grabbed
        for (index, view) in element.subviews.enumerated() where view.clipsToBounds {

            // Add our image only where we need it
            configure(with: tintImage, on: element, maskedTo: view, atIndex: index)
        }
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func configure(with image: UIImage, on parent: UIView, maskedTo view: UIView, atIndex index: Int) {
        // Make an imageView with our image
        let imageView: UIImageView = {
            let view = UIImageView(image: image)
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()

        // Insert our new imageView only where we need it
        parent.insertSubview(imageView, at: index)

        // Mask our imageView to the views that we found
        imageView.mask = view

        // Constrain our imageView to match the parent view
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: parent.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: parent.centerYAnchor),
            imageView.widthAnchor.constraint(equalTo: parent.widthAnchor),
            imageView.heightAnchor.constraint(equalTo: parent.heightAnchor)
            ])
    }
}

要使用此自定义开关，我们可以使用以下代码：

let customSwitch = ImageTintSwitch(tintImage: UIImage(named: "gradient.jpg") ?? UIImage())

结果如下：

如何使用UIControl遮罩UIImage？

1 个答案: