6.6 父视图约束/Corner约束/Edge约束/AnchorAndFillEdge约束 [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. 然后通过一个四次的循环语句，依次创建四个视图对象。

image

19. 初始化一个视图对象。

image

20. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。

image

21. 根据循环的索引，从约束数组中，获得对应的元素，作为视图对象的角落约束，将视图对象约束在父视图的指定位置，并设置父子视图在四个方向的间距。

image

22. 接着修改视图加载完成事件中的方法名称，然后点击左上角的[编译并运行]按钮，再次启动模拟器预览项目。

image

23. 模拟器启动后，四个不同颜色的视图对象，分别位于根视图的四个角落，并和父视图保持相同的间距。点击此处的[停止]按钮，关闭模拟器。

image

24. 点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

25. 接着添加另一个方法。

image

26. 我们将在该方法中，演示如何将视图对象，约束在父视图的四个边缘。

image

27. 首先初始化一个指定显示区域的视图对象，作为其它自定义视图对象的父视图。

image

28. 接着设置视图对象的背景颜色为黑色，并将视图对象添加到根视图。

image

29. 同样初始化一个颜色数组，作为四个视图的背景颜色。

image

30. 接着初始化一个边缘位置数组，作为四个视图在父视图中的边缘位置。

image

31. 创建两个浮点常量，分别表示视图之间的距离，和视图的尺寸。

image

32. 然后通过一个四次的循环语句，依次创建四个视图对象。

image

33. 初始化一个视图对象。

image

34. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。

image

35. 根据循环的索引，从约束数组中，获得对应的元素，作为视图对象的边缘约束，将视图对象约束在父视图的指定位置，并设置父子视图在四个方向的间距。

image

36. 修改此处的方法名称。

image

37. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

38. 模拟器启动后，四个不同颜色的视图对象，分别位于根视图的四个边缘，并和父视图保持相同的间距。点击此处的[停止]按钮，关闭模拟器。

image

39. 点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

40. 接着添加另一个方法。

image

41. 我们将在该方法中，演示如何将视图对象，约束并填充父视图的边缘。

image

42. 同样初始化一个颜色数组，作为四个视图的背景颜色。

image

43. 接着初始化一个边缘位置数组，作为四个视图在父视图中的边缘位置。

image

44. 创建两个浮点常量，分别表示视图之间的距离，和视图的尺寸。

image

45. 首先初始化一个指定显示区域的视图对象，作为其它自定义视图对象的父视图。同时设置视图对象的背景颜色为浅灰色。

image

46. 将父视图添加到根视图中。

image

47. 然后通过一个两次的循环语句，依次创建两个视图对象。

image

48. 初始化一个视图对象。

image

49. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。

image

50. 从约束数组中，获得对应的元素，作为视图对象的边缘约束，将视图对象约束并填充父视图的指定位置，并设置父子视图在四个方向的间距。

image

51. 初始化另一个指定显示区域的视图对象，作为其它两个自定义视图对象的父视图。

image

52. 接着设置视图对象的背景颜色为浅灰色，并将视图对象添加到根视图。

image

53. 然后通过一个两次的循环语句，依次创建两个视图对象。

image

54. 初始化一个视图对象。

image

55. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。

image

56. 使用相同的方式，给视图对象添加约束关系，接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

57. 修改此处的方法名称。

image

58. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

59. 在上下两个灰色视图中，四个子视图分别位于父视图的四个边缘，并分别在水平和垂直方向填满四个边缘。最后点击此处的[停止]按钮，结束本节课程。

image

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

apps8 2.png