[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 }