Timering

Purp

Storyboard Basic Settings Part 1. - ViewController, NavigationController, UIBarButtonItems

This tutorial help to do basic settings, before we do specific exercises. I did this for help myself. :) At the next Tutorials, I will just link it, and not write again and again the basic settings at Storyboard, as creating new UIViewController, new CocoaTouch files, or embed UINavigationController and add UIBarButtonItems.

Steps:

  1. Create the project and add a new ViewController
  2. Create New ViewController and subclass
  3. Create Show Segue from FirstView to SecondView
  4. Embed Navigation Controller, add UIBarButtonItem
  5. Run your App in your IOS Simulator

1. Create the project and add a new ViewController

1.1. Create new Project 

Choose Single View type, and add a name, select Objective-C language and do not check the “Use Core Data” checkbox.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 1_1_1

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 1_1_2

1.2. Change Simulated Metrics

Click on Main.storyboard, and click on ViewController, and change the simulated Metrics to iPhone 4.7-inch for example, so you can manage your ViewControllers on your monitor :)

 SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 1_2

Probably you will find these line there:

2. Create New ViewController and subclass

2.1. Drag & drop a new ViewController to the Storyboard, and change the simulated metrics too.

 SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_1

2.2. Right click on your Files and select New File menu…

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_2_1

…select Cocoa Touch Class…

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_2_2

…add a name…

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_2_3

… and the result: you have new h and m file as a viewcontroller subclass.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_2_4

2.3. Enter the new class reference for the second View Controller. 

So all you’re writing in these files will happen with this ViewController of the storyboard.
Click on your Main.storyboard, select the second ViewController.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_3_1

Add the class name to the CustomClass Field:

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_3_2

Add the same name as Storyboard ID, and check the “Use storyboard ID” checkbox at the Restoration ID Field.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 2_3_3

3. Create Show Segue from FirstView to SecondView

3.1. Click on your Firs ViewController in the yellow icon.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 3_1

3.2. Press Ctrl button and drag&drop with your mouse to the SecondViewController. Select “Show” segue.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 3_2_2

3.3. Click on it, and add Your own name to identify it: e.g. “ShowSecondView

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 3_3

Probably you will find these line there:

4. Embed Navigation Controller

4.1. Embed in

Click on your First ViewController on the Storyboard. After that, select Editor - Embed in - Navigation Controller menu.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_1

Now you have a NavigationController, which can manage your ViewCotnrollers.

4.2. Add UIBarButtonItem to your NavigationBar of Frist ViewController.

Select it in your Object library,

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_2_1

drag&drop to the right side of your UINavigationBar.
Select Add button Identifier.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_2_2

4.3. Create New Segue. Click on your first segue, and press BackSpace button.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_3_1

Click on your “Add” button.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_3_2

Drag&drop with ctrl button pressed to the SecondViewController. Select Show option, and now you have new Segue, handle by the “Add” button.

SpotlessiCode | IOS Tutorial | Storyboard Basic Settings | Part 1 | Create View Controller | Embed Navigation Controller 4_3_3

5. Run your App in your IOS Simulator

You can see it works fine :)

Share & Follow

If you would like to be notified of my new solutions, please subscribe to my Newsletter or my youtube channel and/ or follow me on Facebook or Twitter! Check Footer section for these opportunities!