本文將演示如何給視圖添加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 }

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