QVRWeekView
关于
QVRWeekView 是一个正在开发中的框架,包含一个周/天视图,允许您显示、添加和删除事件。
功能
- 水平和垂直滚动
- 无限水平滚动
- 缩放
- 颜色、大小和字体定制功能
- 日期和小时标签字体大小调整
- 动态事件添加和删除
- 事件点击、长按和事件请求回调
- 可见天数可定制
示例
要运行示例项目,请克隆仓库,然后首先从 Example 目录中运行 pod install
。最有用的示例代码可以在 Example > QVRWeekView > CalendarViewController
或 StartViewController
中找到。
需求
此容器需要最低部署目标iOS 9.0。
安装
QVRWeekView 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile:
pod "QVRWeekView"
使用
设置
框架安装后,您有两种方法可以将 WeekView
集成到您的项目中
1. 以编程方式
要以编程方式添加 WeekView,只需将 QVRWeekView
导入您的代码,方法是添加
import QVRWeekView
在包含您的视图控制器的源文件顶部。然后通过添加
let weekView = WeekView(frame: self.view.frame)
self.view.addSubview(weekView)
将 WeekView 插入您的视图控制器中,并在 viewDidLoad 或 viewWillAppear 方法中实现。
2. 通过Storyboard
要通过Storyboard添加 WeekView
,只需将一个 View 添加到您的 View Controller 中,并调整大小或添加约束。然后转到您的视图的身份检查器并选择类为 WeekView
,模块为 QVRWeekView
(见图)。
然后您应该已经设置好了!
与周视图一起工作
周视图代理
WeekView
拥有一个名为 WeekViewDelegate
的代理。目前这个代理只包含三个函数
函数 | 参数 | 行为 | 推荐用途 |
---|---|---|---|
didLongPressDayView | weekView:WeekView , date:Date |
当长按日视图列时调用。传递的 date 包含被按下的时间点 |
使用此函数以触发事件的创建 |
didTapEvent | weekView:WeekView , eventId:Int |
当事件被点击时调用。传递的 eventId 是被点击事件的事件标识符 |
使用此函数以提示事件编辑或删除 |
eventLoadRequest | weekView:WeekView , startDate:Date , endDate:Date |
当事件准备好加载时调用。 startDate 和 endDate 指示需要哪两个日期之间的日期范围 |
使用此函数以加载数据库中存储的事件 |
activeDayChanged | weekView:WeekView , date: Date |
当前最左边的天发生变化时调用。 | 使用此函数以跟踪当前活动日期 |
didEndZooming | weekView:WeekView , scale: Double |
缩放停止时调用,缩放级别是当前的缩放 scale | 使用此函数以持久化周视图的缩放比例 |
didEndVerticalScrolling | weekView:WeekView , top: Double , bottom: Double |
垂直滚动停止时调用。top 和 bottom 的值是屏幕下方的百分比值。 | 使用此函数以持久化周视图的垂直位置 |
周视图公共函数
函数 | 参数 | 行为 |
---|---|---|
updateTimeDisplayed | \ |
更新时指示器显示的时间 |
showDay | date:Date |
将周视图滚动到通过 date 传递的日期 |
showToday | \ |
将周视图滚动到今天 |
loadEvents | eventsData:[EventData] |
加载、处理和显示通过 eventsData 数组提供的 EventData 1 对象。传递空数组将删除所有可见事件。 |
redrawEvents | 触发所有 DayViewCells 的 setNeedsLayout ,并将触发所有事件的红色重绘 |
周视图公共属性
属性 | 类型 | 描述 |
---|---|---|
allVisibleEvents | [EventData] |
屏幕上当前可见的事件的EventData数组 |
visibleDayDateRange | ClosedRange |
当前屏幕上可见的天列的DayDates ClosedRange |
delegate | WeekViewDelegate? |
这个周视图的代理 |
EventData1
EventData是WeekView与你的代码之间通信的主要对象。EventData可以被重写。
变量/函数 | 目的 |
---|---|
id:String |
本事件的唯一标识符 |
title:String |
显示此事件的标题 |
locating:String |
本事件的“位置”(或您希望在事件标题旁边显示的任何其他数据) |
startDate:Date |
本事件的开始日期 |
endDate:Date |
本事件的结束日期 |
color:UIColor |
本事件的主要颜色 |
allDay:Bool |
指示此事件是否为全天事件,全天事件将在顶部栏显示 |
configureGradient(CAGradientLayer?) -> Void |
用于配置要渲染事件而不是纯色使用的渐变 |
保存和持久事件
事件可以存储在Core Data中(以下指南假设您对Core Data有一些基本了解)
- 如果您还没有,请创建一个新的Core Data模型。在这个模型中创建一个新的实体。
- 向新实体添加一个新的类型为
Transformable
的属性。 - 选择新属性并确保其
CustomClass
被设置为(这可以在右侧菜单中更改)EventDataArray
如果您想存储事件数组EventData
如果您想存储单个事件
- 如果您收到未声明的类型警告,您可能需要在您的
[ProjectName]-Bridging-Header.h
文件中添加@import QVRWeekView
。 - 您现在可以使用新的Core Data实体来持久化EventDate对象。
EventDataArray
类只有一个变量:eventsData: [EventData]
,它被简单用作存储事件数组的代理。
一个详细的示例可以在示例项目文件夹 /Example
中找到。更详细的指南可以在这里找到:这里。
自定义周视图
以下是 WeekView
所有可定制属性表格:
属性 | 描述 | 默认 |
---|---|---|
mainBackgroundColor:UIColor |
WeekView 的背景颜色。 | 深灰色:#cacaca |
defaultTopBarHeight:CGFloat |
包含日期标签的顶部栏的默认高度。 | 35 |
topBarColor:UIColor |
包含日期标签的顶部栏的颜色。 | 灰色:#dcdcdc |
sideBarWidth:CGFloat |
包含小时标签的侧边栏的宽度。 | 25 |
sideBarColor:UIColor |
包含小时标签的侧边栏的颜色。 | 深灰色:#cacaca |
dayLabelDefaultFont:UIFont |
日期标签的默认字体。 | 粗体系统字体,大小:14 |
dayLabelTextColor:UIColor |
日期标签的文本颜色。 | 黑色:#000 |
dayLabelTodayTextColor:UIColor |
今天日期标签的文本颜色。 | 深蓝色:#14426f |
dayLabelMinimumFontSize:CGFloat |
日标签的最小字体大小。在自动调整大小期间使用。 | 8 |
dayLabelShortDateFormat:String |
当没有足够的空间显示正常日期格式时,日标签的日期格式。日期格式可以在这里找到。 | ddd mmm |
dayLabelNormalDateFormat:String |
当没有足够的空间显示长日期格式时,日标签的日期格式。日期格式可以在这里找到。 | E d mmm |
dayLabelLongDateFormat:String |
日标签的最长日期格式,只有当有足够空间显示时才显示。日期格式可以在这里找到。 | E d mmm y |
dayLabelDateLocale:Locale |
日标签格式器使用的区域设置。区域设置可以在这里找到 | NSLocale.current |
hourLabelFont:UIFont |
小时标签的字体。 | 粗体系统字体,大小:12 |
hourLabelTextColor:UIColor |
小时标签的文本颜色。 | 黑色 #000 |
hourLabelMinimumFontSize:CGFloat |
日标签的最小字体大小。在自动调整大小期间使用。 | 6 |
hourLabelDateFormat:String |
在侧边栏中显示的小时使用的日期格式。 | HH |
allDayEventHeight:CGFloat |
全天事件的的高度。 | 40 |
allDayEventVerticalSpacing:CGFloat |
全天事件上方和下方的垂直间距。 | 5 |
allDayEventsSpreadOnX:Bool |
当启用时,全天事件将并排显示,而不是上下显示。 | true |
autoConvertAllDayEvents:Bool |
当启用时,跨越多天的事件将转换为全天事件。 | true |
visibleDaysInPortraitMode:Int |
纵向模式中可见的天数列数。 | 2 |
visibleDaysInLandscapeMode:Int |
横向模式中可见的天数列数。 | 7 |
eventLabelFont:UIFont |
事件内部文本的字体。 | 粗体系统字体,大小:12 |
eventLabelInfoFont:UIFont |
事件内部文本的信息字体。 | 粗体字体大小:12 |
eventLabelTextColor:UIColor |
事件内部文本的颜色。 | 白色 #fff |
eventLabelHorizontalTextPadding:CGFloat |
事件标签内文本的水平边距。 | 2 |
eventLabelVerticalTextPadding:CGFloat |
事件标签内文本的垂直边距。 | 2 |
eventStyleCallback:(CALayer, EventData?) -> Void |
使用此回调以自定义任何方式的事件层。如果正在渲染预览事件层,则EventData将为nil。在CalendarViewController中的示例用法。 | nil |
previewEventText:String |
在预览事件内显示的文本。 | 新建事件 |
previewEventColor:UIColor |
预览事件的颜色。 | 随机颜色 |
previewEventHeightInHours:Double |
预览事件的小时高度。 | 2.0 |
previewEventPrecisionInMinutes:Double |
预览事件将Snap到的分钟数。例如,15.0将使预览事件Snap到最近的15分钟。 | 15.0 |
showPreviewOnLongPress:Bool |
启用时,在长按时将显示预览事件。 | true |
defaultDayViewColor:UIColor |
日列的默认颜色。 | 浅灰色 #f8f8f8 |
weekendDayViewColor:UIColor |
周末日列的颜色。 | 灰色 #eaeaea |
passedDayViewColor:UIColor |
过去日期的日列颜色。 | 灰色 #f0f0f0 |
passedWeekendDayViewColor:UIColor |
过去日期周末日列的颜色。 | 灰色 #e4e4e4 |
todayViewColor:UIColor |
今天日列的颜色。 | 浅灰色 #f8f8f8 |
showTodayTimeOverlay:Bool |
在今日日视图单元格中显示“当前时间”叠加。 | true |
dayViewCellInitialHeight:CGFloat |
日列的高度。这是缩放比例=1.0的初始高度。 | 1400 |
dayViewHourIndicatorColor:UIColor |
当前小时指示器的颜色。 | 非常深的灰色 #5a5a5a |
dayViewHourIndicatorThickness:CGFloat |
当前小时指示器的厚度(或高度)。 | 3 |
dayViewMainSeparatorColor:UIColor |
日视图单元格中主要小时分隔线的颜色。主要分隔线是实线,而不是虚线。 | 深灰色:#cacaca |
dayViewMainSeparatorThickness:CGFloat |
日视图单元格中主要小时分隔线的厚度。主要分隔线是实线,而不是虚线。 | 1 |
dayViewDashedSeparatorColor:UIColor |
日视图单元格中虚线/点划线小时分隔线的颜色。 | 深灰色:#cacaca |
dayViewDashedSeparatorThickness:CGFloat |
日视图单元格中虚线/点划线小时分隔线的厚度。 | 1 |
dayViewDashedSeparatorPattern:[NSNumber] |
设置虚线/点划线小时分隔线的图案。需要一个NSNumbers数组。示例1:(10,5)将设置10点绘制,5点空白,重复的模式。示例2:(3,4,9,2)将设置4点绘制,4点空白,9点绘制,2点空白,重复的模式。有关图案绘制的更多信息,请参阅Apple API。 | [3, 1] |
portraitDayViewSideSpacing:CGFloat |
横屏模式时日列之间的间距。 | 5 |
landscapeDayViewSideSpacing:CGFloat |
横屏模式时日列之间的间距。 | 1 |
portraitDayViewVerticalSpacing:CGFloat |
横屏模式时日列上下方的间距。 | 15 |
landscapeDayViewVerticalSpacing:CGFloat |
横屏模式时日列上下方的间距。 | 10 |
minimumZoomScale:CGFloat |
可缩放至的最小周视图比例。例如,0.5表示周视图可以缩放到原始给定dayViewCellHeight的一半。 | 0.75 |
currentZoomScale:CGFloat |
周四视图将缩放的当前比例。例如,0.5表示周四视图将缩放到原始给定dayViewCellHeight的一半。 | 1.0 |
maximumZoomScale:CGFloat |
周视图可以缩放到的最大比例。例如,2.0表示周视图可以缩放到原始给定dayViewCellHeight的两倍。 | 3.0 |
velocityOffsetMultiplier:CGFloat |
水平滚动的灵敏度。较大的数字会乘以输入速度,从而在滚动时跳过更多单元格。 | 0.75 |
horizontalScrolling:HorizontalScrolling |
用于确定水平滚动行为。.infinite 表示无限滚动,.finite(number, startDate) 表示从起始日期开始的固定天数滚动。 |
.infinite |
工作原理
主要的WeekView视图是UIView的子类。视图布局从WeekView的xib文件中检索。WeekView包含一个顶部和侧边栏子视图。侧边栏包含一个显示小时的HourSideBarView。WeekView还有一个DayScrollView(UIScrollView子类),它控制垂直滚动,并且负责委托和包含DayCollectionView(UICollectionView子类),它控制水平滚动。DayCollectionView的单元格是DayViewCells,其视图是程序生成的(由于自动布局引起的效率低下)。
WeekView处理所有顶级操作,如缩放手势和方向改变。顶部和侧边栏的滚动由WeekView中的一个函数处理,该函数在DayScrollView滚动时被调用。WeekView生成、显示和丢弃顶部栏的天标签,与DayCollectionView单元格同时进行。
未来功能
- 添加和删除事件的能力
- 自定义事件颜色
- 额外自定义功能
- 改进的UI功能
- 提高事件处理效率
- 添加全天事件滚动
作者
Reinert Lemmens, [email protected]
许可证
QVRWeekView 在 MIT 许可证下可用。详细信息请参阅 LICENSE 文件。