Coder Social home page Coder Social logo

objc-navigationcontrollers-immersive-alum's Introduction

NavigationControllers

Goals

  • Learn about segues, and use -prepareForSegue:sender: to pass data forward to destination view controllers
  • Use navigation controllers to control a stack of view controllers

Navigation Controllers

UINavigationController provides a means to manage the navigation of hierarchical content. Often in iOS, we'll have related content that requires the pushing of one view on top of another. The content in the destination view is often derived from the content that was selected in the previous screen. In this Lab, we'll explore using navigation controllers to push content from one view to another.

Instructions

In the project for this lab, add 3 classes:

  1. TeamMember, an NSObject;
  2. TeamViewController, a UIViewController; and
  3. TeamDetailViewController, another UIViewController.

The three classes serve the following functions:

  • TeamMember is a model class that represents each member of your team. It should have a name (name), phone number (phoneNumber), birth city (birthCity), birth state (birthState), favorite band (favoriteBand), and photo (photo). (Hint: use UIImage for the photo property. You can use the class method imageNamed: to retrieve assets in your assets catalog. We've included some images with this project Notice the blue folder Images.xcassets in your file navigator? That's where you can find the images.)
  • TeamViewController manages a view with UIButtons for each of your team members.
  • TeamDetailViewController is pushed onto the navigation stack when a button is pressed in TeamViewController. It displays the details for the particular team member that was tapped in the TeamViewController.
  1. In the storyboard, set the custom class of the view controllers to the new subclasses you just created.

  2. Control-drag from each button on the TeamViewController to the TeamDetailViewController and select a "Show" segue. This makes it so that tapping any button performs a segue to the TeamDetailViewController.

    Run the app and see that the buttons do transition to the detail view controller. However, there are two problems. First, the detail is presented modally, and there's no way to get back to the previous screen. Second, the detail view controller has no idea which button was tapped! Let's remedy those issues.

  3. In order for the segue to work as expected, you'll need to embed TeamViewController in a navigation controller in your storyboard. Do that!

  4. Use the -prepareForSegue:sender: method of TeamViewController to pass the tapped user forward to the detail view controller. Think about the best way to do this. The detail view controller should set all of its labels and image based on the team member that was tapped. Should you expose the IBOutlets of the detail view controller publicly, or is there a cleaner way?

Hints

  • The -prepareForSegue:sender: method in your TeamViewController is passed a UIStoryboardSegue argument which can be used to access the destination view controller of the segue. Since we know the destination is a TeamDetailViewController, we can cast it to the appropriate type and set its teamMember property to the member that corresponds with the tapped button. How can you figure out what button triggered the segue? (There are multiple options -- segue identifiers or the sender argument. Play around with each!)

View NavigationControllers on Learn.co and start learning to code for free.

objc-navigationcontrollers-immersive-alum's People

Contributors

altyus avatar markedwardmurray avatar fs-lms-test-bot avatar fislabstest avatar misterfifths avatar sarogers avatar zdrossman avatar

Watchers

 avatar Mat Balez avatar Victoria Thevenot avatar  avatar Joe Cardarelli avatar Taranjyot Singh avatar Sara Tibbetts avatar  avatar Sophie DeBenedetto avatar  avatar Antoin avatar Nicole Kroese  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.