User interfaces come in all shapes and sizes depending on their purpose and flow. Often this involves creating lots of links and boilerplate code to handle transitions between opening and closing menus, revealing and hiding toolbars, opening search mode, moving between pages, and so on. With Redbeard, we’ve taken the approach of building specialised containers that can be easily combined - like building the user interface using lego blocks - working seamlessly together and allowing the developer to concentrate on more important things.
Each container can be modified and transformed at runtime, meaning that your user interface isn’t locked after you have built it. They also provide a carefully chosen set of hooks for subclassing and callbacks for delegates.
Nestable & Themeable
You are free to nest the containers within each other to build the user interface that you want. All containers are fully theme-able, including their constituent parts.
Sidebar / Drawer Container
The sidebar container - otherwise known as the drawer pattern - provides left and/or right sidebars that are revealed when the content area is swiped to the side to reveal one. It is also possible to expand a menu when open to extend to the full available content width - this is for example useful when there is a search bar in the menu which when selected would prefer to have the full screen to show results.
The sidebars can individually be of any size and are fully theme-able. This includes the animation settings that controls transitions, including the duration, curve and spring settings.
The standard navigation controller 'UINavigationController' is powerful and brings in a lot of bespoke behaviour regarding toolbars and navigation bars. This adds a great deal of boilerplate code and doesn’t always work well for the user interface that one would like to achieve.
To provide a more flexible navigation controller, we built our own with no frills. This can be used anywhere - you can position them anywhere, nest them within any container, and you can transform them at runtime and expect it’s content to automatically adjust - just like any other container. It provides complete control over transition animations - we provide some great ones and you can easily write your own. The API is kept consistent with 'UINavigationController' and should feel very familiar to use.
Sliding Page Container
The sliding page container provides horizontally laid out pages that can be swiped between by the user. It provides a beautiful optional header with cleverly positioning page title labels that slide with the pages, peaking at the edges to indicate to the user that pages exist on either side.
User gestures can interrupt animations at any point, meaning it feels fluid and is always available to user interaction. Full customisation control is provided over the animation settings, including the duration, curve and spring settings.
Tab Page Container
The tab page container allows the user to transition between pages by tapping on their corresponding tab buttons. A tab toolbar is provided at the bottom or top of the container. It is completely theme-able and useful configuration options are available.
The toolbar container provides toolbars at any of the four edges of the content. Each toolbar can be configured to be pinned, hidden or floating. A floating toolbar slides in and out of view while the user is scrolling. It is easy to transform the toolbars and their settings at runtime, and each is fully theme-able - absolutely any view can be used as a toolbar.
The search container provides a search bar at the top of the content. When it is selected, the container transitions to “search mode”, revealing the search results view and delivering delegate callbacks to inform when the results should be updated. When the user clicks the cancel button, the container seamlessly transitions back to normal.
The delegate calls you need to add additional transition functionality are provided, allowing you for example to hide the header while the search container transitions into search mode - achieving the following effect:
The pane container provides a navigation stack - similar to the navigation controller - which opens view controllers as panes rather than as full pages. Panes animate open and the user can conveniently scroll between them. This container is useful for navigating hierarchical tree structures with ease - especially on devices with a wide view.