Introduction to Xcode and MVC Model
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
- 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 | //hold control key and drag to create this |
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 | //hold control key and drag to create this |
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 | //hold control key and drag to create this |
UISwitch
A control that offers a binary choice, such as On/Off
- A Switch control
To configure an UISwitch:
1 | //hold control key and drag to create this |
UISlider
A control used to select a single value from a continuous range of values
- A Slider
To configure an UISlider:
1 | //hold control key and drag to create this |
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 | //hold control key and drag to create this |
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 | //hold control key and drag to create this |
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 | //hold control key and drag to create this |
UIProgressView
A view that depicts the progress of a task over time
- progress bar basically
To configure an UIProgressView:
1 | //hold control key and drag to create this |
A Timer class can be used to simulate loading event
The Timer class
1 | var myTimer: Timer! |
Start the Timer
1 | myProgressView.progress = 0 |
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 | //hold control key and drag to create this |
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 | var numberOfTapsRequired: Int // single tap, double tap, etc. |
Pinch Gesture Recognizer
Common attributes:
1 | var scale: CGFloat // not read-only (can reset) |
Rotation Gesture Recognizer
Common attributes:
1 | var rotation: CGFloat // not read-only (can reset); in radians |
Swipe Gesture Recognizer
Common attributes:
1 | var direction: UISwipeGestureRecoginzerDirection // which swips you want |
Pan Gesture Recognizer
Common attributes:
1 | var maximumNumberOfTouches: Int //max finger count |
Long Press Gesture Recognizer
Common attributes:
1 | var minimumPressDuration: TimeInterval //min duration |
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.