使うっきゃない！iOS9で楽になったAuto Layout!

使うっきゃない！ iOS9で楽になった Auto Layout!

2016年2月20日 佐藤剛士

自己紹介【名前】 佐藤剛士

【お仕事】 前は受託IT企業でインフラの保守運用業務 今は有限会社カイカイでiOSアプリ作成

【できること】 ruby,iOS,apatch,linux(サーバー周り）,Twilio Webフロント

【リリースアプリ】 YumeHoshi LillyBlocker -広告ブロックでサクサク快適Safariに！

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渋谷店

iOS9になり Auto Layoutも

さらに強化されました

Auto Layoutの歴史iOSのバージョンが上がるたびに使いやすくなる

iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生！

Auto Layoutの歴史iOSのバージョンが上がるたびに使いやすくなる

iOS6 -> Auto Layout誕生 iOS7 -> Xcode5でPinとAlign機能追加 iOS8 -> Class Size誕生！

iOS9 -> StackView と NSLayoutAnchor

Auto Layoutってなんだっけ？UIのレイアウトについて 制約を課すことでUIコンポーネントの位置とサイズを自動的に決定する機能

↓

Auto Layoutを使って嬉しいこと ・iPhone(4s - 6sPlus)とiPadのレイアウト対応 ・Dynamic Type対応 　->文字の大きさをユーザーが決められる ・国際化対応 　->英語とアラビア語で文字の方向逆

StackView

• iOS 9.0 導入された機能 • 縦方向または横方向にViewを並べられる機能 • StackViewのサブビューとしてビューを入れればStackViewの方で自動的にレイアウトしてくれる

• 各ビューに対してAutoLayoutをそれぞれ設定しなくてもレイアウトをしてくれる！

Stack View

とっても楽！

StackViewの使い方 imageViewを等間隔に並べる

ライブラリーからStoryboadに配置

StackViewのAutoLayoutを設定 トップに10 左０ 右０

今回はStackViewの高さを親ビューの70%の高さにする

imageViewを3つ置く

StackViewを選択して Attribute inspectorで distributionをFill Equallyに変更 imageViewが等間隔に並ぶ

StackViewの入れ子

UIコンポーネントを選択した状態でStackViewボタンをクリックすると、選択したViewを内包したStackViewを作成できる

入れ子を組み合わせることで、すこし複雑なレイアウトもできる 左図は垂直StackViewの中に水平StackViewを入れ子にしたもの

垂直StackView

水平StackView

ちなみに。。。 iOS8までのviewを等間隔に並べる方法

等間隔に並べたいView（view1,view2)とそれよりも１つ多いスペース調整のview(spacing1,2,3)を用意する

spacing1

view1 view2

spacing2 spacing3

今回は5つのviewをVertical Center in Containerで垂直方向中心に置く。（y軸を決定）

spacing1

view1 view2

spacing2 spacing3

spacingViewの横幅を全て同じ制約をつける

spacing1

view1 view2

spacing2 spacing3

spacing1を選択してctl+spacing2へドラッグ→「Equal Withds」

spacing1を選択してctl+spacing3へドラッグ→「Equal Withds」

View1,View2のWHを決める →今回はWidth:70、Height:200

spacing1

view1 view2

spacing2 spacing3

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

①

①spacing1とsuperViewの間隔の制約を追加

①の結果↓

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

②

②spacing1とview1の間隔の制約を追加

②の結果↓

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

③

③view1とspacing2の間隔の制約を追加

③の結果↓

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

④

④spacing2とview2の間隔の制約を追加

④の結果↓

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

⑤

⑤view2とspacing3の間隔の制約を追加

⑤の結果↓

各viewの隣通しの間隔の制約をつけていく

spacing1

view1 view2

spacing2 spacing3

⑥

⑥spacing3とsuperViewの間隔の制約を追加

⑥の結果↓

spacing1に親ビューとの下向きの制約を追加

spacing1

view1 view2

spacing2 spacing3

spacing1,spacing2,spacing3を選択 Top Edgesの制約を追加 →実践で使う場合はspacingの背景を透明にしてください

spacing1

view1 view2

spacing2 spacing3

この工程がiOS9からはいらなくなった！

Layout Anchors

Auto Layoutの原則

redViewyellowView8

redView.Leading = 1.0 × BlueView.trailing + 8.0

Item1 Attribute1 Item2 Attribute2

ConstantRelationship

Multiplier

一つ制約作るのに7つの要素必要

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

プロパティで制約を設定できる！

NSLayoutAnchorのいいところ•型の安全性、保証がよい •記述がしやすい •コードが読みやすい

今までのAuto Layout作成コード• NSLayoutConstraint クラス • Auto Layoutに必要な7要素を引数で設定 • わかりやすいがコード量がおおい

• Visual Format Language • Visual Format Languageという制約設定の記法を使い設定

• 複数の制約をいっきに設定できる • 文字列で設定するので不正な記法を書いた時に分かるのは実行時のみ

• 中央揃えとか、マージン設定の方法がわかりにくい

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)

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)

デモ• 下のレイアウトを3つの書き方でみてみます！

redView yellowView

親ビュー

0 0

88 88

10 10

redView は親ビューの 幅40% の大きさ

redViewと yellowView は同じ 大きさ

サンプルコードhttps://github.com/SatoTakeshiX/AutoLayoutinios9

参考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