Build Timeline View with AsyncDisplayKit

I get a challenge to develop a timeline view for iOS application using AsyncDisplayKit. So this article will tell you how i made it :)

Image for post
Image for post

For make a timeline view, I create a ASCellNode for each timeline that have time, title and content, and the important thing is the dot.

The time, title and content can be manage by ASStackLayoutSpec, and for dot can be use ASCenterLayoutSpec and ASOverlaySpec

Image for post
Image for post

and to connected all dot, we need to add vertical line, and here i using ASDisplayNode for it, and add it manually by call addSubNode method.

To draw vertical line using ASDisplayNode is little bit tricky, just use backgroundColor as the color of line, and width as measure how thick the line that we want.

Image for post
Image for post

In this case, i use 2 vertical line, from Top of cell to the top of dot and from bottom of dot to the height of the cell.

After all this code, we will get the view like this :

Image for post
Image for post

Yeahh, it’s almost done, but there are horizontal line between all the cell. So we need to set separatorStyle for tableNode.

Image for post
Image for post

And done :)

All the code that use for this article can be access from my github

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store