ui design
play

UI Design Mobile Application Development in iOS School of EECS - PowerPoint PPT Presentation

UI Design Mobile 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 Timers Multi-threading Mobile


  1. UI Design Mobile Application Development in iOS School of EECS Washington State University Instructor: Larry Holder Mobile Application Development in iOS 1

  2. Outline • Model-View-Controller (MVC) design • Timers • Multi-threading Mobile Application Development in iOS 2

  3. Model-View-Controller (MVC) class ViewController { IBAction … IBOutlet … } e t D a a g t e a l e D class Model { Storyboard… var value: Int … } Mobile Application Development in iOS 3

  4. General Scenario • Want to modify view when some event happens within model • E.g., if counter == 0, then display message Mobile Application Development in iOS 4

  5. Bad Solution class MyViewController: UIViewController { @IBOutlet weak var myLabel: UILabel! var badModel = BadModel() badModel.label = myLabel badModel.decrement() } class BadModel { var label: UILabel! var counter: Int = 1 func decrement() { counter = counter – 1 if counter == 0 { label.text = "Time's up!" } } } Mobile Application Development in iOS 5

  6. Good (MVC) Solution protocol MyDelegate { func timesUp() } class MyViewController: UIViewController, MyDelegate { @IBOutlet weak var myLabel: UILabel! var goodModel = GoodModel() goodModel.delegate = self func timesUp() { myLabel.text = "Time's up!" // What if we want to make other changes? } } Mobile Application Development in iOS 6

  7. Good (MVC) Solution class GoodModel { var delegate: MyDelegate? var counter: Int = 0 func decrement() { counter = counter – 1 if counter == 0 { delegate?.timesUp() } } } Mobile Application Development in iOS 7

  8. MyTimer Example Mobile Application Development in iOS 8

  9. Model: MyTimer Class protocol MyTimerDelegate { func timeChanged (time: Int) func timesUp () } class MyTimer { var delegate: MyTimerDelegate? var initialTime: Int = 60 var currentTime: Int = 60 func setInitialTime(_ initTime: Int) { initialTime = initTime } func start() { // todo } func stop() { // todo } func reset() { // todo } } Mobile Application Development in iOS 9

  10. SideBar: Multi-Threading • Running multiple tasks concurrently • Tasks assigned to threads • Threads assigned to cores A12: 6 CPU cores, 4 GPU cores, A13: 6 CPU cores, 4 GPU cores, 8 NPU cores, iPhone XS 8 NPU cores, iPhone 11 A11: 6 cores, iPhone 8/X Mobile Application Development in iOS 10

  11. Multi-Threading in iOS let myQueue = DispatchQueue.global() Manipulate “queues”, not threads • myQueue.async { // Do something in background Grand Central Dispatch (GCD) • // Not affecting UI } – 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 them on a core Main queue used for UI and user interaction • – Don’t put intensive tasks on Main queue! DispatchQueue.main.async { // Do something easy Also, UI changes not on Main queue “lost” • // Or affecting UI } Mobile Application Development in iOS 11

  12. Timers • Timer class – Wait specified time interval, then call function – Can repeat • Start immediately Timer.scheduledTimer(withTimeInterval interval: TimeInterval, repeats: Bool, block: @escaping (Timer) -> Void) -> Timer • Stop Timer.invalidate() Mobile Application Development in iOS 12

  13. Timers • Create init(timeInterval interval: TimeInterval, repeats: Bool, block: @escaping (Timer) -> Void) -> Timer • Create to fire later init(fire: Date, timeInterval interval: TimeInterval, repeats: Bool, block: @escaping (Timer) -> Void) -> Timer • Add to run loop RunLoop.current.add(timer, forMode: .default) Mobile Application Development in iOS 13

  14. Model: MyTimer Class var timer: Timer? func start() { // Start immediately timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true, block: handleTick) } func handleTick (timer: Timer) { // todo } func stop() { timer?.invalidate() } func reset() { // todo } Mobile Application Development in iOS 14

  15. ViewController class ViewController: UIViewController, MyTimerDelegate { var myTimer = MyTimer() var initialTime: Int = 60 // todo: interface outlets and actions func timeChanged(time: Int) { // todo } func timesUp() { // todo } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. myTimer.delegate = self myTimer.setInitialTime(initialTime) // todo: further initializations } } Mobile Application Development in iOS 15

  16. Storyboard Mobile Application Development in iOS 16

  17. ViewController // Interface outlets @IBOutlet weak var initialTimeLabel: UILabel! @IBOutlet weak var initialTimeSlider: UISlider! @IBOutlet weak var currentTimeLabel: UILabel! @IBOutlet weak var timesUpLabel: UILabel! @IBOutlet weak var startButton: UIButton! @IBOutlet weak var stopButton: UIButton! @IBOutlet weak var resetButton: UIButton! Mobile Application Development in iOS 17

  18. ViewController // Interface actions @IBAction func initialTimeSliderValueChanged(_ sender: UISlider) { // todo } @IBAction func startTapped(_ sender: UIButton) { startButton.isEnabled = false stopButton.isEnabled = true resetButton.isEnabled = false myTimer.start() } @IBAction func stopTapped(_ sender: UIButton) { // todo } @IBAction func resetTapped(_ sender: UIButton) { // todo } Mobile Application Development in iOS 18

  19. Resources • Grand Central Dispatch (GCD) – developer.apple.com/documentation/dispatch • Timer – developer.apple.com/documentation/foundation/timer Mobile Application Development in iOS 19

Recommend


More recommend