1.19 创建Twitter/Youtube/Skype/Spotify风格动作表单 [iOS开发中的神兵利器]

1. 本节课将为您演示，如何快速制作多种风格的动作表单。首先确保已经安装了所需的第三方库，在此处双击查看Pod配置文件。

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. 添加第三个方法，用来创建其它风格的动作表单。

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. 继续点击此处的按钮，打开动作表单。

69. 选择动作列表中的取消选项，关闭动作表单。

image

70. 点击此处的[停止]按钮，关闭模拟器。

image

71. 再次修改此处的方法名称，测试另一个示例。

image

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

image

73. 点击此处的按钮，打开动作表单。

74. 选择动作列表中的某个选项。

image

75. 点击此处的[停止]按钮，关闭模拟器。

image

76. 继续修改此处的方法名称，测试下一个示例。

image

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

image

78. 点击此处的按钮，打开动作表单。

79. 选择动作列表中的取消选项，关闭动作表单。

image

80. 接着点击此处的[停止]按钮，关闭模拟器。

image

81. 修改此处的方法名称，测试最后一个表单示例。

image

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

image

83. 点击此处的按钮，打开动作表单。

84. 接着选择列表中的取消选项，可以关闭当前的表单。

image

85. 在本节课中，通过第三方控件创建了多种风格的动作表单，总会有一种风格满足您的需求。最后点击左上角的[停止]按钮，关闭模拟器，并结束本节课程。

image

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

apps8 2.png