Latest 0.2.0
Homepage https://github.com/alberdev/GridTimerView
License MIT
Platforms ios 10, requires ARC
Frameworks UIKit
Authors

GridTimerView logo

Version
License
Platform
Swift

Table of Contents

Description

With GridTimerView you can show a schedule with timer controller. Each cell can manage multiple events with different durations. It’s perfect for listing TV programs shows in a simulated table. And the good news is that you can customise most of these features with your own fonts, colors, sizes… and many more.

  • [x] Show multiple events for each cell
  • [x] Totally customizable
  • [x] Smooth scrolling experience
  • [x] Easy usage
  • [x] Supports iOS, developed in Swift 4

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

GridTimerView

Usage

It is important to know that this pod is composed of rows. Each row has a set of events with start time and end time of type date. You must create a custom view to show in each row.

Once you’ve installed this pod, you can follow next steps. It’s really simple:

UIView in your xib / storyboard

Add a UIView in the xib where you want to place GridTimerView. Then you have to input the class name in the view, you can change this in the identity inspector of the interface builder. Remember to input GridTimerView in both (Class & Module)

Screenshot 1

Then, connect the IBOutlet in your UIViewController

@IBOutlet weak var gridTimerView: GridTimerView!

Make your custom item row (required)

Make your own custom item subclassing GridItemView and register to use it

gridTimerView.register(type: ChannelItemView.self)

Implement datasource and delegate

The first way to customize this GridTimerView is implementing delegate and datasource methods. These methods handle the most common use cases.

gridTimerView.dataSource = self
gridTimerView.delegate = self

Configuration

You can setup GridTimerViewwith your own parameters. See default values:

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 image color
configuration.ruleColor = 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
public var lineColor = UIColor.blue

// Current date line color
public var timeLineColor = UIColor.blue

// Selected highlight color on event
configuration.selectedItemColor = UIColor.blue

// Unselected color on event
configuration.unselectedItemColor = UIColor.lightGray

// Row separation
configuration. rowSeparation = 10.0

Is important to finally assign configuration to GridTimerView

gridTimerView.configuration = configuration

DataSource

Is needed to show your own cells with events in collection table.

// 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, setupView itemView: GridItemView, forItemIndex itemIndex: Int, inRowIndex rowIndex: Int) -> GridItemView {

       let sectionData = channels[rowIndex]
       let cell = itemView as! ChannelItemView
       cell.source = ChannelItemViewSource(
           title: sectionData.events[itemIndex].title,
           subtitle: sectionData.events[itemIndex].subtitle,
           image: sectionData.channelImage)

       return cell
}

// 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

Delegates

In order to add more functionality in your app, you must implement te GridTimerViewDelegate and set delegate to your view controller instance.

// 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)

Extra

You can also use next methods for scrolling timer, registering and reuse your custom view row or end refreshing table when new data has loaded.

// Scroll the timer to single date programatically
func scrollToDate(date: Date)

// Obtain your custom view
func viewForRowIndex(rowIndex: Int) -> GridItemView?

// Register your own view for row is needed for reuse in table
func register<T: UICollectionViewCell>(type: T.Type) 

// Deque reusable custom view
func dequeReusableView<T: UICollectionViewCell>(withType type: T.Type, forRowIndex rowIndex: Int) -> T? 

// End refreshing table. Used when finish loading data
func endRefresh() 

// Reload collection view data
func reloadGridData() 

Installation

GridTimerView is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'GridTimerView'

Author

Alberto Aznar, [email protected]

License

GridTimerView is available under the MIT lice├čnse. See the LICENSE file for more info.

Latest podspec

{
    "name": "GridTimerView",
    "platforms": {
        "ios": "10"
    },
    "summary": "GridTimerView shows a schedule with timer controller. Each cell can manage multiple events. Used for listing TV programs shows in a table.",
    "requires_arc": true,
    "version": "0.2.0",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Alberto Aznar": "[email protected]"
    },
    "homepage": "https://github.com/alberdev/GridTimerView",
    "source": {
        "git": "https://github.com/alberdev/GridTimerView.git",
        "tag": "0.2.0"
    },
    "frameworks": "UIKit",
    "source_files": "GridTimerView/**/*.{swift}",
    "resources": "GridTimerView/**/*.{png,jpeg,jpg,storyboard,xib,xcassets}",
    "swift_version": "4.2"
}

Pin It on Pinterest

Share This