6.2 给视图添加针对其它视图位置进行偏移的约束 [iOS开发中

1. 本节课将为您演示，如何进行视图对象的相对约束。首先在左侧的项目导航区，打开视图控制器的代码文件。

image

2. 接着开始编写代码，设置在视图对象之间的，尺寸和位置上的约束关系。

image

3. 在当前的类文件中，引入已经安装的第三方类库。

image

4. 然后初始化一个布尔变量，用来标识是否已经给视图对象添加了约束关系。

image

5. 添加一个视图常量，作为当前类的一个属性。

image

6. 对视图进行初始化操作。

image

7. 设置视图的背景颜色为黑色，然后返回设置好的视图。

image

8. 接着添加另一个属性，该属性是一个红色的视图对象。

image

9. 使用相同的方式，添加第三个黄色的视图对象。

image

10. 添加第四个蓝色的视图对象。

image

11. 最后添加第五个绿色的视图对象。

image

12. 依次将五个视图对象，添加到视图控制器的根视图。

image

13. 接着执行根视图对象的约束刷新的动作。

image

14. 添加一个方法，用来刷新视图的约束关系。

image

15. 当还没有给视图对象添加约束时，给五个视图添加约束关系。

image

16. 首先给黑色视图添加约束关系。

image

17. 将黑色视图约束在根视图的中心位置。

image

18. 并且限制黑色视图的宽度和高度，将它们始终保持为100。

image

19. 接着给红色视图添加约束关系。

image

20. 将红色视图的顶点，约束在黑色视图的底边，并保持20点的距离。

image

21. 将红色视图的右边，约束在黑色视图的左边，并保持-20点的距离。

image

22. 约束红色视图的尺寸，将它们始终保持为100。

image

23. 接着给黄色视图添加约束关系。

image

24. 将黄色视图的顶点，约束在黑色视图的底边，并保持20点的距离。

image

25. 将红色视图的左边，约束在黑色视图的右边，并保持20点的距离。

image

26. 同样约束黄色视图的尺寸，将它们始终保持为100。

image

27. 接着给蓝色视图添加约束关系。

image

28. 将蓝色视图的底边，约束在黑色视图的顶边，并保持-20点的距离。

image

29. 将蓝色视图的左边，约束在黑色视图的右边，并保持20点的距离。

image

30. 同样约束蓝色视图的尺寸，将它们始终保持为100。

image

31. 给绿色视图添加约束关系。

image

32. 将绿色视图的底边，约束在黑色视图的顶边，并保持-20点的距离。

image

33. 将绿色视图的右边，约束在黑色视图的左边，同样保持-20点的距离。

image

34. 约束绿色视图的尺寸，将它们始终限制为100。

image

35. 然后更改布尔变量的值，标识当前已经完成对五个视图的约束。

image

36. 最后调用父对象的刷新视图约束的方法，接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

37. 模拟器启动后，在屏幕上显示了五个视图，四个视图分别位于黑色视图的四周，并且在水平和垂直方向上，分别保持20点的距离。

image

本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载

apps8 2.png