ISTimeline is a simple timeline view written in Swift 2.2
- iOS 8.0 or higher
- Swift 2.2
ISTimeline is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'ISTimeline', '~> 0.0.5'
ISTimeline is also available through Carthage. Include the following line into your Cartfile and follow the instructions under getting started:
github "instant-solutions/ISTimeline" ~> 0.0.5
Just drop the files ISPoint.swift and ISTimeline.swift into your project.
import ISTimeline
We recommend to use the timeline view in your storyboard. Just add a plain view and set the custom class and the module property to ISTimeline
.
Or add the view programmatically:
let frame = CGRectMake(0, 20, 300, 400)
let timeline = ISTimeline(frame: frame)
timeline.backgroundColor = .whiteColor()
self.view.addSubview(timeline)
Each bubble is represented by an ISPoint object in the points array. ISPoints has several properties:
var title:String
shown in the bubble
var description:String?
shown below the bubble
var pointColor:UIColor
the color of each point in the line
var lineColor:UIColor
the color of the line after a point
var touchUpInside:Optional<(point:ISPoint) -> Void>
a callback, which is triggered after a touch inside a bubble
var fill:Bool
fills the point in the line (default: false
)
Example point:
let point = ISPoint(title: "my title")
point.description = "my awesome description"
point.lineColor = .redColor()
point.fill = true
The designated initializer is:
ISPoint(title:String, description:String, pointColor:UIColor, lineColor:UIColor, touchUpInside:Optional<(point:ISPoint) -> Void>, fill:Bool)
You also can use one the convenience initializers:
ISPoint(title:String, description:String, touchUpInside:Optional<(point:ISPoint) -> Void>)
ISPoint(title:String, touchUpInside:Optional<(point:ISPoint) -> Void>)
Or even this one:
ISPoint(title:String)
To get touch events you just have to set a callback closure to the property point.touchUpInside
. It is triggered after a touch up inside a bubble.
point.touchUpInside =
{ (point:ISPoint) in
// do something
}
To add points to the timeline you can simple create and set your points array to the property timeline.points
or you can append each point one after the other.
let myPoints = [
ISPoint(title: "first"),
ISPoint(title: "second"),
ISPoint(title: "third")
]
timeline.points = myPoints
Append points:
timeline.points.append(ISPoint(title: "fourth"))
You can customize the following timeline colors:
var bubbleColor:UIColor
color of every bubble (default .init(red: 0.75, green: 0.75, blue: 0.75, alpha: 1.0)
)
var titleColor:UIColor
color of the title in the bubble (default .whiteColor()
)
var descriptionColor:UIColor
color the description text (default .grayColor()
)
Points can be colored as described above.
Some common parameters can be adjusted:
var pointDiameter:CGFloat
diameter of a point in the line (default 6.0
)
var lineWidth:CGFloat
the thickness of the line (default 2.0
)
var bubbleRadius:CGFloat
the radius of the bubble corners (default 2.0
)
With the flag var bubbleArrows:Bool
it is possible to remove all arrows (default true
).
With arrows:
You can add some padding by setting the content insets. This currently can only be done programmatically.
timeline.contentInset = UIEdgeInsetsMake(20.0, 20.0, 20.0, 20.0)
Per default, the timeline clips all subviews to its bounds. If you would like to change this behavior just set it to false
.
timeline.clipsToBounds = false
let frame = CGRectMake(0, 20, 300, 400)
let timeline = ISTimeline(frame: frame)
timeline.backgroundColor = .whiteColor()
timeline.bubbleColor = .init(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.0)
timeline.titleColor = .blackColor()
timeline.descriptionColor = .darkTextColor()
timeline.pointDiameter = 7.0
timeline.lineWidth = 2.0
timeline.bubbleRadius = 0.0
self.view.addSubview(timeline)
for i in 0...9 {
let point = ISPoint(title: "point \(i)")
point.description = "my awesome description"
point.lineColor = i % 2 == 0 ? .redColor() : .greenColor()
point.pointColor = point.lineColor
point.touchUpInside =
{ (point:ISPoint) in
print(point.title)
}
timeline.points.append(point)
}
ISTimelineDemo is a simple demo app which shows the usage of ISTimeline in a storyboard.
- show images in the timeline
- animate the appending and removing of an entry
ISTimeline is licensed under the terms of the Apache License 2.0. See the LICENSE file for more info.
Feel free to fork the project and send us a pull-request! ๐