2.10 快速添加日期选择/多选/动作表单/地图等自定义表单 [

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. 添加一个字符串类型的片段行，并设置该行的标题，以及拥有两个选项。

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. 接着添加一个10次的循环语句，设置行的选项列表。

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. 在标签行上点击，标签行的文字将发生变化。

76. 此时标签上多了一个旗帜图标，继续点击该表单行。

image

77. 在此行的上方点击，可以修改当前的选择状态。

image

78. 继续点击可以恢复选择的状态。

image

79. 点击开关按钮可以切换开关控件的状态。

image

80. 在滑杆上点击，可以快速调整滑杆的数值。

image

81. 然后在步进组件上点击，并观察左侧数字的变化。

image

82. 在分段控件上点击，可以选择分段组件中的某个选项。

image

83. 同样可以在表情图标分段上点击，选择分段控件中的某个选项。

image

image

85. 在下方的圆点处按下手指，并向上拖动，查看下方的表单区域。

image

86. 在动作表单行上点击，可以弹出一个动作表单。

image

87. 然后选择一个动作选项，并观察动作表单行的变化。

image

88. 在警告表单行上点击，将弹出一个警告窗口。

image

89. 在弹出的警告窗口中，可以点击选择一个选项，同时观察警告表单行的变化。

image

90. 在下方的圆点处按下手指，并向上拖动，查看下方的表单区域。

image

91. 在当前的表单区域，显示了文本、数字、网址、手机号码、密码、邮箱等类型的表单行，它们的值都有相应的格式。最后点击[停止]按钮结束本节课程。

image

image

image

image

image

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

apps8 2.png