[Swift通天遁地]六、智能布局-(2)视图对象的尺寸和位置相对约束
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10268981.html
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示如何进行视图对象的相对约束。
首先确保在项目中已经安装了所需的第三方库。
点击【Podfile】,查看安装配置文件。
1 source 'https://github.com/CocoaPods/Specs.git' 2 platform :ios, ‘12.0’ 3 use_frameworks! 4 5 target 'DemoApp' do 6 pod 'SnapKit' 7 end
根据配置文件中的相关配置，安装第三方库。
然后点击打开【DemoApp.xcworkspace】项目文件。
在项目导航区，打开视图控制器的代码文件【ViewController.swift】
1 import UIKit 2 //在当前的类文件中，引入已经安装的第三方类库 3 import SnapKit 4 5 class ViewController: UIViewController { 6 7 //添加一个布尔变量，用来标识是否已经给视图对象添加了约束关系 8 var didSetupConstraints = false 9 10 //添加一个视图常量，作为一个当前类的一个属性 11 let blackView: UIView = { 12 //对视图进行初始化操作 13 let view = UIView() 14 //设置视图的背景颜色为黑色 15 view.backgroundColor = .black 16 //返回设置好的视图 17 return view 18 }() 19 20 //添加一个视图属性 21 let redView: UIView = { 22 //对视图进行初始化操作 23 let view = UIView() 24 //设置视图的背景颜色为红色 25 view.backgroundColor = .red 26 //返回设置好的视图 27 return view 28 }() 29 30 //添加一个视图属性 31 let yellowView: UIView = { 32 //对视图进行初始化操作 33 let view = UIView() 34 //设置视图的背景颜色为黄色 35 view.backgroundColor = .yellow 36 //返回设置好的视图 37 return view 38 }() 39 40 //添加一个视图属性 41 let blueView: UIView = { 42 //对视图进行初始化操作 43 let view = UIView() 44 //设置视图的背景颜色为蓝色 45 view.backgroundColor = .blue 46 //返回设置好的视图 47 return view 48 }() 49 50 //添加一个视图属性 51 let greenView: UIView = { 52 //对视图进行初始化操作 53 let view = UIView() 54 //设置视图的背景颜色为绿色 55 view.backgroundColor = .green 56 //返回设置好的视图 57 return view 58 }() 59 60 override func viewDidLoad() { 61 super.viewDidLoad() 62 63 //依次将五个视图对象，添加到视图控制器的根视图 64 view.addSubview(blackView) 65 view.addSubview(redView) 66 view.addSubview(yellowView) 67 view.addSubview(blueView) 68 view.addSubview(greenView) 69 70 //执行根视图对象的约束刷新的动作 71 view.setNeedsUpdateConstraints() 72 } 73 74 //添加一个帆帆，用来刷新视图的约束关系 75 override func updateViewConstraints() { 76 77 //当还没有给视图对象添加约束时， 78 //给五个视图添加约束关系 79 if (!didSetupConstraints) { 80 81 //给黑色视图添加约束关系 82 blackView.snp.makeConstraints { make in 83 //黑色视图约束在根视图的中心位置 84 make.center.equalTo(view) 85 //限制黑色视图的高度和高度 86 //将他们始终保持为100 87 make.size.equalTo(CGSize(width: 100, height: 100)) 88 } 89 90 //给红色视图添加约束关系 91 redView.snp.makeConstraints { make in 92 //将红色视图的顶点，约束在黑色视图的底边， 93 //并保持20点的距离。 94 make.top.equalTo(blackView.snp.bottom).offset(20.0) 95 //将红色视图的右边，约束在黑色视图的左边， 96 //并保持20点的距离。 97 make.right.equalTo(blackView.snp.left).offset(-20.0) 98 //约束红色视图的尺寸，将它们始终保持在100 99 make.size.equalTo(CGSize(width: 100, height: 100)) 100 } 101 102 //给黄色视图添加约束关系 103 yellowView.snp.makeConstraints { make in 104 //将黄色视图的顶点，约束在黑色视图的底边， 105 //并保持20点的距离。 106 make.top.equalTo(blackView.snp.bottom).offset(20.0) 107 //将黄色视图的左边，约束在黑色视图的右边， 108 //并保持20点的距离。 109 make.left.equalTo(blackView.snp.right).offset(20.0) 110 //约束黄色视图的尺寸，将它们始终保持在100 111 make.size.equalTo(CGSize(width: 100, height: 100)) 112 } 113 114 //给蓝色视图添加约束关系 115 blueView.snp.makeConstraints { make in 116 //将蓝色视图的底边，约束在黑色视图的顶边， 117 //并保持20点的距离。 118 make.bottom.equalTo(blackView.snp.top).offset(-20.0) 119 //将蓝色视图的左边，约束在黑色视图的右边， 120 //并保持20点的距离。 121 make.left.equalTo(blackView.snp.right).offset(20.0) 122 //约束蓝色视图的尺寸，将它们始终保持在100 123 make.size.equalTo(CGSize(width: 100, height: 100)) 124 } 125 126 //给绿色视图添加约束关系 127 greenView.snp.makeConstraints { make in 128 //将绿色视图的底边，约束在黑色视图的顶边， 129 //并保持20点的距离。 130 make.bottom.equalTo(blackView.snp.top).offset(-20.0) 131 //将蓝色视图的右边边，约束在黑色视图的左边， 132 //并保持20点的距离。 133 make.right.equalTo(blackView.snp.left).offset(-20.0) 134 //约束绿色视图的尺寸，将它们始终保持在100 135 make.size.equalTo(CGSize(width: 200, height: 100)) 136 } 137 138 //更改布尔变量的值，标识当前已经完成五个视图的约束 139 didSetupConstraints = true 140 } 141 142 //调用父对象的刷新视图约束的方法 143 super.updateViewConstraints() 144 } 145 146 override func didReceiveMemoryWarning() { 147 super.didReceiveMemoryWarning() 148 // Dispose of any resources that can be recreated. 149 } 150 }
