圓角按鈕被切斷的問題

Question

我有一個用於獲得圓角的自定義按鈕類。 該類適用於某些硬編碼的長度/寬度，但不適用於其他人。 我根本無法讓它與動態大小的按鈕一起工作。 正如您在圖片中看到的那樣，該按鈕以各種方式被切斷。 知道我做錯了什么嗎？

class CustomButton: UIButton{
    
     
       override init(frame: CGRect) {
           super.init(frame: frame)
           setupButton()
       }
       
       
       required init?(coder aDecoder: NSCoder) {
           super.init(coder: aDecoder)
           setupButton()
       }
       
       
       func setupButton() {
           setTitleColor(.white, for: .normal)
           layer.cornerRadius   = frame.size.height/2
           layer.masksToBounds = true
       }
       
}

謝謝你的幫助。

Answer 1

發生這種情況是因為您在使用初始幀創建按鈕之后設置了角。 按鈕的框架在布局過程中會發生變化，但它的角不會重新繪制。 只需將 setupButton 調用添加到 layoutSubviews：

override func layoutSubviews() {
    super.layoutSubviews()
    setupButton()
}

此外，由於可能存在性能問題，我建議您使用 UIBezierPath 方法而不是cornerRadius。

Answer 2

雖然您沒有分享問題代碼，但您似乎對圖層有問題！ 由於幀更改， CALayer不會自動調整大小，因此它由初始設置設置並保持不變。 所以首先試着讓它更像一個視圖。 以下代碼為您提供了一個可自定義的漸變視圖，它可以對任何布局調用做出反應（甚至在 Storyboard 中！）：

@IBDesignable
final class GradientView: UIView {

    @IBInspectable var firstColor: UIColor = .clear { didSet { updateView() } }
    @IBInspectable var secondColor: UIColor = .clear { didSet { updateView() } }

    @IBInspectable var startPoint: CGPoint = CGPoint(x: 0, y: 0) { didSet { updateView() } }
    @IBInspectable var endPoint: CGPoint = CGPoint(x: 1, y: 1) { didSet { updateView() } }

    override class var layerClass: AnyClass { get { CAGradientLayer.self } }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateView()
        layer.frame = bounds
    }

    private func updateView() {
        let layer = self.layer as! CAGradientLayer
        layer.colors = [firstColor, secondColor].map {$0.cgColor}
        layer.startPoint = startPoint
        layer.endPoint = endPoint
    }
}

然后您可以將其添加到您的自定義視圖並將其框架到父視圖（或您喜歡的任何其他布局方法）：

class CustomButton: UIButton{

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupButton()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupButton()
    }

    private lazy var gradientView: GradientView = {
        // Setup the gradient here
        let gradient = GradientView(frame: frame)
        gradient.startPoint = .init(x: 0, y: 0)
        gradient.endPoint = .init(x: 1, y: 1)
        gradient.firstColor = .red
        gradient.secondColor = .orange
        return gradient
    }()

    private func addLayerIfNeeded() {
        guard gradientView.superview == nil else { return }
        addSubview(gradientView)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientView.frame =  bounds
    }

    func setupButton() {
        addLayerIfNeeded()
        setTitleColor(.white, for: .normal)
    }
}

Answer 3

我能夠通過將文章中的解決方案應用於我的按鈕而不是視圖來解決這個問題。 這啟用了漸變的動態調整大小。

為什么漸變沒有覆蓋視圖的整個寬度