约束似乎会改变 UIButton 框架大小

Question

背景

我正在尝试创建一个宽度为 300 像素、高度为 200 像素的 UIButton。

然后，我尝试将 UIButton 水平居中放置，距离底部 50 像素。

在iOS模拟器中运行代码时，结果出乎意料，按钮高宽不正确，UIButton出现裁剪。下图。

问题

必须对以下代码进行哪些更正才能正确定位 UIButton 布局并保留正确大小的 UIButton 框架？

代码

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        addButton1()
    }

    func addButton1() {
        let myButton1 = UIButton(type: UIButton.ButtonType.custom)
        myButton1.frame.size = CGSize(width: 300, height: 200)
        myButton1.setTitle("Hello", for:UIControl.State())
        myButton1.backgroundColor =  .blue
        view.addSubview(myButton1)
        myButton1.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            myButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myButton1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50)
        ])
    }

}

图片

Answer 1

您将遗留框架方法与 AutoLayout 混合使用，这是行不通的。我建议坚持使用 AutoLayout，因此您的代码可能是：

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    addButton1()
  }

  func addButton1() {
    let myButton1 = UIButton(type: UIButton.ButtonType.custom)
    myButton1.setTitle("Hello", for:UIControl.State())
    myButton1.backgroundColor =  .blue
    view.addSubview(myButton1)
    myButton1.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      myButton1.widthAnchor.constraint(equalToConstant: 300),
      myButton1.heightAnchor.constraint(equalToConstant: 200),
      myButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      myButton1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50)
    ])
  }

}

Answer 2

你可以通过NSLayoutConstraint给定按钮的高度和宽度。

func addButton1() {
        let myButton1 = UIButton(type: UIButton.ButtonType.custom)
        myButton1.setTitle("Hello", for:UIControl.State())
        myButton1.backgroundColor =  .blue
        view.addSubview(myButton1)
        myButton1.translatesAutoresizingMaskIntoConstraints = false
        myButton1.widthAnchor.constraint(equalToConstant: 300).isActive = true
        myButton1.heightAnchor.constraint(equalToConstant: 200).isActive = true
        myButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        myButton1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50).isActive = true
    }

Answer 3

据我所知，我想我们可以试试纵横比。

例如：

button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/4.0).isActive = true

button.translatesAutoresizingMaskIntoConstraints = false
let margins = view.layoutMarginsGuide
button.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 16.0).isActive = true
button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: -16.0).isActive = true
button.bottomAnchor.constraint(equalTo: margins.bottomAnchor, constant: -20.0).isActive = true
button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/4.0).isActive = true

如果有时间请仔细阅读autolayout

的苹果文档

约束似乎会改变 UIButton 框架大小

Constraints appear to change UIButton frame size

uibutton

ios

nslayoutconstraint

swift