Quick Start Guide – Objective C


The following guide will get you up-and-running with the SEssentialsSlidingOverlay component as quickly as possible. In this guide, we will introduce you to the key features of the SlidingOverlay, including initial project setup, customizing the overlay and underlay, and getting the two to communicate properly. You can follow along with our related code sample: SlidingOverlayGettingStarted.xcodeproj.

Creating a SlidingOverlay

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.

In ViewController.m, import the header, and create a reference to the SlidingOverlay;

#import "ViewController.h"
#import <ShinobiEssentials/ShinobiEssentials.h>

@implementation ViewController {
    SEssentialsSlidingOverlay *slidingView;

In viewDidLoad, we create the SlidingOverlay, and add it to the main view:

- (void)viewDidLoad
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    slidingView = [[SEssentialsSlidingOverlay alloc] initWithFrame:self.view.frame andToolbar:YES];
    [self.view addSubview:slidingView];
    [self setupSubviews];

And in only a few lines of code, we can run the app and start to see the SlidingOverlay already working. We can already use the button to open and close the underlay, and swipe left and right to open or close it;

Sliding Overlay Quick Start

Customizing the Views

To start with, we will add a small “Hello world” messages to the Overlay and Underlay. We could just define it in the scope of viewDidLoad, but we will need ivars, so let’s add them:

@implementation ViewController {
    UILabel *myOverlayLabel;
    UILabel *myUnderlayLabel;
    SEssentialsSlidingOverlay *slidingView;

Then in viewDidLoad, initialize the labels and add them as a subviews of the SlidingOverlay’s overlay and underlay respectively. As a styling point, we recommend setting the background to be transparent.

    //Setup Overlay
    myOverlayLabel = [[UILabel alloc] initWithFrame: CGRectMake(10, 10, 100, 100)];
    myOverlayLabel.backgroundColor = [UIColor clearColor];
    myOverlayLabel.text = @"Hello, World!";
    myOverlayLabel.textColor = [UIColor whiteColor];
    [slidingView.overlay addSubview: myOverlayLabel];

    //Setup Underlay
    myUnderlayLabel = [[UILabel alloc] initWithFrame: CGRectMake(10, 10, 200, 100)];
    myUnderlayLabel.backgroundColor = [UIColor clearColor];
    myUnderlayLabel.text = @"Hello, Underlay!";
    myUnderlayLabel.textColor = [UIColor whiteColor];
    [slidingView.underlay addSubview: myUnderlayLabel];

With that, you should have labels attached to your Overlay and Underlay:


Removing the title bar

The SlidingOverlay has a title bar by default, which contains a button to open and close the Underlay. Swiping inside the control will also open and close the overlay, so it’s not required that the top bar is displayed. Whether or not a SlidingOverlay has a toolbar is determined at construction time, so to remove the toolbar simply change YES to NO:

slidingView = [[SEssentialsSlidingOverlay alloc] initWithFrame:self.view.frame andToolbar:NO];

No Toolbar

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