使うっきゃない!ios9で楽になったauto layout!
TRANSCRIPT
使うっきゃない! 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 左0 右0
今回は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)とそれよりも1つ多いスペース調整の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