README.md

Navigation basics

Slides

Resources

• icons8
• The Noun Project
• Make App Icon

Agenda

• Navigation with SwiftUI
• Navigation with UIKit
• Activity with UIKit + Storyboards

NavigationView

NavigationView in SwiftUI is a container view which allows you to manage other views in a navigation interface.

• push new views
• pop views

Create NavigationView

struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Start Game")
        }
    }
}

Add a title

NavigationView {
    Text("Start Game")
    .navigationBarTitle("Color Game")
}

Push new view

Also known as Master-Detail Navigation.

To present a detail view on top of the master view in NavigationView we use NavigationLink – a button that triggers a navigation presentation when pressed.

struct GameView: View {
    var body: some View {
        Text("Your game goes here")
    }
}

struct HomeView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: GameView()) {
                Text("Start Game")
            }
            .navigationBarTitle("Color Game")
        }
    }
}

The NavigationView automatically adds the back button.

Adding a title to the detail view

struct GameView: View {
    var body: some View {
        Text("Your game goes here")
        .navigationBarTitle("Level 1", displayMode: .inline)
    }
}

Passing data between views

Watch this video

Min 6:55 - 12:30

UINavigationController

A container that defines a stack-based scheme for navigating hierarchical content.

• Only one child view controller is visible at a time
• Manages child view controllers using an ordered array, known as the navigation stack
• The first view controller in the array is the root view controller and represents the bottom of the stack

Selecting an item in the view controller pushes a new view controller onscreen using an animation, thereby hiding the previous view controller.

Tapping the back button in the navigation bar at the top of the interface removes the top view controller, revealing the view controller underneath.

Navigation components

The navigation controller also manages the navigation bar at the top of the interface and an optional toolbar at the bottom of the interface.

Navigation bar

Commonly used within a navigation controller. The UINavigationController object creates, displays, and manages the navigation bar, and uses attributes of the view controllers you add to control the content displayed in the navigation bar.

Storyboard & Segues

A segue defines a transition between two view controllers in the storyboard.

The starting point of a segue is the button, table row, or gesture recognizer that initiates the segue. The end point of a segue is the view controller you want to display. <iframe src="https://youtube.com/embed/Hnrz8ZTaP4s" data-autoplay width="700" height="500"></iframe>

Unwind segue

1. Choose the view controller that should appear onscreen at the end of an unwind segue.
2. Define an unwind action method on the view controller you chose. @IBAction func unwindToVC1(segue:UIStoryboardSegue)
3. Navigate to the view controller that initiates the unwind action.
4. Control-click the button (or other object) that should initiate the unwind segue. This element should be in the view controller you want to dismiss.
5. Drag to the Exit object at the top of the view controller scene.
6. Select your unwind action method from the relationship panel.

Rock Paper Scissors

Starter Project

After Class

You will need to know the basic concepts on Autolayout for your final project. Autolayout is how we can set up the views in our apps and position them using a set of rules called constraints.

These two videos go over the basics and show you how to get started.

• Autolayout introduction
• Autolayout & Constraints

Additional Resources

• SwiftUI Navigation Guide
• SwiftUI Navigation Video
• UINavigationController Apple Docs
• UINavigationBar Apple Docs
• Segues
• Creating unwind segues
• More on unwind segues
• How to know present or push was used