6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]
1. 本节课将通过一个复杂的实例项目，演示布局框架的使用。首先在左侧的项目导航区，打开视图控制器的代码文件。
2. 接着在当前的类文件中，引入已经安装的第三方类库。
3. 引入相关类库之后，开始编写代码，使用布局的方法，搭建一个用户界面。
4. 添加一个视图变量，作为界面上的搜索栏。
5. 接着添加一个文本框，放在搜索栏视图中。
6. 接着添加一个图像视图变量和一个视图变量，用来创建背景横条。
7. 添加一个图像视图变量，用来显示用户的头像。另一个标签控件，用来显示用户的名称。
8. 添加一个图像视图变量，作为摄像机按钮，当点击该按钮时，使用手机中的相机功能。
9. 接着添加三个视图变量，作为栏目缩略图的容器。
10. 依次添加四个按钮变量，作为背景横条正文的四个功能按钮。
11. 依次添加四个视图变量，作为四个功能按钮的容器。
12. 继续添加三个视图变量，作为三个缩略图的容器。
13. 添加三个图像视图变量，作为三个栏目的缩略图。
14. 接着添加三个标签变量，用来显示三个栏目的名称。
15. 设置根视图的背景颜色。
16. 从项目中加载一张图片素材。
17. 然后初始化一个图像视图，用来显示加载的图片。
18. 设置图像视图的内容模式为居中，当图片尺寸超过图像视图时，图像将居中显示在图像视图的显示区域。
19. 将图像视图添加到根视图。
20. 初始化一个视图对象，作为搜索框视图。
21. 设置搜索框视图的背景颜色，然后将视图添加到根视图。
22. 初始化一个文本框，作为搜索输入框。
23. 设置输入框的背景颜色。
24. 接着设置输入框的边框样式和文字对齐方式。
25. 设置输入框的字体属性。
26. 初始化一个样式字典对象，用来设置输入框的占位符的文字颜色。
27. 初始化一个属性字符串常量。
28. 然后设置输入框的占位符属性。
29. 设置输入框的文字颜色，并将输入框添加到搜索栏视图中。
30. 接着从项目中加载一张图片素材，将初始化一个图像视图显示该图片，作为用户的头像。
31. 给图像视图添加宽度为2的边框，并设置边框的颜色为白色。
32. 将头像添加到横条图像视图中。
33. 初始化一个标签控件。
34. 设置标签控件的文字内容和字体颜色。
35. 设置标签控件的字体属性，并设置标签控件可以显示两行文字。
36. 将标签控件也添加到横条图像视图中。
37. 从项目中加载一张相机图片。
38. 然后初始化一个图像视图，显示该图片，将图像视图也添加到横条视图中。
39. 接着初始化一个视图对象，该视图对象将作为四个功能按钮的容器。
40. 设置视图对象的背景颜色为白色。
41. 给视图对象的层添加一个投影效果，并设置阴影的颜色和偏移距离。
42. 接着设置阴影的不透明度和半径。
43. 将视图对象添加到根视图。
44. 接着初始化另一个视图对象，该视图对象将作为第一个功能按钮的容器。
45. 从项目中加载一张图片素材。
46. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
47. 将按钮控件添加到视图容器中。
48. 初始化另一个视图对象，该视图对象将作为第二个功能按钮的容器。
49. 从项目中加载一张图片素材。
50. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
51. 将按钮控件添加到视图容器中。
52. 使用相同的方式，初始化一个视图对象，作为第三个功能按钮的容器。
53. 从项目中加载一张图片素材。
54. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
55. 设置按钮控件内容的显示区域。
56. 将按钮控件添加到视图容器中。
57. 初始化一个视图对象，作为最后一个功能按钮的容器。
58. 从项目中加载一张图片素材。
59. 初始化一个按钮控件。
60. 设置按钮在正常状态下的图像属性。
61. 将按钮控件添加到视图容器中。
62. 接着将四个功能按钮的容器视图，添加到白色背景的视图中。
63. 初始化第二个内容视图对象，并将视图对象添加到根视图。
64. 依次初始化三个缩略图的容器视图，作为三个栏目的缩略图的容器。
65. 从项目中依次加载三张图片资源，作为栏目的缩略图。
66. 初始化三个图像视图，用来显示三个缩略图。
67. 设置三个图像视图，拥有相同的内容模式。
68. 设置图像视图的层的裁切属性，对边缘进行裁切，只显示图像中间的内容。
69. 将三个图像视图，添加到缩略图视图容器中。
70. 然后将三个缩略图容器，添加到第二个内容视图。
71. 接着初始化三个标签控件，用来显示栏目的名称。
72. 设置三个标签控件的背景颜色为白色。
73. 给三个标签控件设置文字内容。
74. 设置标签控件的文字对齐方式。
75. 接着设置标签控件的字体属性。
76. 将三个标签控件，添加到缩略图容器中。
77. 添加一个方法，用来处理对子视图进行重新布局的事件。
78. 首先获得当前设备的朝向是否为横向。
79. 接着设置横条视图的高度，为根视图高度的0.43倍。
80. 根据屏幕的朝向，设置不同的用户头像视图区域的高度。
81. 根据屏幕的朝向，设置不同的搜索条的高度。
82. 通过计算获得头像的尺寸。
83. 将横条视图约束在屏幕的顶部位置，并设置视图的间距和高度属性。
84. 将搜索条同样约束在屏幕的顶部位置，并设置搜索条的间距和高度属性。
85. 将搜索输入框约束在搜索条的顶部，和父视图在水平方向上保持15点的距离，垂直方向上保持6点的距离，输入框的高度为24。
86. 将头像视图约束在父视图的左下角，并设置头像视图和父视图的间距为15。
87. 将用来显示用户名称的标签控件，约束在头像视图的右侧居中的位置，并设置和头像视图的间距，以及自身的高度。
88. 接着将摄像按钮，约束在父视图的右下角，并设置和父视图之间的距离，以及自身的尺寸。
89. 然后将四个功能按钮所在的容器视图，约束在横条视图的下方并居中对齐，同时设置容器视图的高度为62。
90. 然后通过组约束的方式，将容器视图中的四个功能按钮，在水平方向上进行等距排列，并设置间距为10。
91. 给四个功能按钮添加约束关系，将它们放置在父视图的中心位置，同时设置它们的尺寸信息。
92. 接着将第二个，用来显示栏目缩略图的容器视图，约束在第一个容器视图的正下方，并设置高度为108。
93. 通过组约束的方式，将容器视图中的三个栏目视图，在水平方向上进行等距排列，并设置间距为10。
94. 依次设置三个栏目视图的约束关系，将它们约束在父视图的顶部，并设置它们的尺寸信息。
95. 接着设置三个栏目标签的约束关系，将它们约束在父视图的底部，和栏目的缩略图垂直居中，并设置它们的尺寸信息。
96. 最后设置设备的顶部状态栏的样式，接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。
97. 模拟器启动后，在屏幕上显示了添加约束后的用户界面。接着查看界面在横屏时的效果，依次点击[硬件 > 向左旋转]命令。
本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载
0
2. 接着在当前的类文件中，引入已经安装的第三方类库。
3. 引入相关类库之后，开始编写代码，使用布局的方法，搭建一个用户界面。
4. 添加一个视图变量，作为界面上的搜索栏。
5. 接着添加一个文本框，放在搜索栏视图中。
6. 接着添加一个图像视图变量和一个视图变量，用来创建背景横条。
7. 添加一个图像视图变量，用来显示用户的头像。另一个标签控件，用来显示用户的名称。
8. 添加一个图像视图变量，作为摄像机按钮，当点击该按钮时，使用手机中的相机功能。
9. 接着添加三个视图变量，作为栏目缩略图的容器。
10. 依次添加四个按钮变量，作为背景横条正文的四个功能按钮。
11. 依次添加四个视图变量，作为四个功能按钮的容器。
12. 继续添加三个视图变量，作为三个缩略图的容器。
13. 添加三个图像视图变量，作为三个栏目的缩略图。
14. 接着添加三个标签变量，用来显示三个栏目的名称。
15. 设置根视图的背景颜色。
16. 从项目中加载一张图片素材。
17. 然后初始化一个图像视图，用来显示加载的图片。
18. 设置图像视图的内容模式为居中，当图片尺寸超过图像视图时，图像将居中显示在图像视图的显示区域。
19. 将图像视图添加到根视图。
20. 初始化一个视图对象，作为搜索框视图。
21. 设置搜索框视图的背景颜色，然后将视图添加到根视图。
22. 初始化一个文本框，作为搜索输入框。
23. 设置输入框的背景颜色。
24. 接着设置输入框的边框样式和文字对齐方式。
25. 设置输入框的字体属性。
26. 初始化一个样式字典对象，用来设置输入框的占位符的文字颜色。
27. 初始化一个属性字符串常量。
28. 然后设置输入框的占位符属性。
29. 设置输入框的文字颜色，并将输入框添加到搜索栏视图中。
30. 接着从项目中加载一张图片素材，将初始化一个图像视图显示该图片，作为用户的头像。
31. 给图像视图添加宽度为2的边框，并设置边框的颜色为白色。
32. 将头像添加到横条图像视图中。
33. 初始化一个标签控件。
34. 设置标签控件的文字内容和字体颜色。
35. 设置标签控件的字体属性，并设置标签控件可以显示两行文字。
36. 将标签控件也添加到横条图像视图中。
37. 从项目中加载一张相机图片。
38. 然后初始化一个图像视图，显示该图片，将图像视图也添加到横条视图中。
39. 接着初始化一个视图对象，该视图对象将作为四个功能按钮的容器。
40. 设置视图对象的背景颜色为白色。
41. 给视图对象的层添加一个投影效果，并设置阴影的颜色和偏移距离。
42. 接着设置阴影的不透明度和半径。
43. 将视图对象添加到根视图。
44. 接着初始化另一个视图对象，该视图对象将作为第一个功能按钮的容器。
45. 从项目中加载一张图片素材。
46. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
47. 将按钮控件添加到视图容器中。
48. 初始化另一个视图对象，该视图对象将作为第二个功能按钮的容器。
49. 从项目中加载一张图片素材。
50. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
51. 将按钮控件添加到视图容器中。
52. 使用相同的方式，初始化一个视图对象，作为第三个功能按钮的容器。
53. 从项目中加载一张图片素材。
54. 初始化一个按钮控件，并设置按钮在正常状态下的图像属性。
55. 设置按钮控件内容的显示区域。
56. 将按钮控件添加到视图容器中。
57. 初始化一个视图对象，作为最后一个功能按钮的容器。
58. 从项目中加载一张图片素材。
59. 初始化一个按钮控件。
60. 设置按钮在正常状态下的图像属性。
61. 将按钮控件添加到视图容器中。
62. 接着将四个功能按钮的容器视图，添加到白色背景的视图中。
63. 初始化第二个内容视图对象，并将视图对象添加到根视图。
64. 依次初始化三个缩略图的容器视图，作为三个栏目的缩略图的容器。
65. 从项目中依次加载三张图片资源，作为栏目的缩略图。
66. 初始化三个图像视图，用来显示三个缩略图。
67. 设置三个图像视图，拥有相同的内容模式。
68. 设置图像视图的层的裁切属性，对边缘进行裁切，只显示图像中间的内容。
69. 将三个图像视图，添加到缩略图视图容器中。
70. 然后将三个缩略图容器，添加到第二个内容视图。
71. 接着初始化三个标签控件，用来显示栏目的名称。
72. 设置三个标签控件的背景颜色为白色。
73. 给三个标签控件设置文字内容。
74. 设置标签控件的文字对齐方式。
75. 接着设置标签控件的字体属性。
76. 将三个标签控件，添加到缩略图容器中。
77. 添加一个方法，用来处理对子视图进行重新布局的事件。
78. 首先获得当前设备的朝向是否为横向。
79. 接着设置横条视图的高度，为根视图高度的0.43倍。
80. 根据屏幕的朝向，设置不同的用户头像视图区域的高度。
81. 根据屏幕的朝向，设置不同的搜索条的高度。
82. 通过计算获得头像的尺寸。
83. 将横条视图约束在屏幕的顶部位置，并设置视图的间距和高度属性。
84. 将搜索条同样约束在屏幕的顶部位置，并设置搜索条的间距和高度属性。
85. 将搜索输入框约束在搜索条的顶部，和父视图在水平方向上保持15点的距离，垂直方向上保持6点的距离，输入框的高度为24。
86. 将头像视图约束在父视图的左下角，并设置头像视图和父视图的间距为15。
87. 将用来显示用户名称的标签控件，约束在头像视图的右侧居中的位置，并设置和头像视图的间距，以及自身的高度。
88. 接着将摄像按钮，约束在父视图的右下角，并设置和父视图之间的距离，以及自身的尺寸。
89. 然后将四个功能按钮所在的容器视图，约束在横条视图的下方并居中对齐，同时设置容器视图的高度为62。
90. 然后通过组约束的方式，将容器视图中的四个功能按钮，在水平方向上进行等距排列，并设置间距为10。
91. 给四个功能按钮添加约束关系，将它们放置在父视图的中心位置，同时设置它们的尺寸信息。
92. 接着将第二个，用来显示栏目缩略图的容器视图，约束在第一个容器视图的正下方，并设置高度为108。
93. 通过组约束的方式，将容器视图中的三个栏目视图，在水平方向上进行等距排列，并设置间距为10。
94. 依次设置三个栏目视图的约束关系，将它们约束在父视图的顶部，并设置它们的尺寸信息。
95. 接着设置三个栏目标签的约束关系，将它们约束在父视图的底部，和栏目的缩略图垂直居中，并设置它们的尺寸信息。
96. 最后设置设备的顶部状态栏的样式，接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。
97. 模拟器启动后，在屏幕上显示了添加约束后的用户界面。接着查看界面在横屏时的效果，依次点击[硬件 > 向左旋转]命令。
本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载
下一篇：6.7 通过group命令实现对多个视图的统一约束 [iOS开发中的神兵利器]
[按键盘← → 左右方向键也可以翻页哦~]
[按键盘← → 左右方向键也可以翻页哦~]
相关文章
互动教程列表，真正的手把手教学模式，点击或扫码下载
