Views, View Controllers, User Interaction, View Hierarchies, Segues, Stack Views, Size Classes

Objectives

• You will be able to identify and use documentation to implement UIKit elements
• You will be able to place views on the screen and update their properties
• You will be able to identify and describe the role of View Controllers
• You will be able to identify and implement different Controls
• You will be able to identifiy and use Control Events to execute code
• You will be able to identify and understand the pros and cons of a variety of navigation hierarchies
• You will be able to identify and implement Navigation Controllers
• You will be able to identify and implement a Tab Bar Controller based view hierarchy
• You will be able to identify, describe, and implement storyboard segues and unwind segues
• You will be able to identify, describe, and use Stack Views and basic Auto Layout to place views
• You will be able to use size classes to design effectively for multiple devices

Required Preclass Resources

• UIKit Catalog

  Review the available views and controls available in UIKit. Become familiar with the format of this document.

• About Storyboards
• View Programming - Views

  Read through 'Adding and Removing Subviews section'.

• UIKit User Interface Catalog

  Review the various User Interface elements.

• UIViewController Class Reference
• Apple UIKit User Interface Catalog

  Apple's documentation for UIKit and the User Interface catalog. Look at the different controls Apple gives us in the left navigation bar.

• Apple UIControl Documentation

  Pay attention to UIControlState and the parameters of addTarget:action:forControlEvents:

• Apple UIKit About Controls

  Read the About Controls section. Skip the references to Auto Layout. Click on Buttons, Date Pickers, etc. on the left navigation to see examples of each.

• List of UIControlEvents
• View Controller Catalog for iOS
• Apple UIKit User Interface Catalog
• UITabBarController Documentation
• UITabBarControllerDelegate Documentation

  Review how the Delegate can be used without a Tab Bar View.

• Adding a Segue Between Scenes
• Storyboards Segue Tutorial - Passing Data
• Unwind Segues in iOS Storyboards
• UIStackView
• Ray Wenderlich - UIStackView Tutorial
• Building Adaptive Apps with UIKit

  WWDC 2014 Video

Lesson Video

Video Challenges

• Screen Name

  Create a view that displays your name. Change the font and font color using Interface Builder and change the background color programmatically.

• Lifecycle

  Create a subclass of UIViewController that prints each available lifecycle event to the console.

• Identify the Controls

  Open the Clock system app. Try to identify the different UI elements, specifically the UIControls. Compare with your neighbor.

• Background Disco

  Create a view controller scene that changes background colors on 3 different UIControlEvents on a UIButton.

• Navigation
  • Create a ViewController with buttons that push to 3 different detail views
  • Set various background colors to the detail views to differentiate between them
  • Embed the initial view controller into a UINavigationController
  • Use a 'show' segue to present the views
  • Create IBActions on the detail views to pop the view
• Documentation Review

  Find out what happens when you add more than 5 view controllers to a UITabBarController

• Storyboard Signup View

  Create a project with a SignupViewController that has a text field for an e-mail address and a sign up button to submit the form.

  Create a segue from the Sign Up button to a WelcomeViewController scene that will display 'Welcome (email)!'.

  Use the prepareForSegue function to pass the e-mail address from the text field on the SignupViewController to the WelcomeViewController.

• Overcast Stack Views

  Using Auto Layout and Stack Views, build a close approximation to the player view from the popular podcast client Overcast.

• Size Classed Selfie
  • Create a Single View Application
  • Place a UIImageView on the initial scene using Interface Builder
  • Set the Image View's Image to a photo of yourself (or whatever you'd like)
  • Use Auto Layout or a Stack View to make sure that your UIImageView fills the view of the screen, no matter which size class
  • Verify in Interface Builder by selecting different size classes, or by running differently sized Simulator builds

Stretch Problem

Handling Optionals

Open a new Swift playground. Create a Person class with three properties:

1. name property whose type is String.
2. favoriteColor property whose type is an optional String.
3. favoriteMovie property whose type is an optional String.

Create a custom initializer where you set the name. Then, outside of the Person class, create an instance of Person and initialize it with your name. Set either the favoriteColor OR favoriteMovie property. Next, print out a description of the person's favorite things, being sure to properly handle the optionals beforehand. Also print out the optional property you didn't set and observe the result.

♦ Black Diamond

Create a function that will print out a description of a person's favorite things, or say that the person doesn't like anything. This function should work properly whether or not the optional properties were set. Example printouts below:

Example 1: "John's favorite color is blue."
Example 2: "John's favorite movie is Star Wars."
Example 3: "John's favorite color is blue and his favorite movie is Star Wars."
Example 4: "John doesn't like anything."

Hint

Solution

Guided Project

Views And Storyboards

ViewsAndStoryboards is a collection of challenges for students to complete on the first day to ensure that they understand the basics of UIKit elements, Interface Builder, View Hierarchies, etc..

Project

• Flashlight

  Students will build a simple Flashlight app to practice working with IBOutlets, IBActions, and UIControlEvents.

  ReadMe

• About Me

  About Me is an opportunity for students to introduce themselves via their first app. Students will explore Storyboards, use a variety of UIKit elements, add images, and use Xcode to install the application on an iOS device.

  ReadMe

Mastery Review