1. CSC 581: Mobile App Development
Spring 2018
Unit 2: Introduciton to the UIKit
UIKit, UIViews
UIView subclasses
UIControl subclasses

2. UIKit the UIKit is a code framework for building mobile apps
the foundational class for all visual elements in the UIKit is the UIView (or just view)
a view is a clear rectangular shape that is customized to display things on the screen
UIView subclasses:
UILabel – for displaying text
UIImageView – for displaying images
UIScrollView – for scrollable content
most app screens consist of many views

3. UIView subclasses UILabel UIImageView UITextView UIScrollView
for displaying text
UIImageView
for displaying images
UITextView
for entering and displaying multiline text
UIScrollView
for scrollable content

4. UIView subclasses UITableView UIToolbar UINavigationBar UITabBar
for displaying data in a scrollable column of rows and sections
UIToolbar
for displaying a toolbar of buttons
usually at the bottom of the screen
UINavigationBar
for displaying main navigational controls
usually at the top of the screen
UITabBar
for displaying options for actions

5. UIControl subclasses UIButton UISegmentedControl UITextField UISlider
can be clicked
UISegmentedControl
can select from visible options
UITextField
can enter text
UISlider
can select from a range
UISwitch
can turn on or off
UIDatePicker
can select a date

6. UIViewController recall that when you create a Single View App
Xcode automatically creates several files and folders
Main.storyboard is the template for the screen, used by Interface Builder
ViewController.swift is a class that is derived from UIViewController
typically, each screen in an app will have a scene in the storyboard
each scene in the storyboard will have its own ViewController
when you add an element to the screen (e.g., a button), it becomes a child view of the main view
as we saw in HW1, can connect UI elements to the ViewController code by control-dragging into the code (and specifying Outlet to create a field, Action to create a method)

7. in-class / HW 2a review the UI elements in Lesson 2.7
follow the tutorial in Lesson 2.8
create an app with
a UILabel at the top with your name
a UIImageView and UILabel for a photo and description
a UISegmentedControl to select among 3 photos/descriptions
your app should look reasonable on different sized devices
don't worry about rotations
you may need to review Lesson 2.9

8. App layout
the Add New Alignment Constraints button in Interface Builder (IB)
allows you to center an element in the screen
the Add New Constraints button in IB
allows you to set the size of an element
allows you to position an element relative to edges or other elements
if you set constraints and the layout in IB does not match
click on the Resolve Auto Layout button in IB

9. Stack views a stack view manages a row or column of UI elements
select the elements and click on the Embed in Stack button
stack views can
be edited as a whole in the Attribute Editor
vertical vs. horizontal axis
fill vs. leading vs. center vs. trailing alignment
fill vs. fill equally vs. fill proportionally distribution
spacing amount
have constraints applied as a whole
can be embedded in other stack views

10. in-class / HW 2b review the layout details in Lesson 2.10
follow the tutorial in the Calculator Lab
use layout and stack views to build a calculator interface
UILabel at the top right for the number
UIButtons for each of the calculator buttons
add the functionality to this interface (should behave the same as the calculator in the Apple Launchpad)
the CalculatorModel class is provided to help
elegance is not the priority here