Introduction to Xcode and MVC Model

What is in IOS?

Core OS

  • OS X Kernel
  • Mach 3.0
  • BSD
  • Sockets
  • Security
  • Power Management
  • Keychain Access
  • Certificates
  • File System
  • Bonjour

Core Services

  • Collection
  • Address Book
  • Networking
  • File Access
  • SQLite
  • Core Location
  • Net Services
  • Threading
  • Preferences
  • URL Utilities

Media

  • Core Audio
  • OpenAL
  • Audio Mixing
  • Audio Recording
  • Video Playback
  • JPEG, PNG, TIFF
  • PDF
  • Quartz (2D)
  • Core Animation
  • OpenGL ES

Cocoa Touch (API for IOS)

  • Multi-Touch
  • Core Motion
  • View Hierarchy
  • Localization Controls
  • Alerts
  • Web View
  • Map Kit
  • Image Picker
  • Camera

IOS Development

  • Use Apple iOS SDK
  • Need x86 Macintosh
  • iPhone Simulator for Mac
  • Apple ID
  • Objective‐C, Swift (can work side-by-side with Objective-C)

Platform Components

  • Tools - Xcode
  • Language - swift
  • Frameworks - Foundation Kit, UIKit, Map Kit, Core Data, Core Motion
  • Design Strategies - MVC

iOS Project Structure

The MVC Model

Model-View-Controller (MVC)

IOS Development uses MVC Model as Design Straegies.

The Model-View-Controller (MVC) design pattern assigns objects in an application one of the three roles:

  • Model
    • What your application is (but not how it is displayed)
  • View
    • Minion of Controller (UI)
  • Controller
    • How your model is presented to the users (UI Logic)

Why MVC?

  • MVC is central to a good design for a Cocoa application
  • Many objects in these applications tend to be more reusable, and their interfaces tend to be better defined
  • Applications with an MVC design are also more easily extensible than other applications
  • Many Cocoa technologies and architectures are based on MVC and require that your custom objects play one of the MVC roles

The Model Objects

What your application is (but not how it is displayed)

  • encapsulate the data specific to an application
  • defines the logic and computation that manipulate and process that data
  • can be reused in similar problem domains
  • should have no explicit connection to the view objects that present its data and allow users to edit that data
  • should not be concerned with user-interface and presentation issues

The View Objects

UI

  • A view object is an object in an application that users can see
  • knows how to draw itself and can respond to user actions
  • to display data from the application’s model objects and to enable the editing of that data

The Controller Objects

UI Logic

  • A controller object acts as an intermediary between one or more of an application’s view objects and one or more of its model objects.
  • a conduit through which view objects learn about changes in model objects and vice versa.
  • can also perform setup and coordinating tasks for an application and manage the life cycles of other objects

How do they communicate

The pattern(camp) defines not only the roles object play in the application, it defines how objects communicate with each other.

  • Controller can talk directly to the Model
  • Controller can talk directly to the View (Through Outlet)
  • Model cannot talk directly to the Controller (Model should be UI independent)
  • View can sort of talk to the Controller, but the communication is blind and structured
  • Model and View should never talk to each other

View can sort of talk to the Controller, but the communication is blind and structured

How View “sort of” talk to the Controller?

  • The Controller can drop a target (method) on itself
  • Then hand out an action to the View
  • The View sends the action (call the method) when things happen in the UI
  • Sometimes the View needs to synchronize with the Controller
  • The Controller sets itself as the View’s delegate The delegate is set via a protocol
  • View does not own the data they display So, again, a protocol is needed to acquire it
  • Controller is almost always the data source. Controller interprets/formats Model information for the View

Model cannot talk directly to the Controller. (Model should be UI independent)

How Model “Notify” to Controller?

  • If the Model has information to update the Controller, it uses a “radio station” (like broadcast mechanism).
  • Controller or other Models “tune in” to interesting stuffs, but a View probably will not tune in to a Model’s station

Advanced UIViews and Gestures

The UIView class

  • Views are the fundamental building blocks of your app’s user interface
  • the UIView class defines the behaviors that are common to all views
  • A view object renders content within its bounds rectangle and handles any interactions with that content
  • The UIView class is a concrete class that you can instantiate and use to display a fixed background color
  • The view subclasses, such as labels, images, buttons, and other interface elements commonly found in apps, can be used to draw more sophisticated content

Jobs of View Objects

View objects are the main way your application interacts with the user. They might be used in the following ways:

  • Drawing and animation

    • Views draw content in their rectangular area using UIKit or Core Graphics.
    • Some view properties can be animated to new values.

  • Layout and subview management

    • Views may contain zero or more subviews.
    • Views can adjust the size and position of their subviews.
    • Use Auto Layout to define the rules for resizing and repositioning your views in response to changes in the view hierarchy.

  • Event handling

    • A view is a subclass of UIResponder and can respond to touches and other types of events.
    • Views can install gesture recognizers to handle common gestures.

UI Components

UILabel

A view that displays one or more lines of read-only text, often used in conjunction with controls to describe their intended purpose

  • A variablely sized amount of static text

To configure an UILabel:

1
2
3
4
5
6
7
8
9
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myLabel: UILabel!

//Common attributes
myLabel.text = "Hello"
myLabel.backgroundColor = UIColor.purple
myLabel.textColor = UIColor.gray
myLabel.font = UIFont(name: "Arial", size: 35)

UITextField

An object that displays an editable text area in your interface

  • Text Field that allow users to input things

To configure an UITextField:

1
2
3
4
5
6
7
8
9
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myTextField: UITextField!

//Common attributes
myTextField.text = "Hello"
myTextField.backgroundColor = UIColor.red
myTextField.textColor = UIColor.black
myTextField.font = UIFont(name: "Arial", size: 35)

