CNTimelineCell is a helpful framework to generate a timeline with UITableView.
Sample screenshot:
Requirements
iOS 11+
Swift 5.3+
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 CNTimelineCell as a dependency is as easy as adding it to the dependencies value of your Package.swift.
CNTimelineCell
Sample screenshot:
Requirements
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 CNTimelineCell as a dependency is as easy as adding it to the
dependencies
value of yourPackage.swift
.How to use
- Import CNTimelineCell
Import
CNTimelineCell
when you need.Prepare your
[CNTimelineCellItem]
, for examples:Register TableViewCell as below:
Render your cell:
With the configuration above, you will have the result like this:
Configuration
CNTimelineCellItem
var title: String
message titlevar content: String?
message contentvar image: UIImage?
image iconvar leftType: TimelineType
left TimelineType (default:.none
)var rightType: TimelineType
right TimelineType (default:.none
)Sample CNTimelineCellItem:
Update style and item in cellForRowAtIndexPath
Output:
Styling
LineType
There are five line types in TimelineType:
start
,end
,spot
,line
andnone
LineStyle
Line style can be configured by LineStyle struct.
var lineWidth: CGFloat
width of the central line (default:6.0
)var spotDiameter: CGFloat
diameter of circle spot (default:20.0
)var spotColor: UIColor
color of central circle spot (default.white
)var lineColor: UIColor
color of line (defaultRGB(0, 144, 182)
)var spotOffsetY: CGFloat
vertical offset of spot (default:29.0
)BubbleStyle
Set the dialog style using BubbleStyle object
var arrowOffsetY: CGFloat
vertical offset of arrow (default:30.0
)var borderWidth: CGFloat
width of border (default:2.0
)var borderColor: UIColor
color of border (default:RBC(0, 147, 51)
)public var backgroundColor: UIColor
button background color (default.clear
)CNTimelineCellStyle
Pass the LineStyle and BubbleStyle to CNTimelineCellStyle object to configure CNTimelineCell
var leftLineStyle: LineStyle
left Timeline style (default:LineStyle()
)var rightLineStyle: LineStyle
right Timeline style (default:LineStyle()
)var bubbleStyle: BubbleStyle
bubble message style (default:BubbleStyle()
)var messageSeparator: UIColor
color of separator line in message (default:.lightGray
)Author
Chris Ng (chrisnyw@gmail.com)
License
CNTimelineCell is available under the MIT license. See the LICENSE file for more info.