[Swift通天遁地]六、智能布局-(3)添加edges/top/bottom/leading/trailing的约束

本文将演示添加edges/top/bottom/leading/trailing的约束。

首先确保在项目中已经安装了所需的第三方库。

点击【Podfile】,查看安装配置文件。

1 source 'https://github.com/CocoaPods/Specs.git'
2 platform :ios, ‘12.0’
3 use_frameworks!
4 
5 target 'DemoApp' do
6     pod 'SnapKit'
7 end

根据配置文件中的相关配置，安装第三方库。

然后点击打开【DemoApp.xcworkspace】项目文件。

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

现在开始编写代码，创建一个滚动视图，并在滚动视图中添加一个标签控件。

  1 import UIKit
  2 //在当前的类文件中，引入已经安装的第三方类库
  3 import SnapKit
  4 
  5 class ViewController: UIViewController {
  6     
  7     //添加一个布尔变量，用来标识是否已经给视图对象添加了约束关系。
  8     var didSetupConstraints = false
  9     
 10     //初始化一个滚动视图对象
 11     let scrollView  = UIScrollView()
 12     //初始化一个内容视图控件
 13     let contentView = UIView()
 14     
 15     //添加一个标签控件
 16     let label: UILabel = {
 17         //初始化标签
 18         let label = UILabel()
 19         //设置标签的背景颜色为橙色
 20         label.backgroundColor = .orange
 21         //设置标签不限制内容的行数
 22         label.numberOfLines = 0
 23         //设置文字在超过标签视图边界时的换行模式：按单词分割换行。
 24         //标签末尾不会出现被分割的单词。
 25         label.lineBreakMode = .byClipping
 26         //设置标签控件的文字颜色为白色
 27         label.textColor = .white
 28         //设置标签的文字内容
 29         label.text = NSLocalizedString("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", comment: "")
 30         //返回设置好的标签控件
 31         return label
 32     }()
 33     
 34     override func viewDidLoad() {
 35         super.viewDidLoad()
 36         
 37         //将滚动视图添加到根视图中
 38         view.addSubview(scrollView)
 39         
 40         //设置内容视图的背景颜色为棕色
 41         contentView.backgroundColor = UIColor.brown
 42         //将内容视图添加到滚动视图中
 43         scrollView.addSubview(contentView)
 44         //将标签添加到内容视图中
 45         contentView.addSubview(label)
 46         
 47         //调用视图对象的刷新约束的方法
 48         view.setNeedsUpdateConstraints()
 49     }
 50     
 51     //添加一个方法，用来刷新视图的约束关系
 52     override func updateViewConstraints() {
 53         
 54         //当还没有给视图对象添加约束时，
 55         //给控件添加约束关系
 56         if (!didSetupConstraints) {
 57             
 58             //给滚动视图添加约束关系
 59             scrollView.snp.makeConstraints { make in
 60                 //在滚动视图和根视图之间建立约束关系。
 61                 //设置滚动视图和根视图的边距为0。
 62                 //即滚动视图的显示区域，始终和根视图保持相同。
 63                 make.edges.equalTo(view).inset(UIEdgeInsets.zero)
 64             }
 65             
 66             //给内容视图添加约束关系
 67             contentView.snp.makeConstraints { make in
 68                 //在内容视图和滚动视图之间建立约束关系。
 69                 //设置内容视图和滚动视图的边距为0，
 70                 //即内容视图的显示区域，始终和滚动视图保持相同。
 71                 make.edges.equalTo(scrollView).inset(UIEdgeInsets.zero)
 72                 //设置内容视图的宽度始终等于滚动视图的宽度
 73                 make.width.equalTo(scrollView)
 74             }
 75             
 76             //给标签对象添加约束关系
 77             label.snp.makeConstraints { make in
 78                 //设置标签对象的顶边，与父视图保持20点的距离。
 79                 make.top.equalTo(contentView).inset(20)
 80                 //设置标签对象的底边，与父视图保持20点的距离。
 81                 make.bottom.equalTo(contentView).inset(20)
 82                 //设置标签对象的左边，与父视图保持20点的距离。
 83                 make.leading.equalTo(contentView).inset(20)
 84                 //设置标签对象的右边，与父视图保持20点的距离。
 85                 make.trailing.equalTo(contentView).inset(20)
 86             }
 87             
 88             //更改布尔变量的值，标识当前已经完成三个控件的约束
 89             didSetupConstraints = true
 90         }
 91         
 92         //调用父对象的刷新视图约束的方法
 93         super.updateViewConstraints()
 94     }
 95     
 96     override func didReceiveMemoryWarning() {
 97         super.didReceiveMemoryWarning()
 98         // Dispose of any resources that can be recreated.
 99     }
100 }