GridTimerView
目录
描述
使用 GridTimerView
,您可以显示带有计时控制器的时间表。每个单元格可以管理多个事件,具有不同的持续时间。这对于在模拟表格中列出电视节目非常完美。好消息是,您可以使用自己的字体、颜色、大小等进行大多数这些功能的自定义...
- 显示每个单元格的多个事件
- 完全可定制
- 流畅的滚动体验
- 易于使用
- 支持 iOS,以 Swift 4 开发
示例
要运行示例项目,请克隆仓库,然后首先从示例目录运行 pod install
。
使用方法
需要知道该Pod由多行组成。每行包含一系列事件,每个事件的开始时间和结束时间都是日期类型。您必须创建一个自定义视图来显示在每行中。
安装此Pod后,您可以按照以下步骤操作。这非常简单
在您的xib / storyboard中添加UIView
在您想放置GridTimerView的位置添加一个UIView
。然后,您需要在视图中输入类名,您可以在Interface Builder的身份检查器中更改此设置。记得输入GridTimerView
(同时包括“类”和“模块”)
接下来,在您的UIViewController中连接IBOutlet
@IBOutlet weak var gridTimerView: GridTimerView!
自定义项行的制作(必需)
制作您自己的自定义项子类,继承自UIView
。然后您可以使用它来DataSource协议。
实现数据源和代理
自定义此GridTimerView
的第一种方法是实现代理和数据源方法。这些方法处理最常用的用例。
gridTimerView.dataSource = self
gridTimerView.delegate = self
配置
您可以用自己的参数配置GridTimerView
。请查看默认值
var configuration = GridTimerConfiguration()
// Font for timer labels in rule
configuration.ruleFont = UIFont.systemFont(ofSize: 10, weight: .semibold)
// Color for timer labels in rule
configuration.ruleTextColor = UIColor.lightGray
// Days before today for initial time
configuration.ruleDaysFrom = 1
// Days after today for end time
configuration.ruleDaysTo = 2
// Rule ticks color
configuration.ruleTicksColor = UIColor.white
// Rule background color
configuration.ruleBackgroundColor = UIColor.darkGray
// Font used in current time
configuration.timerFont = UIFont.systemFont(ofSize: 12, weight: .semibold)
// Background color used in current time
configuration.timerColor = UIColor.blue
// Text color used in current time
configuration.timerTextColor = UIColor.white
// Selected date line color
configuration.lineColor = UIColor.blue
// Current date line color
configuration.currentTimeLineColor = UIColor.blue
/// Current date line dashed
configuration.currentTimeLineDashed = false
// Selected highlight color on event
configuration.selectedItemColor = UIColor.blue
// Unselected color on event
configuration.unselectedItemColor = UIColor.lightGray
/// Selected highlight color when row cell touched
configuration.selectedColorOnTouch = UIColor.init(red: 0.95, green: 0.95, blue: 0.95, alpha: 1)
// Row separation
configuration.rowSeparation = 10.0
/// Enable refresh control when dragged down
configuration.enableRefresh = false
最终将配置分配给GridTimerView
是很重要的
gridTimerView.configuration = configuration
数据源
需要显示您在集合表中自己的包含事件的单元格。
// Needed for displaying rows. Returns number of rows in the table
func numberOfRows(inGridTimerView gridTimerView: GridTimerView) -> Int
// Needed for displaying rows. Returns height of custom row in the table
func heightForRow(inGridTimerView gridTimerView: GridTimerView) -> CGFloat
// Needed for displaying items in the timeline row. Returns height of highlighted items
func heightForTimelineRow(inGridTimerView gridTimerView: GridTimerView) -> CGFloat
// Needed for displaying items in the timeline row. Returns number of items in row
func gridTimerView(gridTimerView: GridTimerView, numberOfItemsAtRowIndex rowIndex: Int) -> Int
// Needed for drawing your custom row with item index and row index
func gridTimerView(gridTimerView: GridTimerView, viewForItemIndex itemIndex: Int, inRowIndex rowIndex: Int) -> UIView {
let channelView = ChannelView()
let channel = channels[rowIndex]
var viewModel = ChannelView.ViewModel()
if channel.events.count > 0 {
viewModel.title = channel.events[itemIndex].title
viewModel.subtitle = channel.events[itemIndex].subtitle
viewModel.image = channel.channelImage
}
channelView.viewModel = viewModel
return channelView
}
// Needed for drawing item in the timeline row
func gridTimerView(gridTimerView: GridTimerView, startTimeForItemIndex itemIndex: Int, inRowIndex rowIndex: Int) -> Date
// Needed for drawing item in the timeline row
func gridTimerView(gridTimerView: GridTimerView, endTimeForItemIndex itemIndex: Int, inRowIndex rowIndex: Int) -> Date
// Returns color by item in row.
// If returns nil, `selectedItemColor` in configuration will be the selected color
func gridTimerView(gridTimerView: GridTimerView, colorForItemIndex itemIndex: Int, inRowIndex rowIndex: Int) -> UIColor?
委托
为了在您的应用程序中添加更多功能,您必须实现 GridTimerViewDelegate
并将其设置为您的视图控制器实例的代理。
// Called when item is highlighted.
func gridTimerView(gridTimerView: GridTimerView, didHighlightAtItemIndex itemIndex: Int, inRowIndex rowIndex: Int)
// Called when row is selected
func gridTimerView(gridTimerView: GridTimerView, didSelectRowAtIndex rowIndex: Int)
// Called when you refresh the table
func didPullToRefresh(inGridTimerView gridTimerView: GridTimerView)
额外
您还可以使用以下方法进行计时器滚动、注册并重用您自定义的视图行,或在加载数据后结束刷新表格。
// Scroll the timer to single date programatically
func scrollToDate(date: Date)
// Obtain your custom view
func viewForRowIndex(rowIndex: Int) -> UIView?
// End refreshing table. Used when finish loading data
func endRefresh()
// Reload collection view data
func reloadGridData()
// Reload collection view data for row index
func reloadGridRowIndex(_ rowIndex: Int)
安装
GridTimerView 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile
pod 'GridTimerView'
作者
Alberto Aznar, [email protected]
许可
GridTimerView 在 MIT 许可下可用。更多信息请参阅 LICENSE 文件。