Learning iOS UI Development [Note]

Chapter 1. UI Foundamentals

Windows

window is an instance of UIWindow. It's the root class of UI's hierarchy. One of the function of the window is to deliver touches to the underling views.

window好比是画板，view好比是画纸。

 -- widow
 --- rootViewController(view controller)

The content of the window

@UIApplication从info.plist中找到信息，初始化viewcontroller；App delegate中有window属性，设置之前初始化的view controller为其rootViewController。最后，执行完applicationDidFinishLaunching:withOption之后，会调用makeKeyAndVisible将界面从rootViewController中展示出来。（中文混杂英文描述好生涩）

1. 将某个view controller设置为rootViewController，window就会显示该view controller的view。
2. @UIApplicationMain > The @UIApplicationMain attribute in the AppDelegate.swift file is responsible for the launch of the entire application process. It marks an entry point for the application launch, reading the Storyboard's information from the info.plist file and instantiating the initial view controller
3. window property in the AppDelegate. >This property will be a handy reference to the main window for the entire life cycle of the application.

4. 代码实现：

   func application(application: UIApplication,
   didFinishLaunchingWithOptions
   launchOptions: [NSObject: AnyObject]?) -> Bool {
   // Instantiate a window with the same size of the screen    
   window = UIWindow(frame: UIScreen.mainScreen().bounds)
   // Instantiate a view controller with the Main storyboard
   let storyboard = UIStoryboard(name: "Main", bundle: nil)
   let viewController = storyboard.instantiateViewControllerWithIdentifier("viewController2") as! ViewController
   // Setup and present the window
   window?.rootViewController = viewController
   window?.makeKeyAndVisible()
   return true
   }
   

Working with views

UIView is the basic class for other UI element.

UIWindow is also the subclass of the UIVIew.

define the view's geometry

(0,0) ------------>x | | | y

// define a point
let point = CGPoint(x:20, y:10)
// define a size 
let size = CGSize(width: 20, height: 10)
// define a rect using size and point
let rect_A = CGRect(origin: point, size: size)
// define a rext using x, y, width and height data
let rect_B = CGRect(x: 15, y: 10. width: 100, height: 30)

1. bounds

the view's self information.自身坐标系下。

2. frame

the place in the hierarchy.父级坐标系下。

3. center

同frame。

UI hierarchy and views inheritance

let parentVIew = view.parentview let children = view.subview

• add
• move

• delete

  containerView.addSubView(childView)
  containerView.insertSubview(childView, atindex: 2)
  containerView.insertSubview(childView, aboveSubview: anotherView)
  containerView.insetSubview(childView,belowSubview : anotherView)
  
  remove all the subview of the view:
  
  for subview in container.subview{
      subview.removeFromSuperview()
  }
  
  viewWithTag
  

View and subview visibility

clipToBuounds, the parent view define the subviews' visibility outside its boundaries.

Hierarchy events

override func didMoveToSuperview(){
    // to do something
}

override func didAddSubview(){
    // to do something
}

override func didMoveToWindow(){
    println("I've been attached to this window hierarchy: \(window)")
}

View drawing and life cycle

• draw a view and creat snapshots for each displayed element.

setNeedsDisplay pr setNeedsDisplayInRect can make the UIView invalidated. They will redraw during the next run loop. The latter one is better(the latter performs an optimization using only a portion of the new view content).

Chapter 2. UI Components overview - UIKit

This chapter covers many different but related topics. Here is an overview of what you will read about in the next pages:

• Text elements and the keyboard
• Buttons, selectors, and user interaction
• View-based components
• A UI for structured data
• Custom components with the UIAppearance protocol

Text element: UILabel,UItextfield,UItextview

var image = UIImageView(image:      UIImage(named:"Image"))
       self.textView.addSubview(image)
        let exclusionPath = UIBezierPath(rect: image.frame)
    self.textView.textContainer.exclusionPaths = [exclusionPath]

keyboard event and apperance

Button and selectors

subclass of UIControl class

Most of the UI elements' role is to interact with the users. They convert touch event into actions or choices.

The Target-Action patten

This pattern defines how a control can request the execution of an function(action) to another object(target) in response to an event.

View-based components

subclass of UIView

• UIProgressView
• UIActivityIndicatorView
• UIImageView ,UIImage
• UIScrollView

Managing and presenting structed data

table and collection views

• UITableView(UIScrollView)
• UICollectionView

The UIApperance protocal

Example:

let minTrack = UIImage(named: "minTrack")
let maxTrack = UIImage(named: "maxTrack")
let thumb = UIImage(named: "thumb")

// Create resizable images
let resizableMinTrack = 
minTrack?.resizableImageWithCapInsets(
UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5))

let resizableMaxTrack = 
maxTrack?.resizableImageWithCapInsets(
UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5))

// Configure the styles!
UISlider.appearance().setMaximumTrackImage(
resizableMaxTrack, forState: UIControlState.Normal)

UISlider.appearance().setMinimumTrackImage(
resizableMinTrack, forState: UIControlState.Normal)

UISlider.appearance().setThumbImage(
thumb, forState: UIControlState.Normal)

Chapter 3. Interface Builder, XIB, and storyboard

working with the XIB files

Managing user interface with storyboard

connecting user interface with your code

可以先写代码再拖动选择。

 @IBAction func signIn(sender:UIButton){
 }

 var storyboard = UIStoryboard(name: "Main", bundle: nil)

var storyboard = UIStoryboard(name: "Main", bundle: nil)

implementing navigateion with storyboard and segues

override func prepareForSegue(segue: UIStoryboardSegue, 
                         sender: AnyObject?) {
        if segue.identifier == "userDetails"{
        let detailsVC = segue.destinationViewController as! 
                      detailsViewController
            detailsVC.firstname = user.firstname
            detailsVC.lastname = user.lastname
        }
}

@IBAction func <function name>(segue:UIStoryboardSegue){}

Auto Layout

The main rule we should keep in mind is that if you want to specify the frame of a view with Auto Layout, you need to give it enough information for both the X/Y position and width/height size.

---

UI Level

1. Layout
   • stack view->behaviors
   • layout margins
2. Apperance basicline

Xcode tips:

1. Shift + right clik / control + left click
2. file:option+shift

Build time

design time->xml build time->nib

Compiling storyboard

loding storyboard at run time

1. Performance: Nib file loaded on demand.
2. Reuse: Nib files enable reuse.
3. Life cycle.

Run time

Connection, API,

Design

1. Bad App Icons Beautiful+Instandly Recongnizable
2. Focus on a unique shape
   
3. Carefully select colors
4. Avoid using a photo
5. Avoid a lot of text
6. Be creative
7. Case study

Cocoa Touch best practise

put on the background.

Creating Custom iOS User Interface

Ask some questions: - Where will this be userd?

UIApperance

1. Spring Animation

---