UIButton

A control that executes your custom code in response to user interactions

  • Button that runs some custom code when pressed

To configure an UIButton:

1
2
3
4
5
6
7
8
9
10
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myButton: UIButton!
@IBAction func ButtonClicked(_ sender: UIButton){
  
  //Common attributes
	myButton.setTitle("New Title", for: UIControl.State.normal)
  let buttonTitle = myButton.currentTitle!
}

UISwitch

A control that offers a binary choice, such as On/Off

  • A Switch control

To configure an UISwitch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var leftSwitch: UISwitch!
@IBAction func switchStatChanged(_ sender: UISwitch){
  
  //Common attributes
  leftSwitch.setOn(true, anitmated: true)
  
	if(leftSwitch.isOn)
  {
		//do something
  }
  else
  {
    //do something else
  }
}

UISlider

A control used to select a single value from a continuous range of values

  • A Slider

To configure an UISlider:

1
2
3
4
5
6
7
8
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var mySlider: UISlider! 
@IBAction func sliderValueChanged(_ sender: UISlider){
  
  //Common attributes
  let sliderValue = mySlider.value
}

UISegmentedControl

A horizontal control made of multiple segments, each segment functioning as a discrete button

  • Display multiple segments, each of them function as discrete button.

To configure an UISegmentedControl:

1
2
3
4
5
6
7
8
9
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var mySegControl: UISegmentedControl!
@IBAction func segmentedControlValueChanged(_ sender: UISegmentedControl){
  
  //Common attributes
  let index = mySegControl.selectedSegmentIndex
  mySegControl.insertSegment(withTitle: "Third", at: 2, animated: true)
}

WKWebView

An object that displays interactive web content, such asfor an in-app browser

  • Displays embedded web content and enables content navigation (WebKit View)

To configure WKWebView:

1
2
3
4
5
6
7
8
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myWKWebView: WKWebView!

//Load an URL content
let myURL = URL(string:"https://www.google.com/")
let myRequest = URLRequest(url: myURL!)
myWKWebView.load(myRequest)

Note you need to link the WebKit.framework in the setting.

UIActivityIndicatorView

A view that shows that a task is in progress

  • Loading indicator

To configure an UIActivityIndicatorView:

1
2
3
4
5
6
7
8
9
10
11
12
13
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myActivityIndicator: UIActivityIndicatorView!

//Start and Stop
myActivityIndicator.startAnimating()
myActivityIndicator.stopAnimating()
if(myActivityIndicator.isAnimating){
  //do something
}
myActivityIndicator.hidesWhenStopped = true


UIProgressView

A view that depicts the progress of a task over time

  • progress bar basically

To configure an UIProgressView:

1
2
3
4
5
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myProgressView: UIProgressView!

myProgressView.progress = 0

A Timer class can be used to simulate loading event

The Timer class

1
2
3
4
5
6
7
8
9
10
11
12
var myTimer: Timer!
@objc func progressing(){
  myProgressView.progress = myProgressView.progress + 0.1
  if myProgressView.progress == 1.0{
    myTimer.invalidate()
    let alert: UIAlertController = UIAlertController(title: "Finished", 
    		message: "Progress Done Loading", preferredStyle: 
        UIAlertController.Style.alert)
    alert.addACtion(UIAlertAction.Style.cancel))
  	present(alert, animated: true, completion: nil)
  }
}

Start the Timer

1
2
3
myProgressView.progress = 0
myTimer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selctor:
          #selector(progressing), userInfo: nil, repeats: true)

UIDatePicker

A control used for the inputting of date and time values

  • Displaying multiple rotating wheels to allow users to select dates and times

To configure an UIDatePicker:

1
2
3
4
5
6
7
8
9
//hold control key and drag to create this
//Do not manually write @IB codes
@IBOutlet weak var myDataPicker: UIDatePicker!

@IBAction func DateValueChanged(_ sender: UIDatePicker){
 	let dateValue = DateFormatter()
  dateValue.dateFormat = "MM dd EE HH:mm"
  let dateString = dataValue.string(from: myDatePicker.date)
}

Gesture Recognizers

Gestures are recognized by instances of UIGestureRecognizer

  • The base class is “abstract”
  • Use concrete subclass to recognize, eg.UITapGestureRecognizer

To use a gesture recognizer:

  • Add a gesture recognizer to UIView
  • Provide an Action method to handle that gesture

Tap Gesture Recognizer

Common attributes:

1
2
var numberOfTapsRequired: Int // single tap, double tap, etc.
var numberOfTouchesRequired: Int //finger count

Pinch Gesture Recognizer

Common attributes:

1
2
var scale: CGFloat // not read-only (can reset)
var velocity: CGFloat // scale factor per second

Rotation Gesture Recognizer

Common attributes:

1
2
var rotation: CGFloat // not read-only (can reset); in radians
var velocity: CGFloat // radians per second

Swipe Gesture Recognizer

Common attributes:

1
2
var direction: UISwipeGestureRecoginzerDirection // which swips you want
var numberOfTouchesRequired: Int // finger count

Pan Gesture Recognizer

Common attributes:

1
2
var maximumNumberOfTouches: Int //max finger count
var minimumNumberOfTouches: Int //min finger count

Long Press Gesture Recognizer

Common attributes:

1
2
3
var minimumPressDuration: TimeInterval //min duration
var numberOfTouchesRequired: Int // finger count
var numberOfTapsRequired: Int //no of taps

Multi-View Application

The transitions between app scenes are called segues.

The type of the transition is chosen from the Action Segue menu.

We can first Add a ViewController in Main.storyboard, then

  • Ctrl-drag from a Button or Gesture Recognizer of the “old” ViewController to the “new” ViewController
  • A shortcut menu with the title Action Segue appears in the location where the drag ended.