[Swift通天遁地]6、智能佈局-(5)給視圖添加Align(對齊)和Fill(填充的約束以及Label的約束

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-neltgyrb-ma.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示如何給視圖添加Align(對齊)和Fill(填充的約束以及Label的約束。

錨點默認位於視圖中心點的位置。

首先確保在項目中已經安裝了所需的第三方庫。

點擊【Podfile】,查看安裝配置文件。

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

根據配置文件中的相關配置，安裝第三方庫。

而後點擊打開【DemoApp.xcworkspace】項目文件。

在項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

如今開始編寫代碼，建立一個滾動視圖，並在滾動視圖中添加一個標籤控件。

  1 import UIKit
  2 //在當前的類文件中，引入已經安裝的第三方類庫
  3 import Neon
  4 
  5 class ViewController: UIViewController {
  6     
  7     override func viewDidLoad() {
  8         super.viewDidLoad()
  9         // Do any additional setup after loading the view, typically from a nib.
 10         //對視圖進行對齊約束
 11         alignExample()
 12         //視圖之間在對齊和填充方面的約束關係。
 13         alignAndFill()
 14         //在兩個視圖之間的第三個視圖的對齊約束
 15         alignBetween()
 16         //標籤控件的對齊
 17         alignLabels()
 18     }
 19     
 20     //添加一個方法，用來對視圖進行對齊約束
 21     func alignExample()
 22     {
 23         //初始化一個數組對象，包含四種不一樣的顏色。
 24         let colors = [UIColor.purple, UIColor.green, UIColor.orange, UIColor.blue]
 25         //初始化一個數組對象，共包含12種不一樣的對齊方式
 26         let aligns = [Align.aboveMatchingLeft, Align.aboveCentered, Align.aboveMatchingRight, Align.toTheRightMatchingTop, Align.toTheRightCentered, Align.toTheRightMatchingBottom, Align.underMatchingRight, Align.underCentered, Align.underMatchingLeft, Align.toTheLeftMatchingBottom, Align.toTheLeftCentered, Align.toTheLeftMatchingTop]
 27         
 28         //初始化兩個浮點類型的數字，
 29         //表示視圖的間距和尺寸。
 30         let pad = CGFloat(10)
 31         let size = CGFloat(40)
 32         
 33         //初始化一個視圖對象
 34         let viewRoot = UIView(frame: CGRect(x: 0, y: 0, width: 160, height: 160))
 35         //並設置視圖中心點的位置
 36         viewRoot.center = CGPoint(x: 160, y: 200)
 37         
 38         //初始化一個視圖對象
 39         let viewParent = UIView(frame: CGRect(x: 0, y: 0, width: 160, height: 160))
 40         //並設置視圖對象的背景顏色爲黑色
 41         viewParent.backgroundColor = UIColor.black
 42         
 43         //將第二個視圖對象添加到第一個視圖對象
 44         viewRoot.addSubview(viewParent)
 45         //將第一個視圖對象添加到根視圖
 46         self.view.addSubview(viewRoot)
 47         
 48         //建立一個12次的循環語句，
 49         //用來建立12個不一樣位置的視圖對象。
 50         for i in 0...11
 51         {
 52             //初始化一個視圖對象
 53             let view = UIView()
 54             //根據循環的索引，從數組中得到一個顏色
 55             view.backgroundColor = colors[i%3]
 56             //將視圖對象添加到父視圖中
 57             viewParent.addSubview(view)
 58             
 59             //根據索引得到一種對齊方式
 60             view.align(aligns[i], //對齊方式
 61                        relativeTo: viewParent,//
 62                        padding: pad, //間距
 63                        width: size,//寬度
 64                        height: size)//高度
 65         }
 66     }
 67     
 68     //添加一個方法，用來演示視圖之間在對齊和填充方面的約束關係。
 69     func alignAndFill()
 70     {
 71         //初始化一個視圖對象，並設置它的顯示區域。
 72         let viewParent = UIView(frame: CGRect(x: 20, y: 40, width: 280, height: 280))
 73         //設置視圖對象的背景顏色爲黑色
 74         viewParent.backgroundColor = UIColor.black
 75         //將視圖對象添加到根視圖
 76         self.view.addSubview(viewParent)
 77         
 78         //初始化兩個浮點類型的數字，
 79         //表示間距和尺寸
 80         let pad = CGFloat(10)
 81         let size = CGFloat(60)
 82         
 83         //初始化另外一個視圖對象
 84         let view1 = UIView()
 85         //設置視圖對象的背景顏色爲橙色
 86         view1.backgroundColor = UIColor.orange
 87         //將視圖對象添加到父視圖中。
 88         viewParent.addSubview(view1)
 89         //將視圖對象約束在父視圖的左上角，
 90         //並設置視圖對象的間距和尺寸。
 91         view1.anchorInCorner(.topLeft, xPad: pad, yPad: pad, width: size, height: size)
 92         
 93         //初始化另外一個視圖對象
 94         let view2 = UIView()
 95         //設置視圖對象的背景顏色爲紫色
 96         view2.backgroundColor = UIColor.purple
 97         //將視圖對象添加到父視圖中。
 98         viewParent.addSubview(view2)
 99 
100         //將視圖對象約束在橙色視圖的右側，
101         //而且兩個視圖的頂邊對齊。
102         //調整視圖對象的寬度，
103         //使視圖在水平方向上填滿父視圖
104         //view2.alignAndFillWidth(align: .toTheRightMatchingTop, relativeTo: view1, padding: pad, height: size/2)
105         
106         //將視圖對象和橙色視圖的底部中心位置對齊，
107         //並調整視圖對象的高度，
108         //使視圖對象在垂直方向上填滿父視圖。
109         //view2.alignAndFillHeight(align: .underCentered, relativeTo: view1, padding: pad, width: size / 2.0)
110         
111         //將視圖對象和橙色視圖右對齊，
112         //而且匹配橙色視圖邊框的頂部。
113         view2.alignAndFill(align: .toTheRightMatchingTop, relativeTo: view1, padding: pad)
114     }
115     
116     //添加一個方法，演示在兩個視圖之間的第三個視圖的對齊約束
117     func alignBetween()
118     {
119         //初始化一個視圖對象，
120         //做爲被約束的視圖對象的父視圖。
121         let viewParent = UIView(frame: CGRect(x: 20, y: 40, width: 280, height: 280))
122         //設置視圖的背景顏色爲淺灰色
123         viewParent.backgroundColor = UIColor.lightGray
124         //將視圖對象添加到根視圖
125         self.view.addSubview(viewParent)
126         
127         //初始化兩個浮點類型的數字，
128         //表示視圖之間的距離和視圖的尺寸
129         let pad = CGFloat(10)
130         let size = CGFloat(60)
131         
132         //初始化另外一個視圖對象
133         let view1 = UIView()
134         //設置視圖對象的背景顏色爲黑色
135         view1.backgroundColor = UIColor.black
136         //將視圖添加到父視圖
137         viewParent.addSubview(view1)
138         //將該視圖對象，約束在父視圖的左上角，
139         //並設置它的間距和尺寸屬性
140         view1.anchorInCorner(.topLeft, xPad: pad, yPad: pad, width: size, height: size)
141         
142         //初始化另外一個視圖對象
143         let view2 = UIView()
144          //設置視圖對象的背景顏色爲黑色
145         view2.backgroundColor = UIColor.black
146         //將視圖添加到父視圖
147         viewParent.addSubview(view2)
148         //將該視圖對象，約束在父視圖的右上角，
149         //並設置它的間距和尺寸屬性
150         view2.anchorInCorner(.topRight, xPad: pad, yPad: pad, width: size, height: size)
151         
152         //初始化另外一個視圖對象
153         let view3 = UIView()
154          //設置視圖對象的背景顏色爲黑色
155         view3.backgroundColor = UIColor.black
156         //將視圖添加到父視圖
157         viewParent.addSubview(view3)
158         //將該視圖對象，約束在父視圖的左下角，
159         //並設置它的間距和尺寸屬性
160         view3.anchorInCorner(.bottomLeft, xPad: pad, yPad: pad, width: size, height: size)
161         
162         //初始化另外一個視圖對象
163         let active1 = UIView()
164         //設置視圖對象的背景顏色爲橙色
165         active1.backgroundColor = UIColor.orange
166         //將視圖添加到父視圖
167         viewParent.addSubview(active1)
168         //設置視圖對象位於第一個視圖和第二個視圖之間的位置。
169         //並設置它們在水平方向上頂部對齊。
170         active1.alignBetweenHorizontal(align: .toTheRightMatchingTop, primaryView: view1, secondaryView: view2, padding: pad, height: size/2)
171         
172         //初始化另外一個視圖對象
173         let active2 = UIView()
174         //設置視圖對象的背景顏色爲紫色
175         active2.backgroundColor = UIColor.purple
176         //將視圖添加到父視圖
177         viewParent.addSubview(active2)
178         //設置視圖對象位於第一個視圖和第三個視圖之間的位置。
179         //並設置它們在水平方向上右對齊。
180         active2.alignBetweenVertical(align: .aboveMatchingRight, primaryView: view3, secondaryView: view1, padding: pad, width: size/2)
181     }
182     
183     //添加一個方法，標籤控件的對齊
184     func alignLabels()
185     {
186         //初始化兩個浮點類型的數字，
187         //表示視圖之間的距離和視圖的尺寸
188         let pad = CGFloat(10)
189         let size = CGFloat(60)
190         
191         //初始化一個視圖對象
192         //做爲被約束的視圖對象的父視圖。
193         let parentView = UIView(frame: CGRect(x: 0, y: 20, width: 320, height: 548))
194         //將視圖對象添加到當前視圖控制器的根視圖
195         self.view.addSubview(parentView)
196         
197         //初始化一個視圖對象
198         let view1 = UIView()
199         //設置視圖對象的背景顏色爲黑色
200         view1.backgroundColor = UIColor.black
201         //將視圖添加到父視圖
202         parentView.addSubview(view1)
203         //將該視圖對象，約束在父視圖的左上角。
204         //並設置它的間距和尺寸屬性
205         view1.anchorInCorner(.topLeft, xPad: pad, yPad: pad, width: size, height: size)
206         
207         //初始化一個視圖對象
208         let view2 = UIView()
209         //設置視圖對象的背景顏色爲黑色
210         view2.backgroundColor = UIColor.black
211         //將視圖添加到父視圖
212         parentView.addSubview(view2)
213         //將該視圖對象，約束在父視圖的右上角。
214         //並設置它的間距和尺寸屬性
215         view2.anchorInCorner(.topRight, xPad: pad, yPad: pad, width: size, height: size)
216         
217         //初始化一個標籤對象
218         let label = UILabel()
219         //設置視圖對象的背景顏色爲橙色
220         label.backgroundColor = UIColor.orange
221         //設置標籤對象的字體屬性
222         label.font = UIFont(name: "Arial", size: 12)
223         //設置標籤對象能夠擁有任意多行的文字
224         label.numberOfLines = 0
225         //給標籤對象添加文字內容
226         label.text = "One of the more complicated parts of working with dynamic layouts, is dealing with labels that may have 1 -> n lines, and as such passing in a specific height isn't always possible without causing a migraine. Neon makes this easy by introducing the AutoHeight constant. Pass this value into methods that accept a height param, and we will first set the width of the frame, tell the view to sizeToFit() so the height is automatically set based on its contents, and then align the view appropriately."
227         
228         //將視圖添加到父視圖
229         parentView.addSubview(label)
230         
231         //將標籤對象約束在第一個子視圖和第二個子視圖之間的位置，
232         //並使它們在水平方向上頂部對齊。
233         //標籤的高度爲自適應。
234         //label.alignBetweenHorizontal(align: .toTheRightMatchingTop, primaryView: view1, secondaryView: view2, padding: pad, height: AutoHeight)
235         
236         //將標籤對象約束在第一個子視圖和第二個子視圖之間的位置，
237         //並使它們在水平方向上頂部對齊。
238         //固定標籤的高度
239         label.alignBetweenHorizontal(align: .toTheRightMatchingTop, primaryView: view1, secondaryView: view2, padding: pad, height: size)
240     }
241     
242     override func viewWillLayoutSubviews() {
243         
244     }
245     
246     override func didReceiveMemoryWarning() {
247         super.didReceiveMemoryWarning()
248         // Dispose of any resources that can be recreated.
249     }
250 }