Layouts

How to layout your views in iOS has always been an open issue. Once upon a time views were manually positioned using XIB’s, then code was written to adjust these positions when necessary, and now we have auto-layout. For more dynamic user interfaces that transform at runtime, and with advanced theming, XIB files become clumsy and one has to begin to build user interfaces in code.

In Redbeard, we’ve approached layouts by building a core component called a layout view. Layout views are very powerful as we’ll explain, but they are also efficient and can be nested within each other to build highly custom layouts - all of which adapt automatically to changing constraints. Best of all, they’re easy to use and consistent!

Modular

They are highly modular, coming in two varieties - normal (pre-loaded) and lazy-loading.

Layout views are assigned a positioner plugin, which controls the positions of each item in the layout view. We provide a few powerful positioners that should cover 99% of what you need:

  • Grid - Provides a table grid with a configurable number of columns. Works in vertical or horizontal orientations, providing properties for margins and spacing, and more.
  • Stack - Provides a stack in vertical or horizontal orientations. You can specify the alignment of items as well as margins and spacing.
  • Flexi - The most advanced positioner, give it a schema with flexible spacing, percentages, absolute sizes, cell alignments, cell spacing, margins, and much more.

There are also animation plugins, which control the animation that is applied to cells as they appear while the user is scrolling the content. We provide a few animators out of the box:

  • Scale - Have cells grow or shrink into place as they appear.
  • Fade - Have cells fade in as they appear.
  • Card - Have cells spin in to position as they appear, as though they were dealt in a casino!

We have made it clean and convenient to subclass the relevant base class and write your own positioner or animator. That way if one of our pre-made plugins doesn’t scratch your itch, you can retain full control while still allowing Redbeard to do the hard work. In fact - we can’t wait to see what great layouts and animations you build!

Responsive

Layout views are responsive, automatically adjusting to bounds and insets so that the content avoids chrome - such as toolbars and headers. Content is made scrollable only when necessary.

Fast

They are efficient, only updating layouts when absolutely necessary. Lazy loading layout views function even when nested, only loading the cells that are visible at any one time. Additional hooks are provided, so that when cells disappear they can be cleaned up - for example cancelling a network job.

Cells

We also provided a highly customisable cell view that can be subclassed and fully customised. These cells provide the events you expect and the usual swipe-to-reveal side buttons, including the ability to mark one of the buttons as the `default`, which will respond to a full swipe gesture. Cells are also highly theme-able, allowing you to control every aspect of their appearance. Did we mention they’re super easy to use?  It only takes a single line to add a button.

Samples

To see more code examples for layout views and cells, go to the “Layouts and Cells” Samples!