加载后大小不同的UIButton

Question

嗨，我正在尝试在UIButton中放置渐变背景。 这是我的方法，但是对于iPhone 7 plus或8 plus，它不能覆盖所有按钮。 当看到uibutton框架（174.5、0.0、164.5、47.0）但加载后，我看到的是（194.5、0.0、184.5、47.0）。 看起来像这样

func setRedGradiant(){
    self.layer.shadowOffset = CGSize.zero
    self.layer.shadowColor = UIColor(red:0, green:0, blue:0, alpha:0.5).cgColor
    self.layer.shadowOpacity = 1
    self.layer.shadowRadius = 4
    let gradient = CAGradientLayer()
    print(self.frame)
    gradient.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)
    gradient.colors = [
        UIColor(red:0.97, green:0.34, blue:0.39, alpha:1).cgColor,
        UIColor(red:0.94, green:0.17, blue:0.2, alpha:1).cgColor
    ]
    gradient.locations = [0, 1]
    gradient.startPoint = CGPoint(x: 0.5, y: 0)
    gradient.endPoint = CGPoint(x: 0.5, y: 1)
    gradient.cornerRadius = self.frame.size.height / 2
    self.layer.addSublayer(gradient)
}



@IBOutlet weak var signInButton: UIButton!{
        didSet{
            signInButton.setRedGradiant()
        }
    }

Answer 1

设置@IBOutlet ， view没有正确的框架。 我建议您了解有关UIViewController lifecycle更多信息，以了解此问题。

正确的解决方案是在viewWillLayoutSubviews方法上为相应的按钮调用setRedGradiant 。

每次更改视图范围时都会调用此方法 。

Answer 2

建立按钮的大小后，需要设置渐变的框架。 一种方便的方法是创建UIButton的子类并重写layoutSubviews来设置渐变。

每当按钮的框架更改时，都会调用layoutSubviews() ，但是您只想在第一次设置渐变。 使用属性存储渐变，以便您可以在以后的调用中更新frame 。

class GradientButton: UIButton {

    var gradient: CAGradientLayer?

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

    func setRedGradient() {
        if gradient == nil {
            self.layer.shadowOffset = CGSize.zero
            self.layer.shadowColor = UIColor(red:0, green:0, blue:0, alpha:0.5).cgColor
            self.layer.shadowOpacity = 1
            self.layer.shadowRadius = 4
            self.gradient = CAGradientLayer()

            self.gradient?.colors = [
                UIColor(red:0.97, green:0.34, blue:0.39, alpha:1).cgColor,
                UIColor(red:0.94, green:0.17, blue:0.2, alpha:1).cgColor
            ]
            self.gradient?.locations = [0, 1]
            self.gradient?.startPoint = CGPoint(x: 0.5, y: 0)
            self.gradient?.endPoint = CGPoint(x: 0.5, y: 1)

            self.layer.addSublayer(self.gradient!)
        }

        // Always update the frame, even if this isn't the first call
        self.gradient?.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)
        self.gradient?.cornerRadius = self.frame.size.height / 2
    }
}

要在情节提要中使用此功能，请在Identity Inspector中将UIButton的class更改为GradientButton 。

您的出口将变为：

@IBOutlet weak var signInButton: GradientButton!

这样做的好处是按钮可以设置和更新自己的渐变，如果您有两个或多个按钮，则效果很好。

未来的改进将是使颜色成为一种属性，这样您不仅可以拥有红色按钮。

Answer 3

我想你应该叫signInButton.setRedGradiant()在viewDidLoad ，也使用.bounds代替.frame的功能：

func setRedGradiant(){
    self.layer.shadowOffset = CGSize.zero
    self.layer.shadowColor = UIColor(red:0, green:0, blue:0, alpha:0.5).cgColor
    self.layer.shadowOpacity = 1
    self.layer.shadowRadius = 4
    let gradient = CAGradientLayer()
    print(self.bounds)
    gradient.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
    gradient.colors = [
        UIColor(red:0.97, green:0.34, blue:0.39, alpha:1).cgColor,
        UIColor(red:0.94, green:0.17, blue:0.2, alpha:1).cgColor
    ]
    gradient.locations = [0, 1]
    gradient.startPoint = CGPoint(x: 0.5, y: 0)
    gradient.endPoint = CGPoint(x: 0.5, y: 1)
    gradient.cornerRadius = self.bounds.size.height / 2
    self.layer.addSublayer(gradient)
}