Пользовательские ребра UIButton выглядят неровными после взаимодействия с ним

Question

Я создал пользовательский подкласс UIButton с закругленными углами, градиентным фоном и тенями. Кнопки выглядят нормально и сглаживаются сразу после запуска приложения, но если я нажимаю одну, ее края становятся пиксельными.

Я пробовал много вещей, таких как установка .allowsEdgeAntialiasing = true для слоев кнопки или удаление анимации масштабного преобразования из сеттера «Выделенный» и т. Д., И ничто не помогает вообще: (

Вот мой класс кнопки:

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

Некоторые скриншоты с моего тестового устройства (iPhone 7 @ 12.1.2):

После запуска приложения: https://vinishko.party/files/ok.jpg

После того, как я нажму эту кнопку: https://vinishko.party/files/aliased.jpg

Потратил целый день, уже пытаясь решить эту проблему, пожалуйста, помогите мне: D Спасибо.

Answer 1

Вы добавляете другой градиентный слой каждый раз, когда вызывается layoutSubviews().Вы можете подтвердить это, добавив @IBAction для своей кнопки:

@IBAction func didTap(_ sender: Any) {

    if let b  = sender as? CircleTintedButton {
        let n = b.layer.sublayers?.count
        print("nunLayers: \(String(describing: n))")
    }

}

Вы увидите, что количество подслоев увеличивается с каждым нажатием.

Добавьте слой градиента в качестве 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
        }
    }
}