[英]How can you mask a UIImage with a UIControl?
我可以将 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)
所以这实际上并不像将我们的图像屏蔽到UISwitch
那么简单。
这种简单的方法行不通的原因是掩蔽的实际工作方式。 当我们像您建议的那样屏蔽图像时,我们会采用另一个视图的形状并将其应用于我们的图像。 然后,我们的图像实际上被添加到父级。 我们最终得到的是一个被切割成我们开关形状的图像(这个图像没有接收任何开关事件)。
我们实际上需要做的是更多的参与。 我们需要将我们的图像添加到 switch 的subview
的不同部分,并对其进行掩码。
为方便起见,我制作了一个自定义 switch 类来完成幕后的繁重工作:
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())
结果如下:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.