Quick Start Guide – Objective-C

Introduction

The following guide will get you up-and-running with the SEssentialsTabbedView component as quickly as possible. In this guide, we will introduce you to the key features of the Tabbed View, including initial project setup and adding items. You can follow along with the related code sample: TabbedViewGettingStarted.xcodeproj.

Creating a Tabbed View

Start up Xcode and create a new project (File / New / Single View Application).

Within your newly created project, add a reference to the ShinobiEssentials framework, and the bundle which contains its resources. Instructions for doing this can be found in the first section of the EssentialsUserGuide.

Tabbed views require a datasource to provide the content for the tabs. We will implement the methods later on, but for now we can specify that our view controller will implement the SEssentialsTabbedViewDataSourceprotocol. Open up ViewController.h:

#import <UIKit/UIKit.h>
#import <ShinobiEssentials/ShinobiEssentials.h>

@interface ViewController : UIViewController< SEssentialsTabbedViewDataSource >

@end

In ViewController.m we can define an ivars keep hold of our tabbed view:

#import "ViewController.h"

@implementation ViewController {
    SEssentialsTabbedView *myTabView;
}

In ViewController.m, initialize myTabView in viewDidLoad as;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    myTabView = [[SEssentialsTabbedView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:myTabView];
}

Run the application, and check you have an empty tab bar at the top of your view, similar to this;

TabbedViewQuickStart_EmptyTab

 

Adding Items

With the Tabbed View in place, we want to add some content. To do this, we need to make a few small changes.

In ViewController.m, we need a dictionary to map each tab to the content for the tab:

@implementation ViewController {
    SEssentialsTabbedView *myTabView;
    NSMutableDictionary *mapTabToView;
}

In viewDidLoad, we need to set up the dictionary, tell the Tabbed View that we are acting as a datasource, and fill in a tab with content;

- (void)viewDidLoad
{
    ...
    [self.view addSubview:myTabView];
    myTabView.dataSource = self;

    [self.view addSubview:myTabView];

    //Set up the Tab=>View dictionary
    mapTabToView = [[NSMutableDictionary alloc] init];

    // Let's make 2 tabs
    [self setupTabWithText:@"Hello world"];
    [self setupTabWithText:@"Another tab"];
}

As content for our tab, we will use a simple “Hello World!” message;

- (void)setupTabWithText:(NSString*)text
{
    UITextView *myText = [[UITextView alloc] initWithFrame:[myTabView contentViewBounds]];
    [myText setText:text];
    [myText setFont:[UIFont boldSystemFontOfSize:24]];
    [myText setBackgroundColor:[UIColor lightGrayColor]];

    SEssentialsTab *myTab = [[SEssentialsTab alloc] initWithName:@"Hello, Tab!" icon:nil];
    [self addView:myText forTab:myTab];

    [myTabView addTab:myTab];
}

We have called a method addView:forTab: which adds the specified view as the content for the given tab in our backing-store dictionary. It’s important to note here that SEssentialsTab does not implement NSCopying and therefore it is not possible to use it as a key in an NSDictionary. Therefore we use the valueWithNonretainedObject method on NSValue to create a pointer which can be used as a key. If the underlying tab is deallocated, this pointer will become a junk pointer, so this approach requires a certain amount of care:

 - (void)addView:(UIView *)view forTab:(SEssentialsTab *)tab
{
    [mapTabToView setObject:view forKey:[NSValue valueWithNonretainedObject:tab]];
}

We create a simple UITextView, set the content and some styling, create a tab, map the two together, and pass it to myTabView.

One important point here is that the tabs have no concept of the content associated with them. This is where the datasource comes in. We map a tab to its content using the mapTabToView dictionary so when the Tabbed View requests the content, we can look it up in the dictionary;

- (UIView *)tabbedView:(SEssentialsTabbedView *)tabbedViewRef contentForTab:(SEssentialsTab *)tab
{
    return [mapTabToView objectForKey:[NSValue valueWithNonretainedObject:tab]];
}

Simple enough! Now run your app, and check that you have a tab called “Hello, Tab!” with “Hello World!” as the content.

TabbedViewQuickStart_SingleTab

 

If you got stuck at any point, take a look at our related code sample: TabbedViewGettingStarted.xcodeproj.