iOS AppDev Patterns: Content Cursor

iOS offers only the most barebones approach to placing content in a view, namely by specifying absolute coordinates. Of course, one can use autoresizing to make sure the positions of these contents are modified proportionally, but the initial positioning of a content block needs specification of the exact x- and y-coordinate of the top left of this ‘box’. This can render the layout inflexible, tedious and brittle. Every small change in position of a block has ripple effects on the position of succeeding blocks.

Content Cursor solves this problem.

A few definitions are in order.

Content Block: A rectangular area representing an atomic unit of information, for example, an article or an advertisement. It may contain a mix of text, images, video, etc.

Content Section: A rectangular region containing multiple Content Blocks. These Content Blocks may be related to each other, for example, an Entertainment section, a Sports section.

Content Source: The entity from which a Content Block derives its content (text/images) from.

The relation between the above three items is diagrammed below.

Back to the discussion at hand. We wish to be able to place Content Blocks inside a Content Section. Unfortunately, this requires us to specify the top left coordinate of each block in absolute coordinates, which is somewhat inconvenient in terms of maintainability.
The Content Cursor is an abstraction that lets us solve this problem in a simple, well-known fashion. I’ve borrowed the term ‘cursor’ from the humble cursor that indicates where the next character will be inserted while we are editing text. The Content Cursor functions in a similar fashion, except that instead of indicating the position of insertion of the next character, it indicates the position of insertion of the next Content Block, inside a Content Section.

The state machine of a basic Content Cursor is shown below.

The easiest way to visualise this state machine is to think for a second about how a normal text-editing cursor behaves. If there’s no more space for the next character on the current line, the character will be shown on the next line, effectively beginning a new line. If there’s no more space in the entire document (word limit, for example), no character will be placed at all.

This same idea extended to Content Blocks provides an easy way to place them in a Content Section without having to worry about specifying the absolute coordinates; the Content Cursor keeps track of the position of the next block to be placed.

The flow of content might look like this.

In an upcoming post, I shall extend this idea to talk about Linked Content Cursors.