UI Design and Storyboarding - Washington Stateholder/courses/MAD/slides/03-Design.pdf · UI Design...

UI Design and StoryboardingMobile Application Development in iOS

School of EECS

Washington State University

Instructor: Larry Holder

Mobile Application Development in iOS 1

Outline

• Model-View-Controller (MVC) design

• Storyboarding

• Delegates

• Multi-threading

Mobile Application Development in iOS 2

Model-View-Controller (MVC)

Mobile Application Development in iOS 3

class ViewController {IBAction …IBOutlet …

}

class Model {var value: Int…

}

Storyboard…

DataDelegate

Model

Mobile Application Development in iOS 4

protocol MyTimerDelegate {func timeChanged (time: Int)func timesUp (message: String)

}

class MyTimer {var initialTime: Intvar currentTime: Intvar message: Stringvar running: Boolvar delegate: MyTimerDelegate?

init (initialTime: Int, message: String) {self.initialTime = initialTimeself.currentTime = initialTimeself.message = messageself.running = false

}

Model

Mobile Application Development in iOS 5

func start () {running = true

}

func stop () {running = false

}

func reset () {currentTime = initialTimedelegate?.timeChanged(time: currentTime)

}

func decrement () {if running {

currentTime -= 1delegate?.timeChanged(time: currentTime)if currentTime == 0 {

running = falsedelegate?.timesUp(message: self.message)

}}

}

Storyboard

Mobile Application Development in iOS 6

Storyboard: Adding Elements

• Adding elements to views– Create IBOutlet to get/set properties

of element

– Create IBAction to detect interaction with element

Mobile Application Development in iOS 7

1. Drag element into view.

3. Connect element to view controller.

2. Add layout contraints.

Delegate

• Object that responds to events from another

object

• Defines a protocol that must be followed

• View elements generating multiple different

actions use delegates (rather than IBAction)

– E.g., UITextField

Mobile Application Development in iOS 8

Delegate Example: UITextField

• UITextFieldDelegate

– textFieldDidBeginEditing

– textFieldDidEndEditing

– textFieldShouldReturn

• More

– developer.apple.com/documentation/uikit/uitextfielddelegate

Mobile Application Development in iOS 9

UITextField Delegate

Mobile Application Development in iOS 10

class ViewController: UIViewController, UITextFieldDelegate {@IBOutlet weak var messageText: UITextField!

func textFieldDidEndEditing(_ textField: UITextField) {myTimer.message = textField.text!

}

func textFieldShouldReturn(_ textField: UITextField) -> Bool {textField.resignFirstResponder() // remove keyboard on Returnreturn false // do default behavior (i.e., nothing)? No

}

override func viewDidLoad() {super.viewDidLoad()messageText.delegate = self

}}

Multi-Threading• Running multiple tasks concurrently• Tasks assigned to threads• Threads assigned to processor cores

Mobile Application Development in iOS 11

A9: 2 cores, iPhone 6 A10: 4 cores, iPhone 7 A11: 6 cores, iPhone 8/X

Neural Processing Unit

Multi-Threading in iOS

• Manipulate “queues”, not threads

• Grand Central Dispatch (GCD)

– iOS mechanism for sending tasks to different queues

– You can create your own queues, and assign tasks to them

– Threads take tasks from queues and run on a core

• Main queue used for UI and user interaction

– Don’t put intensive tasks on Main queue!

• Also, UI changes not on Main queue “lost”

Mobile Application Development in iOS 12

DispatchQueue.main.async {// Do something easy// Or affecting UI

}

let myQueue = DispatchQueue.global()myQueue.async {

// Do something, not affecting UI}

Timers

• Timer class

– Wait specified time interval, then call function

– Can repeat

• Start immediately

• Stop

Mobile Application Development in iOS 13

scheduledTimer(withTimeInterval interval: TimeInterval,repeats: Bool, block: @escaping (Timer) -> Void) -> Timer

Timer.invalidate()

Timers

• Create

• Create to fire later

• Add to run loop

Mobile Application Development in iOS 14

init(timeInterval interval: TimeInterval,repeats: Bool, block: @escaping (Timer) -> Void) -> Timer

init(fire: Date, timeInterval interval: TimeInterval,repeats: Bool, block: @escaping (Timer) -> Void) -> Timer

let runLoop = RunLoop.currentrunLoop.add(timer, forMode: .defaultRunLoopMode)

Timers

Mobile Application Development in iOS 15

var internalTimer: Timer?

func startButtonTapped {// Start immediatelyinternalTimer = Timer.scheduledTimer(withTimeInterval: 1.0,

repeats: true, block: handleTick)// Or, initialize then add to run loopinternalTimer = Timer.init(withTimeInterval: 1.0,

repeats: true, block: handleTick)RunLoop.current.add(internalTimer!, forMode: .defaultRunLoopMode)

}

func timesUp (message: String) {internalTimer?.invalidate()messageLabel.text = message

}

func handleTick (timer: Timer) {print("tick")

}

Resources• Storyboard

– https://www.raywenderlich.com/160521/storyboards-tutorial-ios-11-part-1

• Protocols and Delegates– https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Progra

mming_Language/Protocols.html

• UITextField and UITextFieldDelegate– https://developer.apple.com/documentation/uikit/uitextfield

– https://developer.apple.com/documentation/uikit/uitextfielddelegate

• Grand Central Dispatch (GCD)– https://developer.apple.com/documentation/dispatch

• Timer– https://developer.apple.com/documentation/foundation/timer

Mobile Application Development in iOS 16