如何使用 Swift 以编程方式添加约束

本文旨在解释如何在 Swift 语言中以编程方式添加约束。

要以编程方式在 Swift 中添加约束，可以使用 NSLayoutConstraint 类来定义要添加的约束。

用于添加约束的概念如下

translatesAutoresizingMaskIntoConstraints 是 UIKit 框架中 UIView 的一个属性。它是一个布尔值，用于确定视图的 autoresizingMask 属性是否转换为自动布局约束。当 translatesAutoresizingMaskIntoConstraints 设置为 NO 时，将忽略 autoresizingMask，并且视图将根据使用自动布局系统设置的任何约束进行调整大小。

widthAnchor 是 UIKit 框架中 UIView 的一个属性，它指的是表示视图宽度的布局锚点。

heightAnchor 是 UIKit 框架中 UIView 的一个属性，它指的是表示视图高度的布局锚点。

leadingAnchor 是 UIKit 框架中 UIView 的一个属性，它指的是表示视图前缘的布局锚点。对于从左到右的语言，前缘是视图的左边缘；对于从右到左的语言，前缘是视图的右边缘。

trailingAnchor 是 UIKit 框架中 UIView 的一个属性，它指的是表示视图后缘的布局锚点。对于从左到右的语言，后缘是视图的右边缘；对于从右到左的语言，后缘是视图的左边缘。

constraint(equalTo:) 是 UIKit 框架中 NSLayoutAnchor 类的一个方法，用于在两个布局锚点之间创建约束。该约束指定一个视图的布局属性应等于另一个视图的布局属性。

以下是如何在 Swift 中向视图添加约束的示例

在本例中，您将学习如何一步一步以编程方式添加子视图。让我们开始吧。

基本设置

在此步骤中，您将创建一个基本登录屏幕，并进行如下所示的初始设置

import UIKit
class RegisterViewController: UIViewController {
   override func viewDidLoad() {
      super.viewDidLoad()
      setupUIComponents()
   }
   private func setupUIComponents() {
      view.backgroundColor = .white
      // add all views here
   }
}

解释

在上面的代码中，我们创建了一个 RegisterViewController 类来设计一个基本的注册屏幕。此外，在本例中，我们将学习如何向 UI 组件添加约束以绘制屏幕。

个人资料图片设置

在本节中，我们将设置一个个人资料图片视图。

// profile image view customization
private let profileImageView: UIImageView = {
   let imageView = UIImageView()
   imageView.contentMode = .scaleAspectFill
   imageView.layer.cornerRadius = 16
   imageView.layer.masksToBounds = true
   imageView.backgroundColor = UIColor(white: 0, alpha: 0.1)
   return imageView
}()
private func setupUIComponents() {
   view.backgroundColor = .white

   // adding constraints to profileImageView
   view.addSubview(profileImageView)
   profileImageView.translatesAutoresizingMaskIntoConstraints = false
   profileImageView.widthAnchor.constraint(equalToConstant: 150).isActive = true
   profileImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true
   profileImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
   profileImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
}

在上面的示例中，您已初始化并自定义了个人资料图片视图。之后添加约束以将其显示在屏幕上。

电子邮件文本字段设置

在本节中，我们将设置一个电子邮件文本字段。

private let emailTextField: UITextField = {
   let textField = UITextField()
   textField.keyboardType = .emailAddress
   textField.layer.cornerRadius = 8
   textField.layer.masksToBounds = true
   textField.layer.borderWidth = 1.0
   textField.layer.borderColor = UIColor(white: 0, alpha:0.3).cgColor
   textField.placeholder = "Email Address"
   textField.textAlignment = .center
   return textField
}()
private func setupUIComponents() {
   view.backgroundColor = .white

   // adding constraints to email text field
   view.addSubview(emailTextField)
   emailTextField.translatesAutoresizingMaskIntoConstraints = false
   emailTextField.leadingAnchor.constraint(equalTo:view.leadingAnchor, constant: 30).isActive = true
   emailTextField.trailingAnchor.constraint(equalTo:view.trailingAnchor, constant: -30).isActive = true
   emailTextField.heightAnchor.constraint(equalToConstant:50).isActive = true
   emailTextField.topAnchor.constraint(equalTo:profileImageView.bottomAnchor, constant: 60).isActive = true
}

在上面的示例中，您已初始化并自定义了一个文本字段以输入电子邮件地址。之后添加约束以将其显示在屏幕上。

密码文本字段设置

在本节中，我们将设置一个密码文本字段。

private let passwordTextField: UITextField = {
   let textField = UITextField()
   textField.layer.cornerRadius = 8
   textField.layer.masksToBounds = true
   textField.isSecureTextEntry = true
   textField.layer.borderWidth = 1.0
   textField.layer.borderColor = UIColor(white: 0, alpha:
   0.3).cgColor
   textField.placeholder = "Password"
   textField.textAlignment = .center
   return textField
}()
private func setupUIComponents() {
   view.backgroundColor = .white
   
   // adding constraints to passwordTextField
   view.addSubview(passwordTextField)
   passwordTextField.translatesAutoresizingMaskIntoConstraints =   false
   passwordTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
   passwordTextField.trailingAnchor.constraint(equalTo:view.trailingAnchor, constant: -30).isActive = true
   passwordTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
   passwordTextField.topAnchor.constraint(equalTo: emailTextField.bottomAnchor, constant: 30).isActive = true
}

在上面的示例中，您已初始化并自定义了一个文本字段以输入密码。之后添加约束以将其显示在屏幕上。

注册按钮设置

在本节中，我们将设置一个注册按钮。

private let registerButton: UIButton = {
   let button = UIButton(type: .system)
   button.backgroundColor = .darkGray
   button.setTitle("Register", for: .normal)
   button.setTitleColor(.white, for: .normal)
   button.layer.cornerRadius = 8
   button.layer.masksToBounds = true
   return button
}()
private func setupUIComponents() {
   view.backgroundColor = .white
   
   // adding constraints to register button
   view.addSubview(registerButton)
   registerButton.translatesAutoresizingMaskIntoConstraints = false
   registerButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
   registerButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
   registerButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
   registerButton.topAnchor.constraint(equalTo: passwordTextField.bottomAnchor, constant: 50).isActive = true
}

在上面的示例中，您自定义了一个用于注册功能的按钮。

最终输出

这里需要注意的一些要点

  • 在添加约束之前，应将视图添加到父视图。

  • 在以编程方式添加约束的情况下，translatesAutoresizingMaskIntoConstraints 应为 false。

  • 小心地添加相关约束，否则视图可能无法在屏幕上正确显示。

结论

以编程方式添加约束非常有趣且简单，但在添加约束时要小心。应仔细应用依赖约束。您可以应用不同类型的约束，例如宽度、高度、前缘、后缘、顶部和底部。

更新于： 2023年1月2日

12K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告