The purpose of this tutorial is to introduce through play the
RBPageHeaderViewController components of Redbeard.
The purpose of the tutorial is not to build something useful, but to introduce through tinkering some of the components of Redbeard. As you work your way through the tutorial, feel free to explore and experiment.
Before you begin this tutorial, you will need to ensure the following prerequisites are met:
- You have some working knowledge of Cocoa Touch.
- Create a new Single View Application Xcode project. You may use Swift or Objective-C for development. This tutorial will be using Objective-C.
- Follow the Redbeard [Getting Started Guide]. to add the Redbeard Framework and the default theme to your project.
You may download the source code to this tutorial.
Just to familiarize ourselves with themes a little we will make a quick change to the primary colors that have been defined. In your project open the
colors.json file. This file is located in at /default/core/colors.json
Change the lines:
The color references you see here e.g.
ref://palette-blue-500 have been defined elsewhere in the file
material-design-palette.json. You may assign any colors you like from references or in RGB or RGBA format e.g.
Remember there is no reason you cannot do away with the default theme and create your own, laid out as you like
For the purposes of this demo, we're going to work directly in he
ViewController class created by Xcode. For more complicated applications, we may opt instead to add a navigation controller or a container view of some kind.
Let's begin by making
ViewController a subclass of
RBPageViewController, which will make it a Redbeard page. Be sure to import Redbeard first.
#import <Redbeard/Redbeard.h> // Redbeard
@interface ViewController : RBPageViewController
Adding a Header
RBPageViewController has an optional property name
header. To add a header to the page, you must assign a new
RBPageHeaderViewController object to this property. Lets go ahead and do this in
self.headerViewController = [RBPageHeaderViewController alloc] initWithoutNib];
The header will occupy the space that it needs to properly display it's items, automatically offsetting for the status bar if there is one. Currently there are no items and so it only occupies the status bar plus a margin that is specified in the default theme.
Now that the status bar is now visible over the header. We can update the
RBPageViewController.json file to change the status bar style from
light. Changing it here will mean all
RBPageViewController will have this status bar style assigned to it. Let's create a base theme for our view controller and make changes there. To do this add new JSON file named the same as the class name of the view controller. In our case this would be
ViewController.json. Then lets write up the theme in the new JSON file inheriting from
RBPageViewController. We'll change the
themes section of
theme.inc.json add the ViewController.json file:
Remember the JSON identifer must be the same as the name of the class i.e.
ViewController for this theme to be automatically applied.
A header can have any number of items added to it. An item can be any view with an alignment
right. Items are automatically sized and positioned as effectively as possible in the space that is available to the header. As is consistent across Redbeard, it also automatically adjusts to changes in container size and orientation.
To add our first item - a centered title label - we should first declare the label itself:
@property (nonatomic) RBLabel *headerTitleLabel;
We create the label in the standard way in
self.headerTitleLabel = [RBLabel new];
self.headerTitleLabel.text = @"My Page";
RBPageHeaderItem object must be created:
RBPageHeaderItem *headerTitleItem =
[[RBPageHeaderItem alloc] initWithThemeIdentifier:@"headerTitleLabel"
Now we have our first header item, which we can assign to the header like so:
self.headerViewController.items = @[ headerTitleItem ];
To theme the label, we can add the following key to the
Try adjusting the label font size and the item alignment to see what happens. You can also try rotating the user interface to see it adjust.
Adding More Items
Now let's add some more items - two buttons - to the left and right.
First the declarations:
@property (nonatomic) RBButton *addButton;
@property (nonatomic) RBButton *settingsButton;
Then building the items:
self.addButton = [RBButton new];
RBPageHeaderItem *addButtonItem =
[[RBPageHeaderItem alloc] initWithThemeIdentifier:@"addButton"
self.settingsButton = [RBButton new];
RBPageHeaderItem *settingsButtonItem =
[[RBPageHeaderItem alloc] initWithThemeIdentifier:@"settingsButton"
Then assigning the items:
self.headerViewController.items = @[ headerTitleItem, addButtonItem, settingsButtonItem ];
Then theming the buttons by adding the following inside of the
header section like earlier:
What if we set the alignment of both buttons to
Scenario #1 - Overlapping Items
The most common scenario of this kind is where the items aligned
right spill-over into the space that is needed by the items aligned
center. The items with a
center alignment will always try to remain in the center of the header, but items on the left or right can push and squeeze the items in the middle.
To provide an example, lets add another item - a label - to the left side of the header...
@property (nonatomic) RBLabel *infoLabel;
self.infoLabel = [RBLabel new];
self.infoLabel.text = [RBRandom lorumIpsumWithWordCount:3];
RBPageHeaderItem *infoLabelItem =
[[RBPageHeaderItem alloc] initWithThemeName:@"infoLabel"
self.headerViewController.items = @[ headerTitleItem, addButtonItem, settingsButtonItem, infoLabelItem ];
Notice that the title label has been pushed to the right. But how would the same header look if the interface was rotated to landscape to provide more header width?
Now there is sufficient space and the title is properly centered again.
The source code contains more comments and demonstrates how to add actions to header buttons. You will need to add in the Redbeard Framework to the project after downloading.
Download Source Code