More Related Content
Similar to 使うっきゃない！iOS9で楽になったAuto Layout!
Similar to 使うっきゃない！iOS9で楽になったAuto Layout! (20)
使うっきゃない！iOS9で楽になったAuto Layout!
- 5. Auto Layoutの歴史 iOSのバージョンが上がるたびに使いやすくなる iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生！
- 6. Auto Layoutの歴史 iOSのバージョンが上がるたびに使いやすくなる iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生！ iOS9 -> StackView と NSLayoutAnchor
- 7. Auto Layoutってなんだっけ？ UIのレイアウトについて 制約を課すことでUIコンポーネントの位置とサイズを 自動的に決定する機能 ↓ Auto Layoutを使って嬉しいこと ・iPhone(4s - 6sPlus)とiPadのレイアウト対応 ・Dynamic Type対応 ->文字の大きさをユーザーが決められる ・国際化対応 ->英語とアラビア語で文字の方向逆
- 8. StackView
- 9. • iOS 9.0 導入された機能 • 縦方向または横方向にViewを並べられる機能 • StackViewのサブビューとしてビューを入れれば StackViewの方で自動的にレイアウトしてくれる • 各ビューに対してAutoLayoutをそれぞれ設定しなくて もレイアウトをしてくれる！ Stack View とっても楽！
- 14. imageViewを3つ置く
- 16. StackViewの入れ子
- 21. 今回は5つのviewをVertical Center in Containerで 垂直方向中心に置く。（y軸を決定） spacing1 view1 view2 spacing2 spacing3
- 22. spacingViewの横幅を全て同じ制約をつける spacing1 view1 view2 spacing2 spacing3 spacing1を選択して ctl+spacing2へドラッ グ→「Equal Withds」 spacing1を選択して ctl+spacing3へドラッ グ→「Equal Withds」
- 24. 各viewの隣通しの間隔の制約をつけていく spacing1 view1 view2 spacing2 spacing3 ① ①spacing1と superViewの間隔の制 約を追加 ①の結果↓
- 29. 各viewの隣通しの間隔の制約をつけていく spacing1 view1 view2 spacing2 spacing3 ⑥ ⑥spacing3と superViewの間隔の制 約を追加 ⑥の結果↓
- 31. spacing1,spacing2,spacing3を選択 Top Edgesの制約を追加 →実践で使う場合はspacingの背景を透明にしてください spacing1 view1 view2 spacing2 spacing3
- 33. Layout Anchors
- 34. Auto Layoutの原則 redViewyellowView 8 redView.Leading = 1.0 BlueView.trailing + 8.0 Item1 Attribute1 Item2 Attribute2 Constant Relationship Multiplier 一つ制約作るのに7つの要素必要
- 35. NSLayoutAnchorクラス追加！ redView.leadingAnchor.constraintEqualToAnchor(yellowV iew.trailingAnchor,constant: 8).active = true Item 1 redView Attribute 1 leadingAnchor Relationship constraintEqualToAnchor Multiplier なし（デフォルト1.0) Item 2 yellowView Attribute 2 trailingAnchor Constant 8 プロパティで制約を設定できる！
- 36. NSLayoutAnchorのいいところ • 型の安全性、保証がよい • 記述がしやすい • コードが読みやすい
- 37. 今までのAuto Layout作成コード • NSLayoutConstraint クラス • Auto Layoutに必要な7要素を引数で設定 • わかりやすいがコード量がおおい • Visual Format Language • Visual Format Languageという制約設定の記法を使 い設定 • 複数の制約をいっきに設定できる • 文字列で設定するので不正な記法を書いた時に分かる のは実行時のみ • 中央 えとか、マージン設定の方法がわかりにくい
- 38. NSLayoutConstraint クラス let redViewLeadingConstraint = NSLayoutConstraint(item: redView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: yellowView, attribute: NSLayoutAttribute.Trailing, multiplier: 1.0, constant: 8) self.view.addConstraint(redViewLeadingConstraint)
- 39. Visual Format Language let views = [ "redView" : redView, "yellowView" : yellowView ] let redViewHorizonConstrains = NSLayoutConstraint.constraintsWithVisualFormat(" H:|-[yellowView]-8-[redView]-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views) self.view.addConstraint(redViewHorizonConstrains )
- 40. デモ • 下のレイアウトを3つの書き方でみてみます！ redView yellowView 親ビュー 0 0 88 88 10 10 redView は親ビューの 幅40% の大きさ redViewと yellowView は同じ 大きさ
- 42. 参考URL iOS 9で追加されたNSLayoutAnchor使うと簡潔にわかりやすく間違 えずにNSLayoutConstraint（制約）が作れます【Auto Layout】 http://qiita.com/yucovin/items/4bebcc7a8b1088b374c9 Auto Layout Guide https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/AutolayoutPG/ ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/ uid/TP40010853-CH16-SW1