iOS开发中的神兵利器

1.16 使用JTAppleCalendar制作漂亮的日历 [i

2018-04-11 本文已影响178人互动教程网

1. 本节课将为您演示，如何制作一款漂亮的日历。首先确保在您的项目中，已经安装了所需的第三方库，双击查看此处的Pod配置文件。

2. 根据配置文件中的相关设置，安装第三方库。安装完成之后，双击打开此处的项目文件。

3. 接着在项目文件夹上点击鼠标右键，弹出右键菜单。

4. 在弹出的右键菜单中，选择创建新文件选项。您将创建一个自定义的日历单元格。

5. 在弹出的文件模板选择窗口中，保持默认的选项，然后点击下一步按钮，进入下一步设置页面。

6. 在类名输入框内，输入类的名称。

7. 接着在父类名称输入框内，输入父类的名称。

8. 点击下一步按钮，进入下一步设置页面。

9. 保持默认的文件存储位置，点击创建按钮，完成文件的创建。

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

11. 继续在项目文件夹上点击鼠标右键，弹出右键菜单。

12. 在弹出的右键菜单中，选择创建新文件选项。这里需要创建和类文件进行绑定的故事板文件。

13. 在弹出的文件模板选择窗口中，选择视图选项。

14. 然后点击下一步按钮，进入下一步设置页面。

15. 在弹出的存储设置窗口中，输入文件的名称。

16. 最后点击创建按钮，完成文件的创建。

17. 在打开的故事板编辑界面，点击尺寸检查器图标，进入尺寸设置面板。

18. 接着依次设置视图的宽度和高度的数值。

20. 在组件库面板中，点击右侧的垂直滚动条，跳转到视图组件所在的位置。

21. 然后将视图从组件库中，拖动到故事板中。

22. 同样依次设置视图的坐标和尺寸信息。

26. 接着点击属性检查器图标，进入属性设置面板。

27. 点击背景颜色右侧的下拉箭头，弹出颜色预设面板。

28. 在弹出的颜色预设面板中，选择一种颜色作为视图的背景颜色。

29. 接着往故事板中添加一个标签控件，点击右侧的垂直滚动条，跳转到标签控件所在的位置。

30. 同样将标签组件拖动到故事板中。

31. 点击字体右侧的下拉箭头，缩小文字的尺寸。

32. 然后点击字体颜色右侧的下拉箭头，设置字体的颜色。

33. 在弹出的系统颜色预设面板中，选择一种颜色作为文字的颜色。

34. 接着创建标签控件和根视图的约束关系，在标签上按下鼠标右键，然后拖动到根视图的上方。

35. 在弹出的约束选项菜单中，选择顶边距至容器选项，从而固定标签控件和根视图顶边之间的距离。

36. 使用相同的方式，添加其它的约束。

37. 在弹出的约束选项菜单中，选择垂直居中选项，使标签控件和根视图在垂直方向上保持居中。

38. 添加完约束之后，系统仍有警告提示，点击警告图标，进入警告信息列表。

39. 然后点击三角形图标，弹出系统预设的处理方式列表。

40. 接着选择修复缺失按钮，自动修复有偏差的约束关系。

41. 完成修复后，点击后退按钮，返回故事板的文档框架区。

42. 选择故事板中的视图控件，接着给视图控件添加约束。

43. 在视图上按下鼠标右键，然后拖动到自身的其它位置，从而建立自身的约束关系。

44. 在弹出的约束选项菜单中，选择宽度选项，从而固定视图的宽度。

45. 接着使用相同的方式，固定视图的高度。

46. 完成这两步约束的添加之后，视图的宽度和高度，无论在何种分辨率下都会保持不变。

47. 接着添加当前视图和根视图之间的约束关系。

48. 在弹出的约束选项菜单中，选择水平居中选项，使当前视图和根视图在水平方向上保持居中。

49. 使用相同的方式，添加垂直方向上的约束关系。

50. 在弹出的约束选项菜单中，选择垂直居中选项。

51. 接着选择故事板中的根视图。

52. 然后点击背景颜色右侧的下拉箭头，弹出颜色预设面板。

53. 在弹出的系统颜色预设面板中，选择一种颜色作为视图的背景颜色。

54. 接着点击身份检察器图标，进入身份设置面板。

55. 在类输入框内，确保此处的类名和之前创建的类文件相同。然后点击显示辅助编辑器图标，打开辅助编辑器。

56. 点击右上角的显示或隐藏工具面板图标，隐藏右侧的面板区。

57. 接着来放大故事板的显示比例。在故事板中点击鼠标右键，弹出右键菜单。

58. 然后选择菜单中的缩放至原始比例的命令。

59. 选择故事板中的标签控件。

60. 右侧的辅助编辑器中的类文件，并不是当前视图的类文件。所以需要更换编辑器中的内容。点击此处的图标，显示操作列表。

61. 在弹出的操作列表中，选择自动选项，此处列出了与故事板绑定的类文件。

62. 点击打开和故事板绑定的类文件。

63. 接着在标签上按下鼠标右键，并拖动到右侧的类文件中，从而建立一个和标签绑定的属性。

64. 在名称输入框内，输入属性的名称。

65. 然后点击连接按钮，在类文件中创建一个和标签控件相连接的属性。

66. 接着选择故事板中的视图控件。

67. 在视图上按下鼠标右键，并拖动到右侧的类文件中，从而建立一个和视图绑定的属性。

68. 在名称输入框内，输入属性的名称。

69. 然后点击连接按钮，在类文件中，创建一个和视图相连接的属性。

70. 完成控件和属性的连接之后，点击顶部的显示标准编辑器图标，切换至标准编辑器模式。

71. 然后打开系统自带的故事板文件。

72. 点击右上角的显示或隐藏工具区选项，打开右侧的工具面板。

73. 接着往故事板中添加一个视图，作为日历的显示区域。点击控件库右侧的垂直滚动条，跳转到视图控件所在的位置。

74. 然后将视图拖动到故事板中的适当位置。

75. 点击显示尺寸检查器图标，进入尺寸设置面板。

76. 接着依次设置当前视图的坐标和尺寸信息。

80. 点击顶部的显示身份检查器图标，进入身份设置面板。

81. 在类名输入框内，输入当前视图控件对应的类名。该类名就是第三方库中的日历视图类的名称。

82. 接着继续输入模块的名称。

83. 然后选择故事板中的根视图控件，设置根视图的外观属性。

84. 点击属性检查器图标，进入属性检查器面板。

85. 点击背景颜色右侧的下拉箭头，弹出颜色预设面板。

86. 在弹出的系统颜色预设面板中，选择一种颜色作为根视图的背景颜色。

87. 使用相同的方式，设置日历视图的背景颜色。

88. 点击背景颜色右侧的下拉箭头，弹出颜色预设面板。

89. 在弹出的系统颜色预设面板中，选择无色选项，作为日历视图的背景颜色。

90. 然后点击显示辅助编辑器图标，打开辅助编辑器。

91. 点击右上角的显示或隐藏工具面板图标，隐藏右侧的面板区。

92. 同样需要建立日历视图，和类文件的属性之间的连接，在日历视图上按下鼠标右键，并拖动到右侧的类文件中。

93. 在名称输入框内，输入属性的名称。

94. 然后点击连接按钮，在类文件中，创建一个和日历视图控件相连接的属性。

95. 完成控件和属性的连接之后，点击顶部的显示标准编辑器图标，切换至标准编辑器模式。

96. 接着在左侧的项目导航区，打开视图控制器的代码文件。

97. 现在开始编写代码，在当前项目中创建一个日历。

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

99. 然后添加需要使用到的相关协议。

100. 依次设置日历视图的数据源和代理对象，两者都是当前的视图控制器对象。

101. 要使用自定义的日历视图，需要注册日历中的日期数字单元格的故事板文件。

102. 设置日期数字单元格的间距。

103. 依次设置在日历中允许选择多个日期，并允许进行日期区域的选择。

104. 将日历视图添加到当前视图控制器的根视图。

105. 添加一个代理方法，用来监听日历中的数据单元格即将显示的事件。

106. 获得即将显示的单元格对象，并转换成自定义的单元格类。

107. 然后设置单元格中的标签的文字内容。

108. 当日历显示的日期为当前的月份时，设置数字标签的字体颜色为浅灰色。

109. 当日历显示的日期不是当前的月份时，设置数字标签的字体颜色为另外一种颜色。

110. 接着处理日期数字单元格被选择的事件。

111. 添加一个方法，用来响应日期数字单元格被选择的事件。

112. 首先获得当前被选择的日期数字单元格。

113. 当单元格被选择时，设置单元格的选择标识视图的圆角半径为20，并设置视图的显示状态为真。

114. 当单元格不处于选择状态时，隐藏该单元格的标识视图。

115. 同时在控制台输出单元格的日期。

116. 接着添加一个代理方法，用来配置日历的相关参数。

117. 初始化一个日期格式对象。

118. 设置日期的格式。

119. 然后初始化两个日期对象，分别表示日历的起始日期和结束日期。

120. 接着，初始化一个配置参数对象，依次设置日历的起始日期、结束日期、日历行数、日历类别、过去日期和将来日期的展示方式，以及每周的第一天。

121. 最后返回日历的配置参数对象。

122. 添加一个代理方法，用来监听某个日期被选择时的事件。

123. 再次添加一个代理方法，用来监听日期被取消选择时的事件。接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

124. 在弹出的模拟器中，点击选择一个日期，并观察控制台的日志输出。

125. 继续选择另外一个日期。

126. 当再次点击一个被选择的日期时，该日期将被取消选择。

127. 在日历上按下手指，并向另一侧拖动，可以察看下月或上月的日历。

128. 最后点击此处的[停止]按钮，关闭模拟器，并结束本节课程。

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

apps8 2.png

上一篇下一篇

猜你喜欢

热点阅读