5.7 针对UIView在frame/约束/旋转/缩放/圆角/各种手势的扩展 [iOS开发中的神兵利器]

1. 本节课将为您演示，针对视图类型的一些实用的扩展方法。首先在左侧的项目导航区，打开视图控制器的代码文件。

image

2. 接着开始编写代码，依次使用视图类型的各个扩展方法。

image

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

image

4. 添加一个方法，用来演示对视图类的初始化方法的扩展。

image

5. 通过设置视图对象的水平坐标、垂直坐标、宽度和高度信息，快速创建一个视图对象。

image

6. 设置视图对象的背景颜色为橙色。

image

7. 将视图对象添加到根视图，并在控制台输出视图的显示区域信息。

image

8. 通过设置视图对象的父视图，快速创建一个和父视图相同显示区域的子视图。

image

9. 设置视图的背景颜色为紫色，然后将视图添加到父视图中。

image

10. 使用相同的方式，创建第三个视图对象，另外设置父视图的内边距为20。

image

11. 设置视图的背景颜色为洋红色，然后将视图添加到指定的父视图中。

image

12. 在控制台输出子视图的显示区域。

image

13. 然后在视图加载完成的方法中，调用我们刚刚创建的自定义方法。接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

14. 当前页面上显示了一个紫色背景的视图，其内边距为20，在紫色视图中，包含一个洋红视图。橙色视图的显示区域和紫色视图相同，所以被紫色视图所遮挡。

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. 接着添加另一个方法。

image

32. 我们将在这个方法中，演示如何根据其它视图，确定另一个视图的位置和尺寸。

image

33. 首先初始化一个指定坐标和尺寸的视图对象。

image

34. 设置视图的背景颜色为灰色。

image

35. 接着初始化另一个视图对象，并设置该视图在水平方向上，位于上个视图右侧20点的位置。在垂直方向上，位于上个视图下方20点的位置。

image

36. 设置第二个视图的背景颜色为橙色。

image

37. 接着将两个视图，全部添加到根视图。然后点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

38. 修改此处的方法名称。

image

39. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

40. 模拟器启动后，显示了两个视图对象，其中橙色视图在灰色视图的右下方，与灰色视图在水平和垂直方向，各偏移20点的距离。

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. 接着修改代码，将视图在屏幕的Z轴方向上旋转四十五度。

image

61. 然后点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

62. 模拟器启动后，显示了一个在Z轴方向上旋转四十五度的视图对象。点击此处的[停止]按钮，关闭模拟器。

image

63. 接着添加另一个方法。

image

64. 该方法将用来演示视图的缩放操作。

image

65. 首先初始化一个指定坐标和尺寸的视图对象，该视图对象的宽度和高度都是100。

image

66. 设置视图对象的背景颜色为橙色。

image

67. 设置视图对象在水平方向上放大两倍，在垂直方向上放大四倍。

image

68. 将缩放后的视图对象，添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

69. 修改此处的方法名称。

image

70. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

71. 模拟器启动后，显示了一个在水平方向上放大两倍，在垂直方向上放大四倍的视图对象。点击此处的[停止]按钮，关闭模拟器。

image

72. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

73. 接着添加另一个方法。

image

74. 该方法将用来演示视图的圆角和边框操作。

image

75. 首先初始化一个指定坐标和尺寸的视图对象。

image

76. 接着设置视图的圆角半径为40。

image

77. 设置视图对象的背景颜色为橙色。

image

78. 然后设置视图对象的边框宽度为6，颜色为黑色，并将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

79. 修改此处的方法名称。

image

80. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

81. 模拟器启动后，显示了圆角半径为40，边框宽度为6的视图对象。点击此处的[停止]按钮，关闭模拟器。

image

82. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

83. 接着修改此处的代码，仅给视图添加底部的边框。

image

84. 点击左上角的[编译并运行]按钮，再次启动模拟器预览项目。

image

85. 模拟器启动后，显示了一个底部边框宽度为20，边框颜色为红色的视图对象。点击此处的[停止]按钮，关闭模拟器。

image

86. 点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

87. 接着添加另一个方法。

image

88. 该方法将用来演示，如何给视图快速添加触摸手势。

image

89. 首先初始化一个指定坐标和尺寸的视图对象。

image

90. 设置视图对象的背景颜色为橙色。

image

91. 给视图对象添加一个触摸手势，并设置在一个代码块中，响应触摸的事件。

image

92. 当视图对象被点击时，在控制台输出相应的日志信息。

image

93. 将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

94. 修改此处的方法名称。

image

95. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

96. 模拟器启动后，在此处的橙色视图上点击，并观察控制台的日志输出。

