本文將演示如何給檢視新增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 }