[Swift通天遁地]6、智能布局-(2)视图对象的尺寸和位置相对约束

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-qmapxqdt-kz.html 
➤若是连接不是山青咏芝的博客园地址，则多是爬取做者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持做者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目录：[Swift]通天遁地Swift

本文将演示如何进行视图对象的相对约束。

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

点击【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 blackView: UIView = {
 12         //对视图进行初始化操做
 13         let view = UIView()
 14         //设置视图的背景颜色为黑色
 15         view.backgroundColor = .black
 16         //返回设置好的视图
 17         return view
 18     }()
 19     
 20     //添加一个视图属性
 21     let redView: UIView = {
 22         //对视图进行初始化操做
 23         let view = UIView()
 24         //设置视图的背景颜色为红色
 25         view.backgroundColor = .red
 26         //返回设置好的视图
 27         return view
 28     }()
 29     
 30     //添加一个视图属性
 31     let yellowView: UIView = {
 32         //对视图进行初始化操做
 33         let view = UIView()
 34         //设置视图的背景颜色为黄色
 35         view.backgroundColor = .yellow
 36         //返回设置好的视图
 37         return view
 38     }()
 39     
 40     //添加一个视图属性
 41     let blueView: UIView = {
 42         //对视图进行初始化操做
 43         let view = UIView()
 44         //设置视图的背景颜色为蓝色
 45         view.backgroundColor = .blue
 46         //返回设置好的视图
 47         return view
 48     }()
 49     
 50     //添加一个视图属性
 51     let greenView: UIView = {
 52         //对视图进行初始化操做
 53         let view = UIView()
 54         //设置视图的背景颜色为绿色
 55         view.backgroundColor = .green
 56          //返回设置好的视图
 57         return view
 58     }()
 59     
 60     override func viewDidLoad() {
 61         super.viewDidLoad()
 62         
 63         //依次将五个视图对象，添加到视图控制器的根视图
 64         view.addSubview(blackView)
 65         view.addSubview(redView)
 66         view.addSubview(yellowView)
 67         view.addSubview(blueView)
 68         view.addSubview(greenView)
 69         
 70         //执行根视图对象的约束刷新的动做
 71         view.setNeedsUpdateConstraints()
 72     }
 73     
 74     //添加一个帆帆，用来刷新视图的约束关系
 75     override func updateViewConstraints() {
 76         
 77         //当尚未给视图对象添加约束时，
 78         //给五个视图添加约束关系
 79         if (!didSetupConstraints) {
 80             
 81             //给黑色视图添加约束关系
 82             blackView.snp.makeConstraints { make in
 83                 //黑色视图约束在根视图的中心位置
 84                 make.center.equalTo(view)
 85                 //限制黑色视图的高度和高度
 86                 //将他们始终保持为100
 87                 make.size.equalTo(CGSize(width: 100, height: 100))
 88             }
 89             
 90             //给红色视图添加约束关系
 91             redView.snp.makeConstraints { make in
 92                 //将红色视图的顶点，约束在黑色视图的底边，
 93                 //并保持20点的距离。
 94                 make.top.equalTo(blackView.snp.bottom).offset(20.0)
 95                 //将红色视图的右边，约束在黑色视图的左边，
 96                 //并保持20点的距离。
 97                 make.right.equalTo(blackView.snp.left).offset(-20.0)
 98                 //约束红色视图的尺寸，将它们始终保持在100
 99                 make.size.equalTo(CGSize(width: 100, height: 100))
100             }
101             
102             //给黄色视图添加约束关系
103             yellowView.snp.makeConstraints { make in
104                 //将黄色视图的顶点，约束在黑色视图的底边，
105                 //并保持20点的距离。
106                 make.top.equalTo(blackView.snp.bottom).offset(20.0)
107                 //将黄色视图的左边，约束在黑色视图的右边，
108                 //并保持20点的距离。
109                 make.left.equalTo(blackView.snp.right).offset(20.0)
110                 //约束黄色视图的尺寸，将它们始终保持在100
111                 make.size.equalTo(CGSize(width: 100, height: 100))
112             }
113             
114             //给蓝色视图添加约束关系
115             blueView.snp.makeConstraints { make in
116                 //将蓝色视图的底边，约束在黑色视图的顶边，
117                 //并保持20点的距离。
118                 make.bottom.equalTo(blackView.snp.top).offset(-20.0)
119                 //将蓝色视图的左边，约束在黑色视图的右边，
120                 //并保持20点的距离。
121                 make.left.equalTo(blackView.snp.right).offset(20.0)
122                 //约束蓝色视图的尺寸，将它们始终保持在100
123                 make.size.equalTo(CGSize(width: 100, height: 100))
124             }
125             
126             //给绿色视图添加约束关系
127             greenView.snp.makeConstraints { make in
128                 //将绿色视图的底边，约束在黑色视图的顶边，
129                 //并保持20点的距离。
130                 make.bottom.equalTo(blackView.snp.top).offset(-20.0)
131                 //将蓝色视图的右边边，约束在黑色视图的左边，
132                 //并保持20点的距离。
133                 make.right.equalTo(blackView.snp.left).offset(-20.0)
134                 //约束绿色视图的尺寸，将它们始终保持在100
135                 make.size.equalTo(CGSize(width: 200, height: 100))
136             }
137             
138             //更改布尔变量的值，标识当前已经完成五个视图的约束
139             didSetupConstraints = true
140         }
141         
142         //调用父对象的刷新视图约束的方法
143         super.updateViewConstraints()
144     }
145     
146     override func didReceiveMemoryWarning() {
147         super.didReceiveMemoryWarning()
148         // Dispose of any resources that can be recreated.
149     }
150 }