CSC 581: Mobile App Development Spring 2018 Unit 2: Introduciton to the UIKit UIKit, UIViews UIControl subclasses 1 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 : ü UILabel for displaying text ü UIImageView for displaying images ü UIScrollView for scrollable content most app screens consist of many views 2 1
ü UILabel for displaying text ü UIImageView for displaying images ü UITextView for entering and displaying multiline text ü UIScrollView for scrollable content 3 ü UITableView 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 4 2
UIControl subclasses ü UIButton 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 5 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) 6 3
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 7 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 8 4
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 9 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 10 5