6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示

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. 给图像视图添加宽度为2的边框，并设置边框的颜色为白色。

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

60. 设置按钮在正常状态下的图像属性。

image

61. 将按钮控件添加到视图容器中。

image

62. 接着将四个功能按钮的容器视图，添加到白色背景的视图中。

image

63. 初始化第二个内容视图对象，并将视图对象添加到根视图。

image

64. 依次初始化三个缩略图的容器视图，作为三个栏目的缩略图的容器。

image

65. 从项目中依次加载三张图片资源，作为栏目的缩略图。

image

66. 初始化三个图像视图，用来显示三个缩略图。

image

67. 设置三个图像视图，拥有相同的内容模式。

image

68. 设置图像视图的层的裁切属性，对边缘进行裁切，只显示图像中间的内容。

image

69. 将三个图像视图，添加到缩略图视图容器中。

image

70. 然后将三个缩略图容器，添加到第二个内容视图。

image

71. 接着初始化三个标签控件，用来显示栏目的名称。

image

72. 设置三个标签控件的背景颜色为白色。

image

73. 给三个标签控件设置文字内容。

image

74. 设置标签控件的文字对齐方式。

image

75. 接着设置标签的字体属性。

image

76. 将三个标签控件，添加到缩略图容器中。

image

77. 添加一个方法，用来处理对子视图进行重新布局的事件。

image

78. 首先获得当前设备的朝向是否为横向。

image

79. 接着设置横条视图的高度，为根视图高度的0.43倍。

image

80. 根据屏幕的朝向，设置不同的用户头像视图区域的高度。

image

81. 根据屏幕的朝向，设置不同的搜索条的高度。

image

82. 通过计算获得头像的尺寸。

image

83. 将横条视图约束在屏幕的顶部位置，并设置视图的间距和高度属性。

image

84. 将搜索条同样约束在屏幕的顶部位置，并设置搜索条的间距和高度属性。

image

85. 将搜索输入框约束在搜索条的顶部，和父视图在水平方向上保持15点的距离，垂直方向上保持6点的距离，输入框的高度为24。

image

86. 将头像视图约束在父视图的左下角，并设置头像视图和父视图的间距为15。

image

87. 将用来显示用户名称的标签控件，约束在头像视图的右侧居中的位置，并设置标签和头像视图的间距，以及自身的高度。

image

88. 接着将摄像按钮，约束在父视图的右下角，并设置和父视图之间的距离，以及自身的尺寸。

image

89. 然后将四个功能按钮所在的容器视图，约束在横条视图的下方并居中对齐，同时设置容器视图的高度为62。

image

90. 然后通过组约束的方式，将容器视图中的四个功能按钮，在水平方向上进行等距排列，并设置间距为10。

image

91. 给四个功能按钮添加约束关系，将它们放置在父视图的中心位置，同时设置它们的尺寸信息。

image

92. 接着将第二个，用来显示栏目缩略图的容器视图，约束在第一个容器视图的正下方，并设置高度为108。

image

93. 通过组约束的方式，将容器视图中的三个栏目视图，在水平方向上进行等距排列，并设置间距为10。

image

94. 依次设置三个栏目视图的约束关系，将它们约束在父视图的顶部，并设置它们的尺寸信息。

image

95. 接着设置三个栏目标签的约束关系，将它们约束在父视图的底部，和栏目的缩略图垂直居中，并设置它们的尺寸信息。

image

96. 最后设置设备的顶部状态栏的样式，接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

97. 模拟器启动后，在屏幕上显示了添加约束后的用户界面。接着查看界面在横屏时的效果，依次点击[硬件 > 向左旋转]命令。

image

99. 模拟器转换成横屏模式之后，用户界面根据约束关系，自动调整各个元素的位置和尺寸。最后点击此处的[停止]按钮，关闭模拟器并结束本节课程。

image

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

apps8 2.png