Simple timeline view implemented by UITableViewCell

Overview

TimelineTableViewCell

TimelineTableViewCell is a simple timeline view implemented by UITableViewCell. The UI design of TimelineTableViewCell is inspired by ISTimeline.

GitHub stars GitHub forks CocoaPods Compatible Platform GitHub license

TimelineTableViewCell TimelineTableViewCell

Requirements

  • iOS 9.0 or higher

v1.0.1-

  • Swift 3

v1.2-

  • Swift 4

v1.3

  • Swift 5

v2.0+

  • Breaking Changes for v1.3-: thumbnailImageView is replaced with UIStackView to support multiple thumbnails.
  • Do not support iOS9.0- anymore.

Installation

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

Once you have your Swift package set up, adding TimelineTableViewCell as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/kf99916/TimelineTableViewCell.git")
]

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate TimelineTableViewCell into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'TimelineTableViewCell'

Usage

Import

import TimelineTableViewCell

Integration

Register Nib

let bundle = Bundle(for: TimelineTableViewCell.self)
let nibUrl = bundle.url(forResource: "TimelineTableViewCell", withExtension: "bundle")
let timelineTableViewCellNib = UINib(nibName: "TimelineTableViewCell",
	bundle: Bundle(url: nibUrl!)!)
tableView.register(timelineTableViewCellNib, forCellReuseIdentifier: "TimelineTableViewCell")

Dequeue

let cell = tableView.dequeueReusableCell(withIdentifier: "TimelineTableViewCell",
	for: indexPath) as! TimelineTableViewCell

// Configure TimelineTableViewCell...

TimelinePoint

The point in line is represented by a TimelinePoint object.
var diameter: CGFloat the diameter of a point in the line (default 6.0)
var lineWidth: CGFloat the thickness of the point (default 2.0)
var color: UIColor the color of each point in the line (default UIColor.black)
var isFilled: Bool fills the point in the line (default false)

Initializers

TimelinePoint(diameter: CGFloat, lineWidth: CGFloat, color: UIColor, filled: Bool)
TimelinePoint(diameter: CGFloat, color: UIColor, filled: Bool)
TimelinePoint(color: UIColor, filled: Bool)
TimelinePoint()

Timeline

The line in the cell is represented by a Timeline object and is divided by the point as the front line and the backline.
var width: CGFloat the thickness of the line (default 2.0)
var frontColor: UIColor the color of the front line (defalut UIColor.black)
var backColor: UIColor the color of the back line (defalut UIColor.black)
var leftMargin: CGFloat the left margin of the line (default 60.0)

Initializers

Timeline(width: CGFloat, frontColor: UIColor, backColor: UIColor)
Timeline(frontColor: UIColor, backColor: UIColor)
Timeline()

TimelineTableViewCell

The cell is represented by a TimelineTableViewCell object.
titleLabel: UILabel! the title in the bubble
descriptionLabel: UILabel! the description
lineInfoLabel: UILabel! the information about line
thumbnailImageView: UIImageView! the thumbnail illustrationImageView: UIImageView! the illustration
var bubbleRadius: CGFloat the radius of the bubble corners (default 2.0)
var bubbleColor: UIColor the color of every bubble (default .init(red: 0.75, green: 0.75, blue: 0.75, alpha: 1.0)) viewsInStackView: [UIView] the views in the stack view. var bubbleEnabled: Bool Enable draw bubble (default true)

Apps using TimelineTableViewCell

If you are using TimelineTableViewCell in your app and want to be listed here, simply create a pull request.

I am always curious who is using my projects :)

Hikingbook - by Zheng-Xiang Ke

Hikingbook

Demo

TimelineTableViewCellDemo is a simple demo app which shows the usage of TimelineTableViewCell in a storyboard.

Author

Zheng-Xiang Ke, [email protected]

License

TimelineTableViewCell is available under the MIT license. See the LICENSE file for more info.

