Open sourcing the “quilt” view for iOS

  • By Bruno Virlet
  • July 26, 2012
TMQuiltView on an iPad

We are excited to announce that 1000memories is open sourcing its "quilt" view for iOS under the MIT license.

The quilt – displaying images and media in multiple columns with different aspect ratios – is central to the design aesthetic of the 1000memories website and ShoeBox for iPhone and Android. It intends to give users the feeling of a real-life photo album or scrapbook and to emphasize the beauty of old photographs.

Beyond 1000memories, quilt-like designs are increasingly common in both web and mobile applications (e.g., Pinterest, 500px and Fab). We hope that TMQuiltView can be of value to iOS developers looking to add similar experiences to their apps.

Implementing the TMQuiltView

We have modeled TMQuiltView after UITableView to achieve two simple engineering goals:
- A simple and familiar interface for developers
- Smooth scrolling performance, even with thousands of cells

Here are a few of the details that we considered while implementing TMQuiltView:

Data source and delegate – We use similar delegate and data source calls as the UITableView (e.g., cellAtIndexPath). Please note, the quilt view itself doesn’t have "rows" because cells in different columns are not vertically aligned. Nevertheless we use NSIndexPath to maintain compatibility with the NSFetchedResultsController. While the data source defines cell order, it doesn’t specify columns (see "columns" below).

Cell recycling – Like UITableView, the quilt maintains cell objects for the visible cells only. This allows the quilt to create only a handful of cell objects even though it may contains thousands of cells, ensuring fast loading and smooth scrolling.

Datasource changes – The quilt view needs to reflect any changes in the datasource, including additions, deletions and changes of order. Since multiple changes often happen at once, we batch changes together. The quilt takes note of individual changes. Calling endUpdates from the view controller commits these changes and recomputes the layout only once.

Columns – One of the main difference with the UITableView is the use of multiple columns. The quilt view balances columns by assigning each cell to the column with the shortest height.

Orientation changes – The quilt supports different numbers of columns depending on the orientation. The TMQuiltViewController takes care of reloading the data appropriately on rotation.

Customization – Most of of the customization of the quilt should happen in the cells. However, the quilt delegates offers methods to define the margins, the cells heights and the number of columns.

Examples

TMQuiltView is flexible and can be used in a lot of different and creative ways, as the examples below demonstrate.

A quilt displayed on an iPad

A quilt displayed on an iPad with custom margins

Our ShoeBox app featuring the quilt view

Another example of the quilt

The quilt from the demo app, showing cell order

Source code, to do’s and feedback

The code for TMQuiltView is open sourced under MIT license and is available at https://github.com/1000Memories/TMQuiltView. It also contains a demo app that shows how to use TMQuiltView in a couple of lines.

Next steps will include ARC support, handling sections, and animations for layout changes.

Over the past 6 months, our "quilt" feature has delighted our users as a beautiful display for images on an iPhone. Today, we’re thrilled to share it with everyone and hope you try it out! We welcome pull requests and emails (developers@1000memories.com) if you have any feedback, suggestions or would like to contribute.

Most popular stories

  1. How many people have ever lived?
  2. How many photos have ever been taken?
  3. Old-School Instagram Filters
  4. Introducing ShoeBox for iPhone: A scanner in your pocket
  5. 2011 Year in Review

Like us on Facebook

Follow us on Twitter

Subscribe to our blog

Rss