使うっきゃない!ios9で楽になったauto layout!
TRANSCRIPT
![Page 1: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/1.jpg)
使うっきゃない! iOS9で楽になった Auto Layout!
2016年2月20日 佐藤剛士
![Page 2: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/2.jpg)
自己紹介【名前】 佐藤剛士
【お仕事】 前は受託IT企業でインフラの保守運用業務 今は有限会社カイカイでiOSアプリ作成
【できること】 ruby,iOS,apatch,linux(サーバー周り),Twilio Webフロント
【リリースアプリ】 YumeHoshi LillyBlocker -広告ブロックでサクサク快適Safariに!
![Page 3: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/3.jpg)
iOS開発の朝活していますbeezプログラミング勉強会 https://www.facebook.com/groups/407821455988195/ 毎週木曜日7:30~9:00電源カフェbeez渋谷店
詳解Swift改定版読書勉強会 https://www.facebook.com/groups/1543718659272111/ 毎週日曜日9:00~11:00電源カフェbeez渋谷店
![Page 4: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/4.jpg)
iOS9になり Auto Layoutも
さらに強化されました
![Page 5: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/5.jpg)
Auto Layoutの歴史iOSのバージョンが上がるたびに使いやすくなる
iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生!
![Page 6: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/6.jpg)
Auto Layoutの歴史iOSのバージョンが上がるたびに使いやすくなる
iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生!
iOS9 -> StackView と NSLayoutAnchor
![Page 7: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/7.jpg)
Auto Layoutってなんだっけ?UIのレイアウトについて 制約を課すことでUIコンポーネントの位置とサイズを自動的に決定する機能
↓
Auto Layoutを使って嬉しいこと ・iPhone(4s - 6sPlus)とiPadのレイアウト対応 ・Dynamic Type対応 ->文字の大きさをユーザーが決められる ・国際化対応 ->英語とアラビア語で文字の方向逆
![Page 8: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/8.jpg)
StackView
![Page 9: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/9.jpg)
• iOS 9.0 導入された機能 • 縦方向または横方向にViewを並べられる機能 • StackViewのサブビューとしてビューを入れればStackViewの方で自動的にレイアウトしてくれる
• 各ビューに対してAutoLayoutをそれぞれ設定しなくてもレイアウトをしてくれる!
Stack View
とっても楽!
![Page 10: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/10.jpg)
StackViewの使い方 imageViewを等間隔に並べる
![Page 11: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/11.jpg)
ライブラリーからStoryboadに配置
![Page 12: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/12.jpg)
StackViewのAutoLayoutを設定 トップに10 左0 右0
![Page 13: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/13.jpg)
今回はStackViewの高さを親ビューの70%の高さにする
![Page 14: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/14.jpg)
imageViewを3つ置く
![Page 15: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/15.jpg)
StackViewを選択して Attribute inspectorで distributionをFill Equallyに変更 imageViewが等間隔に並ぶ
![Page 16: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/16.jpg)
StackViewの入れ子
![Page 17: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/17.jpg)
UIコンポーネントを選択した状態でStackViewボタンをクリックすると、選択したViewを内包したStackViewを作成できる
![Page 18: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/18.jpg)
入れ子を組み合わせることで、すこし複雑なレイアウトもできる 左図は垂直StackViewの中に水平StackViewを入れ子にしたもの
垂直StackView
水平StackView
![Page 19: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/19.jpg)
ちなみに。。。 iOS8までのviewを等間隔に並べる方法
![Page 20: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/20.jpg)
等間隔に並べたいView(view1,view2)とそれよりも1つ多いスペース調整のview(spacing1,2,3)を用意する
spacing1
view1 view2
spacing2 spacing3
![Page 21: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/21.jpg)
今回は5つのviewをVertical Center in Containerで垂直方向中心に置く。(y軸を決定)
spacing1
view1 view2
spacing2 spacing3
![Page 22: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/22.jpg)
spacingViewの横幅を全て同じ制約をつける
spacing1
view1 view2
spacing2 spacing3
spacing1を選択してctl+spacing2へドラッグ→「Equal Withds」
spacing1を選択してctl+spacing3へドラッグ→「Equal Withds」
![Page 23: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/23.jpg)
View1,View2のWHを決める →今回はWidth:70、Height:200
spacing1
view1 view2
spacing2 spacing3
![Page 24: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/24.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
①
①spacing1とsuperViewの間隔の制約を追加
①の結果↓
![Page 25: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/25.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
②
②spacing1とview1の間隔の制約を追加
②の結果↓
![Page 26: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/26.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
③
③view1とspacing2の間隔の制約を追加
③の結果↓
![Page 27: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/27.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
④
④spacing2とview2の間隔の制約を追加
④の結果↓
![Page 28: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/28.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
⑤
⑤view2とspacing3の間隔の制約を追加
⑤の結果↓
![Page 29: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/29.jpg)
各viewの隣通しの間隔の制約をつけていく
spacing1
view1 view2
spacing2 spacing3
⑥
⑥spacing3とsuperViewの間隔の制約を追加
⑥の結果↓
![Page 30: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/30.jpg)
spacing1に親ビューとの下向きの制約を追加
spacing1
view1 view2
spacing2 spacing3
![Page 31: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/31.jpg)
spacing1,spacing2,spacing3を選択 Top Edgesの制約を追加 →実践で使う場合はspacingの背景を透明にしてください
spacing1
view1 view2
spacing2 spacing3
![Page 32: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/32.jpg)
この工程がiOS9からはいらなくなった!
![Page 33: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/33.jpg)
Layout Anchors
![Page 34: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/34.jpg)
Auto Layoutの原則
redViewyellowView8
redView.Leading = 1.0 × BlueView.trailing + 8.0
Item1 Attribute1 Item2 Attribute2
ConstantRelationship
Multiplier
一つ制約作るのに7つの要素必要
![Page 35: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/35.jpg)
NSLayoutAnchorクラス追加!redView.leadingAnchor.constraintEqualToAnchor(yellowView.trailingAnchor,constant: 8).active = true
Item 1 redViewAttribute 1 leadingAnchorRelationship constraintEqualToAnchorMultiplier なし(デフォルト1.0)Item 2 yellowView
Attribute 2 trailingAnchorConstant 8
プロパティで制約を設定できる!
![Page 36: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/36.jpg)
NSLayoutAnchorのいいところ•型の安全性、保証がよい •記述がしやすい •コードが読みやすい
![Page 37: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/37.jpg)
今までのAuto Layout作成コード• NSLayoutConstraint クラス • Auto Layoutに必要な7要素を引数で設定 • わかりやすいがコード量がおおい
• Visual Format Language • Visual Format Languageという制約設定の記法を使い設定
• 複数の制約をいっきに設定できる • 文字列で設定するので不正な記法を書いた時に分かるのは実行時のみ
• 中央揃えとか、マージン設定の方法がわかりにくい
![Page 38: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/38.jpg)
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)
![Page 39: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/39.jpg)
Visual Format Languagelet 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)
![Page 40: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/40.jpg)
デモ• 下のレイアウトを3つの書き方でみてみます!
redView yellowView
親ビュー
0 0
88 88
10 10
redView は親ビューの 幅40% の大きさ
redViewと yellowView は同じ 大きさ
![Page 41: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/41.jpg)
サンプルコードhttps://github.com/SatoTakeshiX/AutoLayoutinios9
![Page 42: 使うっきゃない!iOS9で楽になったAuto Layout!](https://reader033.vdocuments.net/reader033/viewer/2022051101/58f007d31a28abba0c8b462b/html5/thumbnails/42.jpg)
参考URLiOS 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