97. 此时在控制台输出了视图点击手势的日志信息。点击此处的[停止]按钮，关闭模拟器。

image

98. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

99. 接着修改代码，使用代理的方法，处理交互事件。

image

100. 视图的触摸事件，将由当前的控制器对象来处理。

image

101. 添加一个方法，响应视图的触摸事件。

image

102. 接着添加一个方法，演示如何给视图添加手指轻扫的手势。

image

103. 首先初始化一个指定坐标和尺寸的视图对象。

image

104. 设置视图对象的背景颜色为橙色。

image

105. 给视图对象添加一个轻扫手势，并设置在一个代码块中，响应触摸的事件。

image

106. 当视图对象被点击时，在控制台输出滑动手势的方向，以及手指的数目。

image

107. 将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

108. 修改此处的方法名称。

image

109. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

110. 模拟器启动后，在此处的橙色视图上手指轻扫，并观察控制台的日志输出。

111. 此时在控制台，输出了视图上的轻扫手势的日志信息。点击此处的[停止]按钮，关闭模拟器。

image

112. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

113. 接着添加另一个方法。

image

114. 该方法将用来演示，如何给视图快速添加拖拽手势。

image

115. 首先初始化一个指定坐标和尺寸的视图对象，并设置视图对象的背景颜色为橙色。

image

116. 获得视图中心点的位置。

image

117. 给视图对象添加一个拖拽手势，并设置在一个代码块中，响应触摸的事件。

image

118. 当手势事件处于开始状态时，获得视图此时的中心点的位置。

image

119. 接着获得拖拽手势在视图中的移动距离。

image

120. 然后通过计算，获得视图在经过拖拽之后的目标位置。

image

121. 刷新视图中心点的坐标，从而改变视图的位置。

image

122. 将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

123. 修改此处的方法名称。

image

124. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

125. 模拟器启动后，在上方的圆点处按下手指，并向下方拖动，移动视图的位置。

126. 此时视图被移至屏幕的右下角。点击此处的[停止]按钮，关闭模拟器。

image

127. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

128. 接着添加另一个方法。

image

129. 该方法将用来演示，如何给视图快速添加捏合手势。

image

130. 首先初始化一个指定坐标和尺寸的视图对象，并设置视图对象的背景颜色为橙色。

image

131. 给视图对象添加一个捏合手势，并设置在一个代码块中，响应触摸的事件。

image

132. 通过捏合手势的缩放比例，实时调整视图的显示比例。

image

133. 将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

134. 修改此处的方法名称。

image

135. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

136. 模拟器启动后，在右上方的圆点处按下手指，并向左下方拖动，缩小视图的显示比例，并观察控制台的日志输出。

137. 视图被缩小至一个较小的尺寸，在控制台输出了，视图缩放过程中的比例日志。

image

138. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

139. 接着添加另一个方法。

image

140. 该方法将用来演示，如何给视图快速添加长按手势。首先初始化一个指定坐标和尺寸的视图对象，并设置视图对象的背景颜色为橙色。

image

141. 给视图添加一个长按手势，并设置在一个代码块中，响应触摸的事件。

image

142. 当视图被长按时，使视图左右晃动三次。

image

143. 并给视图添加一个阴影。

image

144. 将视图对象添加到根视图。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

145. 修改此处的方法名称。

image

146. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

147. 模拟器启动后，在视图的上方长按手指，并观察视图的变化。

148. 此时视图增加了投影的效果，点击此处的[停止]按钮，关闭模拟器。

image

149. 然后点击右侧的垂直滚动条，跳转到编辑区的底部位置。

image

150. 接着添加另一个方法。

image

151. 该方法将用来演示，对按钮类型的扩展。

image

152. 使用扩展后的初始化语句，初始化一个按钮控件，并设置它的坐标、尺寸、目标和动作等属性。

image

153. 将按钮控件移动至根视图的中心位置。

image

154. 接着依次设置按钮控件，在正常状态和高亮状态时的背景颜色。

image

155. 设置按钮在正常状态下的标题文字。

image

156. 设置按钮的背景颜色为橙色，并将按钮添加到根视图。

image

157. 添加一个方法，用来响应按钮的点击事件。接着点击右侧的垂直滚动条，跳转到编辑区的顶部位置。

image

158. 修改此处的方法名称。

image

159. 然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

160. 模拟器启动后，点击此处的按钮控件，并观察控制台的日志输出。

161. 此时在底部的控制台，输出了按钮事件的日志信息。本节课为您讲解了大量的扩展实例，最好多复习几遍以上的知识。最后关闭模拟器，并结束本节课程。

image

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

apps8 2.png