Quick Start Guide – Objective C

Introduction

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

Creating a FlowLayout

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.

We also want to define a variable to store our FlowLayout. Open ViewController.m,
import the header, and define the variable as follows:

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

@implementation ViewController {
   SEssentialsFlowLayout *myFlowLayout;
}

In viewDidLoad define the new FlowLayout, as below;

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

If you run the application now, you should see the empty FlowLayout on screen, with a dark gray textured background;

placeholder

Adding Items

The FlowLayout is designed to display images, and allow them to be dragged and rearranged. Now that we have our FlowLayout displaying, we need to add some images. We will be using some sample images, so to follow along you will need to download them too. Drag the Images folder into your project as a Folder Reference (not as a Group). If done correctly, the Images folder in your project navigator will be blue, not yellow.

With the images imported into our project, load them in in ViewController.m’s viewDidLoad;

- (void)viewDidLoad
{
    ...
    [self importImages];
    [self.view addSubview:myFlowLayout];
}

-(void)importImages
{
    NSArray *imgPaths = [[NSBundle mainBundle] pathsForResourcesOfType:@"png" inDirectory:@"Images"];
    for (NSString *path in imgPaths)
    {
        //Create image from filepath, and add it to the flow layout
        UIImage *newImg = [[UIImage alloc] initWithContentsOfFile:path];
        UIImageView *newView = [[UIImageView alloc] initWithImage:newImg];
        [myFlowLayout addManagedSubview:newView];
    }
}

With this set up, run the app and check the letters appear. You can use edit mode by holding one down, which will let you rearrange or delete any of them.

anagram

As you can see though, the letters are all different heights, and align to the top by default. For some applications that would be exactly what is required, but for letters, it makes more sense to have them align to the bottom. To do this, we set the verticalSubviewAlignment on the FlowLayout;

- (void)viewDidLoad
{
    ...
    myFlowLayout.verticalSubviewAlignment = SEssentialsAlignBottom;
    [self.view addSubview:myFlowLayout];
}

With that, our images are now aligned properly;

align

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