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

【问题标题】：Constraints appear to change UIButton frame size约束似乎会改变 UIButton 框架大小
【发布时间】：2021-10-09 08:43:09
【问题描述】：

背景

我正在尝试创建一个宽度为 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)
        ])
    }

}

图片

【问题讨论】：

标签： ios swift uibutton nslayoutconstraint

【解决方案1】：

据我所知，我认为我们可以尝试使用纵横比。

例如：

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的苹果文档

【讨论】：

heightAnchor 未按预期显示，因为乘数需要为 200/300。更改后它起作用了。有趣的方法。谢谢。
是的！高兴听到。实际上，如果我认为我们应该使用纵横比，因为它有助于按钮适合所有 iphone 版本。

【解决方案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
    }

【讨论】：

【解决方案3】：

您正在将传统框架方法与 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)
    ])
  }

}

【讨论】：

完美。非常感谢您解释这个问题。