1. 本节课将为您演示其它的几种约束关系。在左侧的项目导航区，打开视图控制器的代码文件。
image
2. 接着开始编写代码，首先实现如何通过约束关系，使子视图以指定的格式对父视图进行填充。
image
image
image
image
image
image
image
image
10. 将视图对象填充父视图，并设置父子视图在四个方向上的间距。
image
11. 在视图加载完成的方法中，调用您刚刚创建的视图填充的示例方法。接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。
image
image
image
14. 我们将在该方法中，演示如何将视图对象，约束在父视图的某个角落。
image
image
16. 接着初始化一个角落位置数组，作为四个视图在父视图中的约束位置。
image
17. 创建两个浮点常量，分别表示视图之间的距离，和视图的尺寸。
image
image
image
20. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。
image
21. 根据循环的索引，从约束数组中，获得对应的元素，作为视图对象的角落约束，将视图对象约束在父视图的指定位置，并设置父子视图在四个方向的间距。
image
22. 接着修改视图加载完成事件中的方法名称，然后点击左上角的[编译并运行]按钮，再次启动模拟器预览项目。
image
23. 模拟器启动后，四个不同颜色的视图对象，分别位于根视图的四个角落，并和父视图保持相同的间距。点击此处的[停止]按钮，关闭模拟器。
image
image
image
26. 我们将在该方法中，演示如何将视图对象，约束在父视图的四个边缘。
image
27. 首先初始化一个指定显示区域的视图对象，作为其它自定义视图对象的父视图。
image
28. 接着设置视图对象的背景颜色为黑色，并将视图对象添加到根视图。
image
image
30. 接着初始化一个边缘位置数组，作为四个视图在父视图中的边缘位置。
image
31. 创建两个浮点常量，分别表示视图之间的距离，和视图的尺寸。
image
image
image
34. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。
image
35. 根据循环的索引，从约束数组中，获得对应的元素，作为视图对象的边缘约束，将视图对象约束在父视图的指定位置，并设置父子视图在四个方向的间距。
image
image
37. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。
image
38. 模拟器启动后，四个不同颜色的视图对象，分别位于根视图的四个边缘，并和父视图保持相同的间距。点击此处的[停止]按钮，关闭模拟器。
image
image
image
41. 我们将在该方法中，演示如何将视图对象，约束并填充父视图的边缘。
image
image
43. 接着初始化一个边缘位置数组，作为四个视图在父视图中的边缘位置。
image
44. 创建两个浮点常量，分别表示视图之间的距离，和视图的尺寸。
image
45. 首先初始化一个指定显示区域的视图对象，作为其它自定义视图对象的父视图。同时设置视图对象的背景颜色为浅灰色。
image
image
image
image
49. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。
image
50. 从约束数组中，获得对应的元素，作为视图对象的边缘约束，将视图对象约束并填充父视图的指定位置，并设置父子视图在四个方向的间距。
image
51. 初始化另一个指定显示区域的视图对象，作为其它两个自定义视图对象的父视图。
image
52. 接着设置视图对象的背景颜色为浅灰色，并将视图对象添加到根视图。
image
image
image
55. 根据循环的索引，从颜色数组中，获得对应的元素，作为视图的背景颜色。并将视图对象添加到父视图。
image
56. 使用相同的方式，给视图对象添加约束关系，接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。
image
image
58. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。
image
59. 在上下两个灰色视图中，四个子视图分别位于父视图的四个边缘，并分别在水平和垂直方向填满四个边缘。最后点击此处的[停止]按钮，结束本节课程。
image
本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载
apps8 2.png
网友评论