71
Standford 2015 iOS讀書會 week5 1. View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture 彼得潘

Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

  • Upload
    -pan

  • View
    565

  • Download
    6

Embed Size (px)

Citation preview

Page 1: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

Standford 2015 iOS讀書會 week5

1. View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

彼得潘

Page 2: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

課程範例download

http://web.stanford.edu/class/cs193p/cgi-bin/drupal/

Page 3: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

View Controller Lifecycle

Page 4: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 5: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

只做⼀一次auto layout的UI直接改frame無效

此時UI元件的frame還不是auto layout算出的frame

storyboard上只要勾選use auto layout,就算沒設定constraint, storyboard會依排版位置⾃自動補上auto layout

Page 6: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

可能被呼叫多次

在viewDidLoad & viewWillAppear做太多事會卡住UI

viewDidAppear時,UI元件的frame才是auto layout計算後排版的結果

Page 7: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

在viewWillDisappear 做太多事會卡住UI

可能被呼叫多次

viewWillDisappear可以把⼀一些UI元件拿掉,節省記憶體

Page 8: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

viewDidLayoutSubviews裡UI元件的frame已是auto layout計算的結果

畫⾯面重新排版時,viewWillLayoutSubviews & viewDidLayoutSubviews會被呼叫

auto layout發⽣生在viewWillLayoutSubviews & viewDidLayoutSubviews之間

Page 9: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

func setNeedsLayout() UIView

要求下次更新畫⾯面時重新排版

func layoutIfNeeded()

如果在setNeedsLayout後⾺馬上呼叫layoutIfNeeded,⽴立即更新

func setNeedsDisplay()

重新繪製view

Page 10: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 11: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

rotate

Page 12: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

rotate- (NSUInteger)supportedInterfaceOrientations;

struct UIInterfaceOrientationMask : RawOptionSetType { init(_ rawValue: UInt) init(rawValue: UInt) static var Portrait: UIInterfaceOrientationMask { get } static var LandscapeLeft: UIInterfaceOrientationMask { get } static var LandscapeRight: UIInterfaceOrientationMask { get } static var PortraitUpsideDown: UIInterfaceOrientationMask { get } static var Landscape: UIInterfaceOrientationMask { get } static var All: UIInterfaceOrientationMask { get } static var AllButUpsideDown: UIInterfaceOrientationMask { get } }

override func supportedInterfaceOrientations() -> Int { return Int(UIInterfaceOrientationMask.Portrait.rawValue) }

Page 13: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

rotate

UINavigationController & UITabBarController的rotate

Page 14: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

接收memory waring: AppDelegate & view controller

Page 15: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

cell的awakeFromNib()被呼叫時, outlet已經設定

xib載⼊入時,當awakeFromNib被呼叫,outlet也已設定

let nib = UINib(nibName: "Red", bundle: nil) let array = nib.instantiateWithOwner(nil , options: nil )

view controller的 init(coder aDecoder: NSCoder) & awakeFromNib()被呼叫時, outlet都還沒設定

Page 16: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

Autolayout

Page 17: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 18: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

神奇的Autolayout公式

Page 19: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

神奇的Autolayout公式

let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 300, height: 300)) self.view.addSubview(imageView) imageView.image = UIImage(named: "baby.png") imageView.setTranslatesAutoresizingMaskIntoConstraints(false) let bottomConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: -10) self.view.addConstraint(bottomConstraint)

Page 20: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

visual format language

http://www.knowstack.com/swift-autolayout-visual-format-language-sample-code/

Page 21: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

調整item欄位

Page 22: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

調整relation欄位

Page 23: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

調整constant & multiplier

Page 24: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定20%的寬度

Page 25: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

constrain to margins

Page 26: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

margin

Page 27: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

修改constraint

拉outlet到constraint

Page 28: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

layout guide

status bar, navigation bar, tab bar, 熱點,電話來電

Page 29: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 30: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

5 *4 和 4*5,但需設定4種

Page 31: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

利⽤用anyk其實只要設定2種

Page 32: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

ex: 在any height compact width設定的條件也會套⽤用在 regular height compact width 和 compact height compact width

Page 33: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

baseline alignment

This lines up the views according to their baseline, which for text based views is the bottom of text that does not drop down

(like g, p, j, etc). For non-text views it is the same as the bottom edge.

Page 34: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 35: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

利⽤用preview預覽

Page 36: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

preview的size和語⾔言

leading

Page 37: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

快速search元件

search裡輸⼊入⽂文字

Page 38: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

按住shift可以⼀一次 設定多個條件

