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

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 的思维方式。 例如：在您的情况下，这意味着不是为 Login 和 Register Button 定义 width 约束 - 您可以定义从 Button-border 到 UIViewController 边界的 leading 和 trailing 约束也许只是为他们设置一个固定的height 约束。这将使按钮动态适应设备。

下一个建议是避免在代码中布局这些元素。 Interface Builder 使定义这些布局变得非常容易，您将免费获得许多方便的功能，此外它还可以处理更复杂的布局。如果 UI 变得更复杂，您的代码将变得难以管理且难以阅读/更改。而且会引入很多样板代码。

Answer 3

在这种情况下，您需要调整屏幕大小。

1.获取屏幕宽度

`让 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

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