以编程方式编写布局代码时，如何考虑不同的屏幕尺寸

Question

我正在为登录屏幕创建屏幕，我首先尝试使用情节提要进行构建，但是它确实非常混乱。所以我跳到代码，我写的代码是一个图像，文本，两个文本字段和三个按钮，它们以类似于堆栈视图的简单视图显示。

下面是两个示例，右侧是iPhone SE，左侧是iPhone XR。

对于SE，布局看起来不错，但对于XR，布局却很小。如何说明屏幕变化，以使UI在所有设备上看起来都一样？

这是我用于以编程方式添加约束的代码：

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    // Round the edges
    Login.layer.cornerRadius = 4
    Register.layer.cornerRadius = 4

    logo.translatesAutoresizingMaskIntoConstraints = false
    logo.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    logo.widthAnchor.constraint(equalToConstant: 200).isActive = true
    logo.heightAnchor.constraint(equalToConstant: 80).isActive = true
    logo.topAnchor.constraint(equalTo: view.topAnchor, constant: 90).isActive = true
    logo.contentMode = .scaleAspectFit

    letsloginTextField.translatesAutoresizingMaskIntoConstraints = false
    letsloginTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    letsloginTextField.bottomAnchor.constraint(equalTo: logo.bottomAnchor, constant: 50).isActive = true

    emailTextField.translatesAutoresizingMaskIntoConstraints = false
    emailTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    emailTextField.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    emailTextField.widthAnchor.constraint(equalToConstant: 180).isActive = true
    emailTextField.heightAnchor.constraint(equalToConstant: 30).isActive = true
    //emailTextField.bottomAnchor.constraint(equalTo: letsloginTextField.bottomAnchor, constant: 50).isActive = true


    passwordTextField.translatesAutoresizingMaskIntoConstraints = false
    passwordTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    passwordTextField.widthAnchor.constraint(equalToConstant: 180).isActive = true
    passwordTextField.heightAnchor.constraint(equalToConstant: 30).isActive = true
    passwordTextField.bottomAnchor.constraint(equalTo: emailTextField.bottomAnchor, constant: 50).isActive = true

    Login.translatesAutoresizingMaskIntoConstraints = false
    Login.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    Login.widthAnchor.constraint(equalToConstant: 100).isActive = true
    Login.heightAnchor.constraint(equalToConstant: 30).isActive = true
    Login.bottomAnchor.constraint(equalTo: passwordTextField.bottomAnchor, constant: 60).isActive = true

    Register.translatesAutoresizingMaskIntoConstraints = false
    Register.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    Register.widthAnchor.constraint(equalToConstant: 100).isActive = true
    Register.heightAnchor.constraint(equalToConstant: 30).isActive = true
    Register.bottomAnchor.constraint(equalTo: Login.bottomAnchor, constant: 60).isActive = true

    // set delegates
    GIDSignIn.sharedInstance().uiDelegate = self
    //GIDSignIn.sharedInstance().signIn()

}

Answer 1

您可以如下设置相对于屏幕宽度的视图宽度：

let width = UIScreen.main.bounds.size.width * 0.3
emailTextField.widthAnchor.constraint(equalToConstant: width).isActive = true

，然后为视图设置比例。例如：高度是宽度的1：2

emailTextField.heightAnchor.constraint(equalToConstant: width * 0.5).isActive = true

根据需要更改值。

Answer 2

我强烈建议您进入XCode Interface Builder： https://developer.apple.com/videos/developer-tools/interface-builder

此外，您需要改变思考方式，如何为移动设备设置UI。 例如：在您的情况下，这意味着不必为width和Login按钮定义Register约束-您可以从Button中定义leading和trailing约束-边界到UIViewController的边界，并且可能只是为其设置了固定的height约束。这将使按钮动态适应设备。

下一个建议是避免在代码内布局此元素。 Interface Builder非常容易定义这些布局，您将免费获得许多方便的功能，此外，它还可以处理更复杂的布局。如果用户界面变得更加复杂，您的代码将变得难以管理，并且难以阅读/更改。此外，它将介绍很多样板代码。

Answer 3

在这种情况下，您需要使用屏幕尺寸播放。

1。获取屏幕宽度

`let screenWidth = UIScreen.main.bounds.size.width

2。设置按钮的边距（左，右）

let margin = 60

注意：：左边距= 30，右边距= 30总边距= 60，您可以根据设计要求更改边距。

3。设置按钮大小

新代码

Register.widthAnchor.constraint(equalToConstant:screenWidth - margin).isActive = true

您的旧代码

Register.widthAnchor.constraint(equalToConstant: 100).isActive = true

注意：这仅适用于纵向模式。