Comments
  • Fatal error: Can't form Range with upperBound < lowerBound

    Fatal error: Can't form Range with upperBound < lowerBound

    When running my app on smaller screens (iPod, iPhone SE, etc.) the pod crashes in TimelineTableViewCell.swift at line 101 with the fatal error:

    Thread 1: Fatal error: Can't form Range with upperBound < lowerBound file Swift/x86_64-apple-ios-simulator.swiftinterface, line 14814

    This is the code starting from line 101.

    let views = viewsInStackView.count <= maxNumSubviews ? viewsInStackView : Array(viewsInStackView[0..<maxNumSubviews]) views.forEach { view in view.translatesAutoresizingMaskIntoConstraints = false view.addConstraint(NSLayoutConstraint(item: view, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.height, multiplier: 1, constant: 0)) view.contentMode = .scaleAspectFill view.clipsToBounds = true stackView.addArrangedSubview(view) }

    viewsInStackView at this stage are 0, while the maxNumSubviews are -1. Hence the crash.

    This is only seen on some devices, not all. Hence it is difficult to spot or reproduce. I have seen this on some iPhone 5s, iPhone SE and iPod Touch (7th Gen) so far.

    Need a resolution really soon as many of my users can't use my app anymore.

    opened by mhmmdmz 3
  • Could not load NIB in bundle

    Could not load NIB in bundle

    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not load NIB in bundle: 'NSBundle </Users/irfanpule/Library/Developer/CoreSimulator/Devices/77500ABE-FA84-4DF7-A658-0AC1E134A454/data/Containers/Bundle/Application/CCA3C281-0E57-4313-8B0E-95B53C6D0276/xxxxxx.app/Frameworks/TimelineTableViewCell.framework> (loaded)' with name 'TimelineTableViewCell''
    

    I am using Xcode 11, Swift 5

    opened by irfanpule 1
  • Separator TableView

    Separator TableView

    Hello, I would like to ask about separators. If I want to use separator between cells there is a problem with right margin. The separator ends in the edge of display (check photo). However left side is OK. Is there any way, how to edit properties of this separator? snimka obrazovky 2018-11-19 o 19 15 31

    opened by silversurfer147 1
  • Could not load NIB in bundle

    Could not load NIB in bundle

    Hello, I am trying to use this library, unfortunately it doesn't work. I am beginner in swift, so I suppose, it will be some silly mistake. I have create view with tableview and swift file TimelineViewController. I have copied the code from your demo project (from TimelineTableViewController). When I am trying to run it on simulator, I get error

    Could not load NIB in bundle: 'NSBundle </Users/silversurfer/Library/Developer/CoreSimulator/Devices/17FBAA4A-F887-4D71-9CD6-41D3979F4A0A/data/Containers/Bundle/Application/14C5257D-7D3E-40CA-9D46-C7E16C0DACF8/Time.app/Frameworks/TimelineTableViewCell.framework> (loaded)' with name 'TimelineTableViewCell''

    Could someone help me, where I made a mistake? Thank you in advance

    opened by silversurfer147 1
  • How can I customize cell?

    How can I customize cell?

    I want to customize the custom cell. For example, I want to add a location icon and location label in some cells. Also, I need a button in every cells. Can you help?

    opened by SamaritanMachine 1
  • Bubble Layer takes the entire width of the table view cell.

    Bubble Layer takes the entire width of the table view cell.

    Configured the cell, but when the table view scrolls and dequeueReusableCell is called, then the bubble layer takes the full width of the cell instead. Screen Shot 2019-12-10 at 9 18 47 PM

    opened by hsaintjuste 0
  • Simplify calculations, make bubble togglable

    Simplify calculations, make bubble togglable

    There were a few metrics issues when changing the size of the timeline point and the timeline itself.

    The project is now able to cope with a variety of modifications including different label margins and points inside the timeline. There are no changes to be made to the existing example project. Here is one such example of what can be done with the upgrade:

    IMG_0005

    Here is the code that creates this timeline:

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TimelineTableViewCell", for: indexPath) as! TimelineTableViewCell
        
        guard let sectionData = data[indexPath.section] else {
            return cell
        }
        
        let data = sectionData[indexPath.row]
        let situation = data["situation"]!
        let startTime = data["startTime"]!
        var endTime = "PRESENT"
        if (indexPath.row > 0) {
            endTime = sectionData[indexPath.row - 1]["startTime"]!
        }
        
        let title = situation
        let iconName = "ic-" + title.replacingOccurrences(of: " ", with: "-").lowercased()
        let timelineColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
        var timelineFrontColor = timelineColor
        var timelineBackColor = timelineColor
        var timelinePointColor = UIColor.black
        if (indexPath.row == 0) {
            timelineFrontColor = UIColor.clear
            if (indexPath.section == 0) {
                timelinePointColor = UIColor(red: 0.959, green: 0.459, blue: 0.603, alpha: 1)
            }
        }
        if (indexPath.row == sectionData.count - 1) {
            timelineBackColor = UIColor.clear
        }
        cell.timelinePoint = TimelinePoint(diameter: 12, lineWidth: 1, color: timelinePointColor, filled: true)
        cell.timeline.frontColor = timelineFrontColor
        cell.timeline.backColor = timelineBackColor
        cell.timeline.width = 20
        cell.timeline.leftMargin = tableView.bounds.width * 0.27
        
        cell.titleLabel.text = title.uppercased()
        cell.titleLabel.font = UIFont(name: "Avenir Next", size: 20)
        cell.titleLabel.textColor = UIColor.white
        
        cell.descriptionLabel.text = "\(startTime) - \(endTime)"
        cell.descriptionMargin.constant = 2
        
        cell.illustrationSize.constant = 28
        cell.illustrationImageView.image = UIImage(named: iconName)
        
        cell.bubbleEnabled = false
        
        return cell
    }
    
    opened by CJxD 0
  • Title and decription on both sides

    Title and decription on both sides

    HI , Just checking whether it is possible to support title and description on both sides of line, based on some setting .Please share your thoughts , I want the line to be on the center and title and description to be shown on both sides alternatively.

    opened by sreelal 0
  • Customize TimeLineTableViewCell

    Customize TimeLineTableViewCell

    Hi, thanks first of all for the library. I wanted to ask you if there's a way to customise the cell in the way i will show you in the attached pic. I just want to relocate the description and title, and also add an image in between the timeline and the written text. Screenshot 2020-05-16 at 17 26 40

    opened by Calibardi 0
  • maxNumSubviews == -1

    maxNumSubviews == -1

    Not sure how to reproduce this, but for some reason maxNumSubviews ends up being -1, which causes a crash in TimelineTableViewCell on this line:

    let views = viewsInStackView.count <= maxNumSubviews ? viewsInStackView : Array(viewsInStackView[0..<maxNumSubviews])
    

    Just curious if anyone else has had this problem? I'm working on a fork on my end, so it may be caused by that. However refactoring this line to be a bit cleaner couldn't hurt

    opened by peterkos 4
