加載后大小不同的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)
}