[英]Custom UIButton's edges look pixelated after interacting with it
I've created a custom UIButton subclass with rounded corners, gradient background and shadows. 我创建了一个带有圆角,渐变背景和阴影的自定义UIButton子类。 Buttons look ok and antialiased immediately after starting the application, but if I press one it's edges become pixelated. 启动应用程序后,按钮看起来可以正常显示并进行抗锯齿处理,但是如果我按下按钮,其边缘将变得像素化。
I've tried a lot of stuff like setting .allowsEdgeAntialiasing = true on button's layers or removing scale transform animation from "Highlighted" setter etc. and nothing helps at all :( 我已经尝试了很多方法,例如在按钮的图层上设置.allowsEdgeAntialiasing = true或从“突出显示”的设置器中删除比例转换动画等,根本没有任何帮助:(
Here is my button class: 这是我的按钮类:
@IBDesignable class CircleTintedButton: UIButton {
@IBInspectable var cornerRadius : CGFloat = 1.0
@IBInspectable var shadowOffsetWidth: CGFloat = 0.0
@IBInspectable var shadowOffsetHeight: CGFloat = 2.0
@IBInspectable var shadowColor : UIColor = UIColor.gray
@IBInspectable var shadowOpacity: CGFloat = 0.3
@IBInspectable var startColor: UIColor = .blue {
didSet {
setNeedsLayout()
}
}
@IBInspectable var endColor: UIColor = .green {
didSet {
setNeedsLayout()
}
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = cornerRadius
layer.shadowColor = shadowColor.cgColor
layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
layer.shadowPath = shadowPath.cgPath
layer.shadowOpacity = Float(shadowOpacity)
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
gradientLayer.locations = [0, 1]
gradientLayer.frame = bounds
gradientLayer.cornerRadius = cornerRadius
gradientLayer.masksToBounds = true
layer.insertSublayer(gradientLayer, below: self.titleLabel?.layer)
}
override var isHighlighted: Bool {
get {
return super.isHighlighted
}
set {
let xScale : CGFloat = newValue ? 1.025 : 1.0
let yScale : CGFloat = newValue ? 1.1 : 1.0
UIView.animate(withDuration: 0.1) {
let transformation = CGAffineTransform(scaleX: xScale, y: yScale)
self.transform = transformation
}
super.isHighlighted = newValue
}
}
}
Some screenshots from my test device (iPhone 7 @ 12.1.2): 我的测试设备(iPhone 7 @ 12.1.2)的一些屏幕截图:
After app launch: https://vinishko.party/files/ok.jpg 应用启动后: https : //vinishko.party/files/ok.jpg
After I press this button: https://vinishko.party/files/aliased.jpg 按此按钮后: https : //vinishko.party/files/aliased.jpg
Spent the whole day already trying to fix this problem, please help me :D Thanks. 已经花了整整一天的时间试图解决这个问题,请帮助我:D谢谢。
You are adding another gradient layer every time layoutSubviews()
is called. 每次调用layoutSubviews()
都要添加另一个渐变层。 You can confirm this by adding an @IBAction
for your button: 您可以通过为按钮添加@IBAction
来确认这一点:
@IBAction func didTap(_ sender: Any) {
if let b = sender as? CircleTintedButton {
let n = b.layer.sublayers?.count
print("nunLayers: \(String(describing: n))")
}
}
You'll see that the sublayers count increases with each tap. 您会看到子层数随着每次点击而增加。
Add a gradient layer as a var / property of your custom button, and then only add it once: 将渐变图层添加为自定义按钮的var /属性,然后仅将其添加一次:
@IBDesignable class CircleTintedButton: UIButton {
@IBInspectable var cornerRadius : CGFloat = 1.0
@IBInspectable var shadowOffsetWidth: CGFloat = 0.0
@IBInspectable var shadowOffsetHeight: CGFloat = 2.0
@IBInspectable var shadowColor : UIColor = UIColor.gray
@IBInspectable var shadowOpacity: CGFloat = 0.3
// add this var / property
private var gradLayer: CAGradientLayer?
@IBInspectable var startColor: UIColor = .blue {
didSet {
setNeedsLayout()
}
}
@IBInspectable var endColor: UIColor = .green {
didSet {
setNeedsLayout()
}
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = cornerRadius
layer.shadowColor = shadowColor.cgColor
layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
layer.shadowPath = shadowPath.cgPath
layer.shadowOpacity = Float(shadowOpacity)
// only create / add the gradient layer once
if gradLayer == nil {
let gradientLayer = CAGradientLayer()
gradientLayer.locations = [0, 1]
gradientLayer.masksToBounds = true
layer.insertSublayer(gradientLayer, below: self.titleLabel?.layer)
self.gradLayer = gradientLayer
}
gradLayer?.colors = [startColor.cgColor, endColor.cgColor]
gradLayer?.startPoint = CGPoint(x: 0.0, y: 0.0)
gradLayer?.endPoint = CGPoint(x: 1.0, y: 0.6)
gradLayer?.frame = bounds
gradLayer?.cornerRadius = cornerRadius
// original code
// let gradientLayer = CAGradientLayer()
// gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
// gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
// gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
//
// gradientLayer.locations = [0, 1]
// gradientLayer.frame = bounds
// gradientLayer.cornerRadius = cornerRadius
// gradientLayer.masksToBounds = true
//
// layer.insertSublayer(gradientLayer, below: self.titleLabel?.layer)
}
override var isHighlighted: Bool {
get {
return super.isHighlighted
}
set {
let xScale : CGFloat = newValue ? 1.025 : 1.0
let yScale : CGFloat = newValue ? 1.1 : 1.0
UIView.animate(withDuration: 0.1) {
let transformation = CGAffineTransform(scaleX: xScale, y: yScale)
self.transform = transformation
}
super.isHighlighted = newValue
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.