QVRWeekView 0.14.1

QVRWeekView 0.14.1

测试已测试
Lang语言 SwiftSwift
许可证 MIT
发布最后发布2020年5月
SPM支持SPM

Reinert Lemmens维护。



  • 作者:
  • Reinert

QVRWeekView

Version License Platform

关于

QVRWeekView 是一个正在开发中的框架,包含一个周/天视图,允许您显示、添加和删除事件。

功能

  • 水平和垂直滚动
  • 无限水平滚动
  • 缩放
  • 颜色、大小和字体定制功能
  • 日期和小时标签字体大小调整
  • 动态事件添加和删除
  • 事件点击、长按和事件请求回调
  • 可见天数可定制

示例

要运行示例项目,请克隆仓库,然后首先从 Example 目录中运行 pod install。最有用的示例代码可以在 Example > QVRWeekView > CalendarViewControllerStartViewController 中找到。

需求

此容器需要最低部署目标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 (见图)。

image

然后您应该已经设置好了!

与周视图一起工作

周视图代理

WeekView 拥有一个名为 WeekViewDelegate 的代理。目前这个代理只包含三个函数

函数 参数 行为 推荐用途
didLongPressDayView weekView:WeekView, date:Date 当长按日视图列时调用。传递的 date 包含被按下的时间点 使用此函数以触发事件的创建
didTapEvent weekView:WeekView, eventId:Int 当事件被点击时调用。传递的 eventId 是被点击事件的事件标识符 使用此函数以提示事件编辑或删除
eventLoadRequest weekView:WeekView, startDate:Date , endDate:Date 当事件准备好加载时调用。 startDateendDate 指示需要哪两个日期之间的日期范围 使用此函数以加载数据库中存储的事件
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 数组提供的 EventData1 对象。传递空数组将删除所有可见事件。
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有一些基本了解)

  1. 如果您还没有,请创建一个新的Core Data模型。在这个模型中创建一个新的实体。
  2. 向新实体添加一个新的类型为Transformable的属性。
  3. 选择新属性并确保其CustomClass被设置为(这可以在右侧菜单中更改)
    • EventDataArray如果您想存储事件数组
    • EventData如果您想存储单个事件
  4. 如果您收到未声明的类型警告,您可能需要在您的[ProjectName]-Bridging-Header.h文件中添加@import QVRWeekView
  5. 您现在可以使用新的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 文件。