iOS AppDev Patterns: Linked Content Cursors

I’ve already talked about the Content Cursor pattern. This post is an extension of that idea to increase the flexibility of layout across sections.

To understand the problem, let us revisit a page from our hypothetical iPad magazine.
Here’s the layout of the page in portrait mode.

…and here is the same page in landscape mode.

The first important thing to notice here is that the two Politics sections have changed in position and/or size. More specifically, the upper Politics section has morphed into a tall rectangle, while the lower one has stretched horizontally.

The second important thing is that, because of the change in sizes, block 3, which was in the upper Politics section in portrait mode, has moved to the lower section in landscape mode, because it does not fit inside the upper one anymore.

How do we achieve this? How do we flow Content Blocks across multiple Content Sections in different configurations? A Content Cursor is good at laying out content but only within a single Content Section.

Linked Content Cursor provides a solution.

The idea is pretty intuitive. We still maintain one Content Cursor per Content Section. However, we link related Content Cursors such that each cursor points to its next logical cursor (if one exists).
To use our example, that’d mean linking the Content Cursor of the lower Politics section with the Content Cursor of the upper Politics section.

Here is a diagram to illustrate.

So what happens is when Content Cursor #1 runs out of space, it delegates placement of the Content Block to the next Content Cursor, i.e., Content Cursor #2.

The advantage of this is clear. If you have multiple Content Sections spread across the page, you never explicitly state which specific section you need to place any Content Block (of that type) in. The Linked Content Cursors take care of that decision for you.

This also implies that regardless of how the sections change in size and/or position, resetting your Content Cursors and placing your content from the beginning, causes them to naturally flow across the sections without any bookkeeping on your part.