如何使用UIControl屏蔽UIImage？

Question

我可以将UIImage的掩码属性设置为另一个UIView，但是如果我将UIImage的掩码属性设置为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那么简单。

这种简单方法不起作用的原因是因为掩蔽实际上是如何工作的。当我们像您建议的那样掩盖图像时，我们采用另一种视图的形状并将其应用于我们的图像。然后，我们的图像实际上被添加到父级。我们最终得到的是一个切割成开关形状的图像（此图像不接收任何切换事件）。

我们实际需要做的是多一点参与。我们需要将我们的图像添加到交换机的subviews的不同部分，然后屏蔽它们。

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

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())

这是结果：