本文将演示如何给视图添加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 }