Build Timeline View with AsyncDisplayKit

Rencana Tarigan
Mar 29, 2017 · 2 min read

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade