Quick Start Guide – Objective C


The following guide will get you up-and-running with the SEssentialsAccordion component as quickly as possible. In this guide, we will introduce you to the key features of the Accordion, including initial project setup, adding items to the Accordion, and managing them with a datasource. You can follow along with the related code sample: AccordionGettingStarted.xcodeproj.

Creating an Accordion

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.

Firstly, we want to define a variable to store our Accordion. Open up ViewController.h, import the SEssentialsAccordion.h header, and define the variable as follows:

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

@interface ViewController : UIViewController
    SEssentialsAccordion *accordion;


We define the new Accordion in ViewController.m as;

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

Using the Datasource

With the Accordion in place, we now need to add some sections. To do this, we provide the Accordion with a datasource. This can be a separate class, but we will use the ViewController in this example. In ViewController.h, we need to adopt the SEssentialsAccordionDataSource protocol;

@interface ViewController : UIViewController < SEssentialsAccordionDataSource >

We need to keep a reference to the content of each section in the Accordion so the datasource can return it when requested. We will use an NSMutableDictionary to store our sections, so declare this in a private interface at the top of ViewController.m;

@interface ViewController()
    NSMutableDictionary *mapSectionToView;

@implementation ViewController

We need to initialize the dictionary on load, and we need to tell the Accordion to treat ViewController as its datasource;

- (void)viewDidLoad
    accordion.dataSource = self;

    //Set up the Section => View dictionary
    mapSectionToView = [[NSMutableDictionary alloc] init];

    //Fill in the sections
    [self setupSections];

A few other functions are needed; we need to define setupSections to create our sections, and we need to implement the methods on the SEssentialsAccordionDataSource protocol. Firstly for setupSections;

- (void)setupSections
    // let's add 3 sections to the accordion
    for (int i=0; i<3; i++) {
        [self addAccordionSection];

- (void)addAccordionSection
    SEssentialsAccordionSection *section = [[SEssentialsAccordionSection alloc] initWithFrame:CGRectMake(0, 0, 100, 50) andTitle:@"Hello World"];

    // create the content that shows when the section is opened

    UILabel *content = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 200)];
    content.text = @"Add some content here";
    content.backgroundColor = [UIColor clearColor];

    // associate the content with the section in a dictionary
    // note we wrap the section in an NSValue which implements NSCopying

    [mapSectionToView setObject:content forKey:[NSValue valueWithNonretainedObject:section]];

    // add section to accordion
    [accordion addSection:section];

You might notice that we add the content for our section to the dictionary with the section as its key. This is because the datasource method we must implement requests the content for a section; by using a dictionary we can easily lookup the correct content to return.

Finally, to tell the accordion what to load, we implement the SEssentialsAccordionDataSource method;

- (UIView *)accordion:(SEssentialsAccordion *)accordion contentForSection:(SEssentialsAccordionSection *)section
    // given a section look it up in our dictionary to find the associated content
    // note that the key has to be wrapped as an NSValue for use in a NSDictionary
    return [mapSectionToView objectForKey:[NSValue valueWithNonretainedObject:section]];

With this, we have a working Accordion. Run your application, and check that you have three sections each with “Hello World” as the title and some content.

Three Sections

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