Timering

Purp

Custom Segue, Unwind Segue with Animations & NavController - Part 1/2

In this tutorial, we create 2 UIViewController With 1-1 UIButtons and Embed UINavigationController. After that, we create Custom Segue, and send data to SecondViewController; finally we set the UnWindSegue too. This tutorial is a Basic Settings tutorial, which made IOS 8 and Xcode 6. 

Steps:

  1. New SingleView Project
  2. Create Show Segue from ViewController to SecondViewController
  3. Embed Navigation Controller in first ViewController
  4. Send Data with Segue
  5. Test in IOS Simulator
  6. Create Unwind Segue
  7. Test in IOS Simulator again

Parts of the series:

  1. Part 2/2: The Animation - Custom Segue, Unwind Segue with Animations & NavController

Video tutorial:

1. New SingleView Project

SpotlessiCode | IOS Tutorial | Custom Segue 1_1

1.2. Create SecondViewController class

Right Click and choose New File:

SpotlessiCode | IOS Tutorial | Custom Segue 1_2

Choose Cocoa Touch Class

SpotlessiCode | IOS Tutorial | Custom Segue 1_2_1

Add Name: SecondViewControler , and select Type: UIViewController.

SpotlessiCode | IOS Tutorial | Custom Segue 1_2_2

1.3. Create SecondViewController on Main Storyboard, using Simulated Metrics

Add new ViewController (drag &drop from right side objects), and in Attributed Inspector switch Simulated Metrics Size from Inferred to iPhone device screen size. Now you can see controllers, and you can work with them.

SpotlessiCode | IOS Tutorial | Custom Segue 1_3

Set Custom Class name to “SecondViewController” like the h and m file name.

SpotlessiCode | IOS Tutorial | Custom Segue 1_3_1

Set Identity Storyboard ID

SpotlessiCode | IOS Tutorial | Custom Segue 1_3_2

If you are using Segue later, you can refer to this name when you would like to say that from which or to which storyboard comes or goes the Segue.

1.4. Create Buttons on ViewController

Add button to the ViewController, click inside, enter the name. Click on "show the Assistant editor". Check, the file which appears (Automatic - ViewController or SecondViewController which one active on Storyboard - (click on it)).

SpotlessiCode | IOS Tutorial | Custom Segue 1_4

Drag the button: with press cmd and drag into the h file below the @interface line. Select Type: UIButton, and add Name: CustomSegueButton.

SpotlessiCode | IOS Tutorial | Custom Segue 1_4_2

SpotlessiCode | IOS Tutorial | Custom Segue 1_4_3

SpotlessiCode | IOS Tutorial | Custom Segue 1_4_4

Do the same with the SecondViewController and name the button as CustomUnwindSegueButton.

SpotlessiCode | IOS Tutorial | Custom Segue 1_4_5

2. Create Show Segue from ViewController to SecondViewController

2.1. Ctrl-drag the CustomSegueButton to the SecondViewController. 

After drag, int the list select Show.

SpotlessiCode | IOS Tutorial | Custom Segue 2_1

2.2. Click left side bottom on the Show Document Outline button, and click on the Segue.

SpotlessiCode | IOS Tutorial | Custom Segue 2_2

2.3. Click right side on the Show Attribute Inspector button.

SpotlessiCode | IOS Tutorial | Custom Segue 2_3_1

And add the Segue Identifier name: CustomSeguetoSecondView, after that just click Enter.

SpotlessiCode | IOS Tutorial | Custom Segue 2_3_2

3. Embed Navigation Controller in first ViewController

If we would like to send data (string, number color settings…) from one ViewController to another one, and create a complex Application, it will be necessary.

3.1. Click on the ViewController, then Editor menu and select Navigation Controller.

SpotlessiCode | IOS Tutorial | Custom Segue 3_1

3.2. Change Simulated Metrics Size property from Inferred to one of the iPhone device screens.

SpotlessiCode | IOS Tutorial | Custom Segue 3_2

SpotlessiCode | IOS Tutorial | Custom Segue 3_2_2

4. Send Data with Segue

4.1. Import SecondviewController.h file in ViewController.m file.

SpotlessiCode | IOS Tutorial | Custom Segue 4_1

4.2. Do in SecondViewController.h: create NSString *colorstring

SpotlessiCode | IOS Tutorial | Custom Segue 4_2

4.3. In ViewController.m: create PrepareForSegue code, which prepares data to send.

You can prepare more Segue connections to more different ViewControllers. So you should use here the Segue Identifier name to tell which one send which data to where.

4.4. In SecondViewController.m: in viewDidLoad: change background color of the View.

Synthesize the colorString and create if statement, if colorString is equal to Purple, the view backgroundColor set to UIColor purple color.

5. Test in IOS Simulator

Just click on Play button.

SpotlessiCode | IOS Tutorial | Custom Segue 5

6. Create Unwind Segue

6.1. Do in ViewController.m: Create unwind code

6.2. Do on SecondView on Storyboard: Ctrl-drag the CustomUnwindSegueButton to the Exit and select “unwindfromSecondView”.

SpotlessiCode | IOS Tutorial | Custom Segue 6

6.3. Add code to UnwindSegue to change the first ViewController background.

7. Test in IOS Simulator again

Just click on Play button.

SpotlessiCode | IOS Tutorial | Custom Segue 7_1

SpotlessiCode | IOS Tutorial | Custom Segue 7_2

Next: Part2

To do the customization on segues click to the next post Custom Segue and Custom Unwind Segue with Animations using Navigation Controller - Part 2/2!

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 twitter! Check Footer section for these opportunities!