1. 本节课将为您演示,如何制作一款漂亮的日历。首先确保在您的项目中,已经安装了所需的第三方库,双击查看此处的Pod配置文件。
2. 根据配置文件中的相关设置,安装第三方库。安装完成之后,双击打开此处的项目文件。
4. 在弹出的右键菜单中,选择创建新文件选项。您将创建一个自定义的日历单元格。
5. 在弹出的文件模板选择窗口中,保持默认的选项,然后点击下一步按钮,进入下一步设置页面。
9. 保持默认的文件存储位置 ,点击创建按钮,完成文件的创建。
12. 在弹出的右键菜单中,选择创建新文件选项。这里需要创建和类文件进行绑定的故事板文件。
17. 在打开的故事板编辑界面,点击尺寸检查器图标,进入尺寸设置面板。
20. 在组件库面板中,点击右侧的垂直滚动条,跳转到视图组件所在的位置。
28. 在弹出的颜色预设面板中,选择一种颜色作为视图的背景颜色。
29. 接着往故事板中添加一个标签控件,点击右侧的垂直滚动条,跳转到标签控件所在的位置。
33. 在弹出的系统颜色预设面板中,选择一种颜色作为文字的颜色。
34. 接着创建标签控件和根视图的约束关系,在标签上按下鼠标右键,然后拖动到根视图的上方。
35. 在弹出的约束选项菜单中,选择顶边距至容器选项,从而固定标签控件和根视图顶边之间的距离。
37. 在弹出的约束选项菜单中,选择垂直居中选项,使标签控件和根视图在垂直方向上保持居中。
38. 添加完约束之后,系统仍有警告提示,点击警告图标,进入警告信息列表。
43. 在视图上按下鼠标右键,然后拖动到自身的其它位置,从而建立自身的约束关系。
44. 在弹出的约束选项菜单中,选择宽度选项,从而固定视图的宽度。
46. 完成这两步约束的添加之后,视图的宽度和高度,无论在何种分辨率下都会保持不变。
48. 在弹出的约束选项菜单中,选择水平居中选项,使当前视图和根视图在水平方向上保持居中。
53. 在弹出的系统颜色预设面板中,选择一种颜色作为视图的背景颜色。
55. 在类输入框内,确保此处的类名和之前创建的类文件相同。然后点击显示辅助编辑器图标,打开辅助编辑器。
56. 点击右上角的显示或隐藏工具面板图标,隐藏右侧的面板区。
57. 接着来放大故事板的显示比例。在故事板中点击鼠标右键,弹出右键菜单。
60. 右侧的辅助编辑器中的类文件,并不是当前视图的类文件。所以需要更换编辑器中的内容。点击此处的图标,显示操作列表。
61. 在弹出的操作列表中,选择自动选项,此处列出了与故事板绑定的类文件。
63. 接着在标签上按下鼠标右键,并拖动到右侧的类文件中,从而建立一个和标签绑定的属性。
65. 然后点击连接按钮,在类文件中创建一个和标签控件相连接的属性。
67. 在视图上按下鼠标右键,并拖动到右侧的类文件中,从而建立一个和视图绑定的属性。
69. 然后点击连接按钮,在类文件中,创建一个和视图相连接的属性。
70. 完成控件和属性的连接之后,点击顶部的显示标准编辑器图标,切换至标准编辑器模式。
72. 点击右上角的显示或隐藏工具区选项,打开右侧的工具面板。
73. 接着往故事板中添加一个视图,作为日历的显示区域。点击控件库右侧的垂直滚动条,跳转到视图控件所在的位置。
81. 在类名输入框内,输入当前视图控件对应的类名。该类名就是第三方库中的日历视图类的名称。
83. 然后选择故事板中的根视图控件,设置根视图的外观属性。
86. 在弹出的系统颜色预设面板中,选择一种颜色作为根视图的背景颜色。
89. 在弹出的系统颜色预设面板中,选择无色选项,作为日历视图的背景颜色。
91. 点击右上角的显示或隐藏工具面板图标,隐藏右侧的面板区。
92. 同样需要建立日历视图,和类文件的属性之间的连接,在日历视图上按下鼠标右键,并拖动到右侧的类文件中。
94. 然后点击连接按钮,在类文件中,创建一个和日历视图控件相连接的属性。
95. 完成控件和属性的连接之后,点击顶部的显示标准编辑器图标,切换至标准编辑器模式。
100. 依次设置日历视图的数据源和代理对象,两者都是当前的视图控制器对象。
101. 要使用自定义的日历视图,需要注册日历中的日期数字单元格的故事板文件。
103. 依次设置在日历中允许选择多个日期,并允许进行日期区域的选择。
105. 添加一个代理方法,用来监听日历中的数据单元格即将显示的事件。
106. 获得即将显示的单元格对象,并转换成自定义的单元格类。
108. 当日历显示的日期为当前的月份时,设置数字标签的字体颜色为浅灰色。
109. 当日历显示的日期不是当前的月份时,设置数字标签的字体颜色为另外一种颜色。
111. 添加一个方法,用来响应日期数字单元格被选择的事件。
113. 当单元格被选择时,设置单元格的选择标识视图的圆角半径为20,并设置视图的显示状态为真。
114. 当单元格不处于选择状态时,隐藏该单元格的标识视图。
119. 然后初始化两个日期对象,分别表示日历的起始日期和结束日期。
120. 接着,初始化一个配置参数对象,依次设置日历的起始日期、结束日期、日历行数、日历类别、过去日期和将来日期的展示方式,以及每周的第一天。
122. 添加一个代理方法,用来监听某个日期被选择时的事件。
123. 再次添加一个代理方法,用来监听日期被取消选择时的事件。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。
124. 在弹出的模拟器中,点击选择一个日期,并观察控制台的日志输出。
126. 当再次点击一个被选择的日期时,该日期将被取消选择。
127. 在日历上按下手指,并向另一侧拖动,可以察看下月或上月的日历。
128. 最后点击此处的[停止]按钮,关闭模拟器,并结束本节课程。
本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载