[Swift通天遁地]六、智能布局-(5)给视图添加Align(对齐)和Fill(填充的约束以及Label的约束

本文将演示如何给视图添加Align(对齐)和Fill(填充的约束以及Label的约束。

锚点默认位于视图中心点的位置。

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

点击【Podfile】,查看安装配置文件。

1 platform :ios, ‘12.02 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 }

 

猜你喜欢

转载自www.cnblogs.com/strengthen/p/10269317.html
0条评论
添加一条新回复