I get a challenge to develop a timeline view for iOS application using AsyncDisplayKit. So this article will tell you how i made it :)
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
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.
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 :
Yeahh, it’s almost done, but there are horizontal line between all the cell. So we need to set separatorStyle for tableNode.
And done :)
All the code that use for this article can be access from my github