Page 39: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

讓2個button置中

⽅方法1: 左右各放⼀一個view

⽅方法2: 將兩個button放在⼀一個另⼀一個view,再將此view置中

Page 40: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定action的argument

Page 41: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

{ }() : 執⾏行closure

static let database: Dictionary<String, User> = { var theDatabase = Dictionary<String, User>() for user in [ User(name: "John Appleseed", company: "Apple", login: "japple", password: "foo"), User(name: "Madison Bumgarner", company: "World Champion San Francisco Giants", login: "madbum", password: "foo"), User(name: "John Hennessy", company: "Stanford", login: "hennessy", password: "foo"), User(name: "Bad Guy", company: "Criminals, Inc.", login: "baddie", password: "foo") ] { theDatabase[user.login] = user } return theDatabase }()

Page 42: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

Images.xcassets依device客製

依size客製

Page 43: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

Images.xcassets

Page 44: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

UI元件的expend & compress

hugging: content does not want to growcompression: content does not want to shrink

Page 45: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

⼤大家的compression都是750

Page 46: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

解法:將image的compression設成700

Page 47: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

demo

197 * 294.5

image <UIImageView: 0x7ff041682930; frame = (16 253.5; 197 294.5); autoresize = RM+BM; userInteractionEnabled = NO; layer = <CALayer: 0x7ff041682c70>>

Page 48: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

demo

image <UIImageView: 0x7fccb9f317a0; frame = (16 142; 0 406); autoresize = RM+BM; userInteractionEnabled = NO; layer = <CALayer: 0x7fccb9f31ae0>>

Page 49: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

demo

Page 50: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定image view的hugging

Page 51: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定>=

Page 52: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定label的trailing space

Page 53: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

增加label的horizontal compression

Page 54: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定圖⽚片⽐比例 private var image: UIImage? { get { return imageView?.image } set { imageView?.image = newValue if let constrainedView = imageView { if let newImage = newValue { aspectRatioConstraint = NSLayoutConstraint( item: constrainedView, attribute: .Width, relatedBy: .Equal, toItem: constrainedView, attribute: .Height, multiplier: newImage.aspectRatio, constant: 0) } else { aspectRatioConstraint = nil } } } }

Page 55: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

demo

Page 56: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

設定size regular height的layout

Page 57: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

只在某個layout 出現某個UI元件或constraint

Page 58: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

移除某個layout下的所有constraint

1 2

按X

Page 59: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

scroll view

Page 60: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 61: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 62: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 63: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

demooverride func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. let image = UIImage(named: "book") imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 1000, height: 1000)) imageView.image = image self.myScrollView.addSubview(imageView) self.myScrollView.contentSize = CGSize(width: 1000, height: 1000) self.myScrollView.delegate = self

}

func scrollViewDidScroll(scrollView: UIScrollView) { let rect = self.imageView.convertRect(self.myScrollView.bounds, fromView: self.myScrollView) println("rect \(rect)") }

Page 64: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

var directionalLockEnabled: Bool

限制某個⽅方向,不能同時⽔水平垂直滑動

self.myScrollView.contentInset = UIEdgeInsets(top: 10, left: 100, bottom: 0, right: 0)

⼀一開始contentOffset的位置是-10, -100

Page 65: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

func zoomToRect(rect: CGRect, animated: Bool) 顯⽰示放⼤大的view裡的rect區塊

(viewForZoomingInScrollView回傳的view)

放⼤大時,viewForZoomingInScrollView回傳的view的subview也會⼀一起放⼤大

Page 66: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

sizeToFit()ex: image view縮放到圖⽚片的⼤大⼩小

label縮放到⽂文字的⼤大⼩小

label縮放時,會以⺫⽬目前的寬度為最⼤大寬度,計算需要的⾼高度

let label = UILabel() label.text = "有⼀一段⾛走過的路我不會忘,有⼀一個愛過的⼈人放在⼼心上,雖然啊⼀一路跌跌撞撞,也是種成⻑⾧長,我不怕 不是逞強" self.view.addSubview(label) label.numberOfLines = 0 label.frame = CGRect(x: 0, y: 30, width: 100, height: 0) label.sizeToFit() self.view .addSubview(label)

Page 67: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

check view是否在畫⾯面上

if view.window != nil { fetchImage() }

以navigation controller為例

Page 68: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 69: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 70: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture
Page 71: Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View and Closure Capture

weak & unowned希望它是不變的常數還是可變的變數,若是前者則選unowned。

weak只能作⽤用於物件

是否可以為nil,若接受nil只能選weak。