6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]

1. 本节课将通过一个复杂的实例项目,演示布局框架的使用。首先在左侧的项目导航区,打开视图控制器的代码文件。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第1张图片
image

2. 接着在当前的类文件中,引入已经安装的第三方类库。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第2张图片
image

3. 引入相关类库之后,开始编写代码,使用布局的方法,搭建一个用户界面。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第3张图片
image

4. 添加一个视图变量,作为界面上的搜索栏。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第4张图片
image

5. 接着添加一个文本框,放在搜索栏视图中。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第5张图片
image

6. 接着添加一个图像视图变量和一个视图变量,用来创建背景横条。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第6张图片
image

7. 添加一个图像视图变量,用来显示用户的头像。另一个标签控件,用来显示用户的名称。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第7张图片
image

8. 添加一个图像视图变量,作为摄像机按钮,当点击该按钮时,使用手机中的相机功能。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第8张图片
image

9. 接着添加三个视图变量,作为栏目缩略图的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第9张图片
image

10. 依次添加四个按钮变量,作为背景横条下方的四个功能按钮。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第10张图片
image

11. 依次添加四个视图变量,作为四个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第11张图片
image

12. 继续添加三个视图变量,作为三个缩略图的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第12张图片
image

13. 添加三个图像视图变量,作为三个栏目的缩略图。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第13张图片
image

14. 接着添加三个标签变量,用来显示三个栏目的名称。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第14张图片
image

15. 设置根视图的背景颜色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第15张图片
image

16. 从项目中读取一张图片素材。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第16张图片
image

17. 然后初始化一个图像视图,用来显示加载的图片。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第17张图片
image

18. 设置图像视图的内容模式为居中,当图片尺寸超过图像视图时,图像将居中显示在图像视图的显示区域。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第18张图片
image

19. 将图像视图添加到根视图。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第19张图片
image

20. 初始化一个视图对象,作为搜索框视图。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第20张图片
image

21. 设置搜索框视图的背景颜色,然后将视图添加到根视图。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第21张图片
image

22. 初始化一个文本框,作为搜索输入框。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第22张图片
image

23. 设置输入框的背景颜色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第23张图片
image

24. 接着设置输入框的边框样式和文字对齐方式。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第24张图片
image

25. 设置输入框的字体属性。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第25张图片
image

26. 初始化一个样式字典对象,用来设置输入框的占位符的文字颜色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第26张图片
image

27. 初始化一个属性字符串常量。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第27张图片
image

28. 然后设置输入框的占位符属性。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第28张图片
image

29. 设置输入框的文字颜色,并将输入框添加到搜索栏视图中。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第29张图片
image

30. 接着从项目中读取一张图片素材,将初始化一个图像视图显示该图片,作为用户的头像。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第30张图片
image

31. 给图像视图添加宽度为2的边框,并设置边框的颜色为白色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第31张图片
image

32. 将头像添加到图像视图中。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第32张图片
image

33. 初始化一个标签控件。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第33张图片
image

34. 设置标签控件的文字内容和字体颜色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第34张图片
image

35. 设置标签的字体属性,并设置标签控件可以显示两行文字。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第35张图片
image

36. 将标签控件也添加到横条图像视图中。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第36张图片
image

37. 从项目中读取一张相机图片。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第37张图片
image

38. 然后初始化一个图像视图,显示该图片,将图像视图也添加到横条视图中。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第38张图片
image

39. 接着初始化一个视图对象,该视图对象将作为四个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第39张图片
image

40. 设置视图对象的背景颜色为白色。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第40张图片
image

41. 给视图对象的层添加一个投影效果,并设置阴影的颜色和偏移距离。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第41张图片
image

42. 接着设置阴影的不透明度和半径。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第42张图片
image

43. 将视图对象添加到根视图。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第43张图片
image

44. 接着初始化另一个视图对象,该视图对象将作为第一个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第44张图片
image

45. 从项目中读取一张图片素材。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第45张图片
image

46. 初始化一个按钮控件,并设置按钮在正常状态下的图像属性。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第46张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第47张图片
image

48. 初始化另一个视图对象,该视图对象将作为第二个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第48张图片
image

49. 从项目中读取一张图片素材。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第49张图片
image

50. 初始化一个按钮控件,并设置按钮在正常状态下的图像属性。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第50张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第51张图片
image

52. 使用相同的方式,初始化一个视图对象,作为第三个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第52张图片
image

53. 从项目中读取一张图片素材。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第53张图片
image

54. 初始化一个按钮控件,并设置按钮在正常状态下的图像属性。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第54张图片
image

55. 设置按钮控件内容的显示区域。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第55张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第56张图片
image

57. 初始化一个视图对象,作为最后一个功能按钮的容器。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第57张图片
image

58. 从项目中读取一张图片素材。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第58张图片
image

59. 初始化一个按钮控件。

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第59张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第60张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第61张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第62张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第63张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第64张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第65张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第66张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第67张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第68张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第69张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第70张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第71张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第72张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第73张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第74张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第75张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第76张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第77张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第78张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第79张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第80张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第81张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第82张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第83张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第84张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第85张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第86张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第87张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第88张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第89张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第90张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第91张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第92张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第93张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第94张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第95张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第96张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第97张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第98张图片
image

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

6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器]_第99张图片
apps8 2.png

你可能感兴趣的:(6.8 实例项目演示Neon的使用/项目在横屏竖屏都能够完美显示 [iOS开发中的神兵利器])