GridTimerView 1.0.1

GridTimerView 1.0.1

Alberto Aznar 维护。



  • 作者:Alberto Aznar
  • alberdev/GridTimerView

GridTimerView logo

GridTimerView

Version License Platform Swift

目录

描述

使用 GridTimerView,您可以显示带有计时控制器的时间表。每个单元格可以管理多个事件,具有不同的持续时间。这对于在模拟表格中列出电视节目非常完美。好消息是,您可以使用自己的字体、颜色、大小等进行大多数这些功能的自定义...

  • 显示每个单元格的多个事件
  • 完全可定制
  • 流畅的滚动体验
  • 易于使用
  • 支持 iOS,以 Swift 4 开发

示例

要运行示例项目,请克隆仓库,然后首先从示例目录运行 pod install

GridTimerView

使用方法

需要知道该Pod由多行组成。每行包含一系列事件,每个事件的开始时间和结束时间都是日期类型。您必须创建一个自定义视图来显示在每行中。

安装此Pod后,您可以按照以下步骤操作。这非常简单

在您的xib / storyboard中添加UIView

在您想放置GridTimerView的位置添加一个UIView。然后,您需要在视图中输入类名,您可以在Interface Builder的身份检查器中更改此设置。记得输入GridTimerView(同时包括“类”和“模块”)

Screenshot 1

接下来,在您的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 文件。