Owner
Zheng-Xiang Ke
@Hikingbook founder/CEO. Built up @Hikingbook ’s iOS app and website including frontend, backend, and DevOps by myself. https://hikingbook.net
Zheng-Xiang Ke
An easy-to-use UITableViewCell subclass that implements a swippable content view which exposes utility buttons (similar to iOS 7 Mail Application)

SWTableViewCell An easy-to-use UITableViewCell subclass that implements a swipeable content view which exposes utility buttons (similar to iOS 7 Mail

Christopher Wendel 7.2k Dec 31, 2022
An easy to use UITableViewCell subclass that allows to display swippable buttons with a variety of transitions.

MGSwipeTableCell MGSwipeTableCell is an easy to use UITableViewCell subclass that allows to display swipeable buttons with a variety of transitions. T

Imanol Fernandez 7k Dec 26, 2022
Convenient UITableViewCell subclass that implements a swippable content to trigger actions (similar to the Mailbox app).

MCSwipeTableViewCell An effort to show how one would implement a UITableViewCell like the one we can see in the very well executed Mailbox iOS app. Pr

Ali Karagoz 3k Dec 16, 2022
A waterfall grid layout view for SwiftUI.

WaterfallGrid A waterfall grid layout view for SwiftUI. Features Irregular grid of content. Columns number different per device orientation. Spacing a

Paolo Leonardi 1.9k Jan 7, 2023
🎛 QGrid: The missing SwiftUI collection view.

[NOTE] If you'd like to see QGrid in action, check out this demo of QDesigner (see video below). Install QDesigner: https://apps.apple.com/us/app/qdes

Q Mobile 1.5k Dec 23, 2022
A flexible grid layout view for SwiftUI

?? GridStack A flexible grid layout view for SwiftUI. WWDC20 Update Apple  released LazyVGrid and LazyHGrid at WWDC20. If you are fine to only suppor

Peter Minarik 620 Nov 11, 2022
Display list of Marvel comic Characters and its detail view

Marvel Universe Display list of Marvel comic Characters and its detail view Installation Dependencies in this project are provided via Xcodegen (proje

null 1 Oct 19, 2021
Building An Interactive Grid View

Building An Interactive Grid View This demo shows a few techniques on how to build a re-ordable grid view based on stock UICollectionView API. Here ar

Brian Coyner 8 Nov 14, 2022
Use Yelp API to fetch restuarants around a location and show them in a table view

Yelp Use Yelp API to fetch restuarants around a location and show them in a table view - Infinite scrolling, Prefetching, Image Caching. Design Patter

null 0 Nov 1, 2021
Using UI Table View

News-App Table View와 Table view controller Table View : Table의 크기를 지정할 수 있다. Table View Controller: 전체의 뷰가 하나의 테이블 Table View Table view 구성요소 결정하기 어떤

Jiwon 0 Dec 9, 2021
Typed, yet Flexible Table View Controller

ConfigurableTableViewController Simple view controller that provides a way to configure a table view with multiple types of cells while keeping type s

Arek Holko 270 Oct 15, 2022
Objective-C library for drag-n-drop of UITableViewCells in a navigation hierarchy of view controllers.

ios-dragable-table-cells Support for drag-n-drop of UITableViewCells in a navigation hierarchy of view controllers. You drag cells by tapping and hold

Anders Borum 49 Aug 23, 2022
Generic table view controller with external data processing

FlexibleTableViewController Swift library of generic table view controller with external data processing of functionality, like determine cell's reuse

Dmytro Pylypenko 9 May 20, 2018
A UITableView extension that enables cell insertion from the bottom of a table view.

ReverseExtension UITableView extension that enabled to insert cell from bottom of tableView. Concept It is difficult to fill a tableview content from

Taiki Suzuki 1.7k Dec 15, 2022
TableViews - Emoji Table View For iOS With Swift

TableViews Hello! This is EmojiTableView. Let me introduce you my first app when

null 0 Jan 2, 2022
Simple static table views for iOS in Swift.

Simple static table views for iOS in Swift. Static's goal is to separate model data from presentation. Rows and Sections are your “view models” for yo

Venmo 1.3k Nov 19, 2022
PreviewTransition is a simple preview gallery UI controller with animated tranisitions.

PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion

Ramotion 2.1k Dec 19, 2022
A simple way to create a UITableView for settings in Swift.

QuickTableViewController A simple way to create a table view for settings, including: Table view cells with UISwitch Table view cells with center alig

Cheng-Yao Lin 525 Dec 20, 2022