圆角按钮被切断的问题

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

我能够通过将文章中的解决方案应用于我的按钮而不是视图来解决这个问题。 这启用了渐变的动态调整大小。

为什么渐变没有覆盖视图的整个宽度