6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]

1. 本节课将为您演示,如何给位于滚动视图中的标签视图,添加约束关系。首先在左侧的项目导航区,打开视图控制器的代码文件。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第1张图片
image

2. 接着开始编写代码,创建一个滚动视图,并在滚动视图中添加一个标签控件。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第2张图片
image

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

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第3张图片
image

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

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第4张图片
image

5. 接着依次初始化一个滚动视图控件,和一个内容视图控件,作为当前类的两个属性。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第5张图片
image

6. 添加一个标签控件,作为当前类的第四个属性。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第6张图片
image

7. 对标签进行初始化操作,然后设置标签的背景颜色为橙色。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第7张图片
image

8. 设置标签不限制内容的行数。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第8张图片
image

9. 设置文字在超过标签视图边界时的换行模式:按单词分割换行,标签末尾不会出现被分割的单词。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第9张图片
image

10. 设置标签控件的文字颜色为白色。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第10张图片
image

11. 接着设置标签的文字内容,并返回设置好的标签控件。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第11张图片
image

12. 将滚动视图添加到根视图中。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第12张图片
image

13. 设置内容视图的背景颜色为棕色。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第13张图片
image

14. 将内容视图添加到滚动视图中。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第14张图片
image

15. 然后将标签添加到内容视图中。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第15张图片
image

16. 调用视图对象的刷新约束的方法。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第16张图片
image

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

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第17张图片
image

18. 当还没有给视图对象添加约束时,给五个视图添加约束关系。首先给滚动视图添加约束关系。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第18张图片
image

19. 在滚动视图和根视图之间建立约束关系,设置滚动视图和根视图的边距为0,即滚动视图的显示区域,始终和根视图保持相同。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第19张图片
image

20. 接着给内容视图添加约束关系。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第20张图片
image

21. 在内容视图和滚动视图之间建立约束关系,设置内容视图和滚动视图的边距为0,即内容视图的显示区域,始终和滚动视图保持相同。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第21张图片
image

22. 设置内容视图的宽度,等于滚动视图的宽度。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第22张图片
image

23. 继续给标签对象添加约束关系。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第23张图片
image

24. 设置标签对象的顶边和底边,与父视图保持20点的间距。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第24张图片
image

25. 设置标签对象的左边和右边,同样和父视图保持20点的间距。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第25张图片
image

26. 然后更改布尔变量的值,标识当前已经完成对三个控件的约束。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第26张图片
image

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

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第27张图片
image

28. 模拟器启动后,在屏幕上显示一个位于内容视图内的标签视图,它们的间距约束为20点。最后点击此处的[停止]按钮,关闭模拟器并结束本节课程。

6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器]_第28张图片
image

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

apps8 2.png

你可能感兴趣的:(6.3 添加edges/top/bottom/leading/trailing的约束 [iOS开发中的神兵利器])