• Home
  • About
  • Our Apps
  • Learn
  • Contact
Login

Register

Login
Seemu Apps Seemu Apps
  • Home
  • About
  • Our Apps
  • Learn
  • Contact

Tutorial – Navigation between View Controllers

Home ios Tutorial – Navigation between View Controllers

Tutorial – Navigation between View Controllers

Jul 30, 2015 | Posted by Andrew | ios, swift, tutorial, xcode |

In this tutorial we will look at navigation in Swift, using segue’s and the navigation controller to navigate between different view controllers.

To start off with we have created a new blank single view application and changed the Main.storyboard as follows:

  1. Add two new view controllers to the right of the default view controller
  2. Add two buttons to the default controller – Page 1 and Page 2
  3. Add a label to identify the new view controllers – 1 & 2

 

Screen Shot 2015-07-27 at 5.56.40 pm

Now we are going to create the segue to navigate to page 1 & 2. To make a segue click on button 1, hold down the control key and drag the line and drop it on the view controller with number 1. You will see the following menu:

Screen Shot 2015-07-27 at 6.00.14 pm

Select “Show” from the action segue, and repeat the same steps for Page 2. Now run the App & test the buttons – you will be able to click on the buttons to navigate through our app. But wait a minute, theres a problem?!?! Once you have navigated to another view you cannot go back. To resolve this you can either

  • Make buttons on the 1 & 2 view controllers to go back to the first one (This makes the storyboard a mess)
  • Or even better use the Navigation Controller to manage it all for you automatically!

So lets look at how to use this magical Navigation controller. On your storyboard in the Object library simply search for the Navigation Controller, Screen Shot 2015-07-27 at 6.06.14 pm and drag this onto your storyboard, to the left of the default view controller with the Page 1 & Page 2 buttons. Now also drag the right arrow Screen Shot 2015-07-27 at 6.07.47 pm from the default view controller so it set’s to the left of our new navigation controller. Your storyboard should look something like the following:

Screen Shot 2015-07-30 at 10.50.08 am

Now select the navigation controller you placed, hold down the control key and the line to our default view controller (The one with the page 1 & page 2 buttons), drop it on here and from the menu select “root view controller”. Run your app now & try the buttons out! You will now notice there is a navigation bar up the top and you can choose the Back button to go back. This makes it easy to navigate your app without any additional coding. If you wish to name the titles of your navigation bar up the top simply drag the Navigation Item from the object library to your navigation bar and you can set the title up the top.

Screen Shot 2015-07-30 at 10.52.17 am

DownloadSourceCode

Tags: navigationnavigation controllersegueview controller
1
Share

About Andrew

Andrew is a 24 year old from Sydney. He loves developing iOS apps and has done so for two years.

You also might be interested in

UINavigation Bar background image

Mar 4, 2016

Making the UINavigation bar have a background image of your[...]

Tutorial – Set Navigation Bar Color

Mar 3, 2016

You can simply set the Navigation Bar Color in XCode[...]

Tutorial – Pass data between View Controllers using a Segue

Aug 2, 2015

In the last tutorial we looked at navigating view controllers[...]

Welcome

Hi I am Andrew and welcome to Seemu Apps! Have a look around, we provide tutorials for primarily iOS apps.
Bluehost website hosting discount

Seemu’s Studio Setup

Blue Yeti Microphone
Rode Stand
Spider Shock Mount
Mac Keyboard Cover
Screenflow - recording software

Contact Us

We're currently offline. Send us an email and we'll get back to you, asap.

Send Message

Footer

:)

© 2025 · Your Website. Theme by HB-Themes.

  • Home
  • About
  • Our Apps
  • Learn
  • Contact
Prev Next