iOS 9 Bootcamp #6 UIKit

iOS 9 UIKitiOS 9 週連続 Bootcamp 6週目

Hiraya Shingo @ classmethod, Inc

自己紹介

• 平屋真吾

• クラスメソッド株式会社

• モバイルアプリサービス部

• iOS アプリ開発 4年

What's New in iOS

• UIKit は10項目

• UIStackView

• NSLayoutAnchor

• UILayoutGuide

• UIApplicationDelegate の新メソッド

• …

アジェンダ

1. UIStackView

2. NSLayoutAnchor

3. UILayoutGuide

UIStackView

UIStackView の概要

UIStackViewとは

• view を縦横にレイアウトするためのクラス

UIStackViewとは

• 新しい「何か」ができるようになる

というよりは

• これまで面倒だった実装作業を簡単にできる

UIStackView の利点

• AutoLayout の制約を設定する作業が減る

• レビュー、メンテナンスしやすくなる


• (例) ボタンを等間隔で配置する


• Auto Layout の制約を直接設定した場合


• UIStackView を使用した場合 (見やすい!)

UIStackView の注意点

• iOS 9 以降で使用可能

• Auto Layout を使い慣れていたほうが良い

• UIStackView の仕組み自体を知ることが必要

• 後述します

UIStackView の仕組み(内部)

UIStackView の主要プロパティ

1. arrangedSubviews

2. axis

3. distribution

4. alignment

5. spacing

• UIStackView が管理する view の配列

arrangedSubviews

axis

• 整列する方向

• Horizontal (水平)

• Vertical (垂直)

distribution

• 軸方向に view をどう並べるか

• (例) FillEqually: 軸方向のサイズが等しくなる

• axis が Horizontal の場合、幅が同じになる

軸

alignment

• 軸に対する垂直方向に view をどう並べるか

• (例) Fill: 軸に対する垂直のサイズが等しくなる

• axis が Horizontal の場合、高さが同じになる

軸

spacing

• view 間の間隔

軸

UIStackView の仕組み(外部)

UIStackView 自体のレイアウト

• 最低限必要なこと

• UIStackView の位置を指定する

• 例えば、UIStackView の中心座標だけ指定

UIStackView 自体のレイアウト

• 幅と高さは適切なサイズになる

• UIStackView が管理する view の数やサイズ

• UIStackView のプロパティに設定した値

UIStackView の使用例

• UITableView + UIStackView

タイムライン画面を作成


• UITableViewCell の中にUIStackView を配置する



• UITableViewCell の中にUIStackView を配置する

• さらに、UIStackView の中にUIStackView を配置する



• UITableViewController を用意


• UITableViewCell に Horizontal Stack View を配置


• UIStackView と superView 間の制約を設定


• UIStackView のプロパティを設定

• Alignment: Top

• Distribution: Fill

• Spacing: 10


• プロフィール画像表示用の UIImageView を

UIStackView の中に追加


• 続けて UIImageView のサイズの制約を設定

• width = 49

• height = 49


• Vertical Stack View を Horizontal Stack View の中に配置


• Vertical Stack View のプロパティを設定

• Alignment: Fill

• Distribution: Fill

• Spacing: 5


• メイン写真用の UIImageView を Vertical

Stack View の中に追加


• 続けて UIImageView の

• 高さの制約: 200

• Mode: Aspect Fill

• Clip Subviews: YES


• メイン写真用の UIImageView の上に UILabel

を2つ追加


• 上から2つめの UILabel の設定だけ変更

• Lines (行数): 0


• 画像や文字列を設定する


• UITableViewController 側の実装

• セルにデータを渡す処理

• 画像

• テキスト


• セルの高さを指定する

• Self-Sizing Table View Cells (iOS 8 ～)

• self.tableView.rowHeight = UITableViewAutomaticDimension;

• self.tableView.estimatedRowHeight = 44.0f;


UIStackView まとめ



• レイアウト実装のコストが下がる

• メンテナンスしやすくなる

NSLayoutAnchor

NSLayoutAnchor の概要

NSLayoutAnchor とは


• NSLayoutConstraint を生成するためのクラス

• 生成用のメソッド 6 個

• プロパティは無し


• iOS 9 で UIView に追加されたプロパティ (の一部)

• NSLayoutXAxisAnchor *leadingAnchor

• NSLayoutXAxisAnchor *trailingAnchor

• NSLayoutYAxisAnchor *topAnchor

• NSLayoutYAxisAnchor *bottomAnchor


• NSLayoutAnchor のメソッド (の一部)

• constraintEqualToAnchor:

• constraintGreaterThanOrEqualToAnchor:

• constraintLessThanOrEqualToAnchor:

• 他の view の Anchor と共に使用する


• (例) 2つの view の leading を合わせる制約の生成

• constraintEqualToAnchor メソッドを使ってconstraint を生成

• NSLayoutConstraint *constraint = [view.leadingAnchor constraintEqualToAnchor:otherView.leadingAnchor]

NSLayoutAnchor の使用例

WebViewController を作成

• WKWebView を全面に表示する

ViewController を作る

• WKWebView は IB 上にない

• コードで制約を設定してみる


• まずは leading の制約を設定

• webView.leadingAnchor = self.View.leadingAnchor

webView.leadingAnchor

leading の制約を生成して active にするNSLayoutConstraint *leadingConstraint =[webView.leadingAnchor constraintEqualToAnchor:self.View.leadingAnchor];

leadingConstraint.active = YES;


• 残りも同様に…

• webView.topAnchor = self.View.topAnchor

• webView.trailingAnchor = self.View.trailingAnchor

• webView.bottomAnchor = self.View.bottomAnchor

trailing, top, bottom も同様に

[webView.topAnchor constraintEqualToAnchor:self.View.topAnchor].active = YES;

[webView.trailingAnchorconstraintEqualToAnchor:self.View.trailingAnchor].active = YES;

[webView.bottomAnchor constraintEqualToAnchor:self.View.bottomAnchor].active = YES;

NSLayoutAnchor の利点

• コードが短くなり、読みやすくなる

iOS 8 以前だとこんな感じだったコードが

[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0].active = YES;

[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0].active = YES;

[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0].active = YES;

[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0].active = YES;

NSLayoutAnchor を使えばこうなります[webView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;

[webView.topAnchor constraintEqualToAnchor:self.View.topAnchor].active = YES;

[webView.trailingAnchorconstraintEqualToAnchor:self.View.trailingAnchor].active = YES;

[webView.bottomAnchor constraintEqualToAnchor:self.View.bottomAnchor].active = YES;

NSLayoutAnchor まとめ


• NSLayoutConstraint を生成するためのクラス

• 制約を設定するコードが読みやすくなる

UILayoutGuide

UILayoutGuide の概要

UILayoutGuide とは

• ホワイトスペースを定義するためのクラス

• ホワイトスペース = コンテンツが無い領域


• (例) ボタンの間に空白部分をつくる


• (例) ボタンの間に空白部分をつくる

UILayoutGuide


• UIView と同様に Anchor をプロパティにもつ

• NSLayoutXAxisAnchor *leadingAnchor

• NSLayoutXAxisAnchor *trailingAnchor

• NSLayoutAnchor のメソッドを使用してレイアウトを実装できる


• NSObject のサブクラス (view ではない)

• ゆえに、UIView より軽量

• ダミーのビューを使う必要が無くなる

UILayoutGuide の注意点


• コードでレイアウトを組む場合に使用可能

• Storyboard 上では使えない

UILayoutGuide の使用例

ボタンを等間隔に配置する


fooButton barButton


spacer1 spacer2 spacer3

fooButton barButton


• まずはボタンと UILayoutGuide を配置

ボタンを2つ作成して addSubview 呼ぶUIButton *fooButton = ...[self.view addSubview:fooButton];

UIButton *barButton = ...[self.view addSubview:barButton];

UILayoutGuide を3つ作成して addLayoutGuide 呼ぶUILayoutGuide *spacer1 = [UILayoutGuide new];[self.view addLayoutGuide:spacer1];

UILayoutGuide *spacer2 = [UILayoutGuide new];[self.view addLayoutGuide:spacer2];

UILayoutGuide *spacer3 = [UILayoutGuide new];[self.view addLayoutGuide:spacer3];


• 次に fooButton の Anchor を設定


• fooButton.leadingAnchor = spacer1.trailingAnchor

trailingAnchor

leadingAnchor

foo ボタンの leadingAnchor

[fooButton.leadingAnchor constraintEqualToAnchor:spacer1.trailingAnchor].active = YES;


• 残りも同様に…

• fooButton.trailingAnchor = spacer2.leadingAnchor

• fooButton.heightAnchor = 44.0

• fooButton.widthAnchor = barButton.widthAnchor

• fooButton.centerYAnchor = self.view.centerYAnchor

UILayoutGuide まとめ



まとめ

まとめ

• UIStackView

• NSLayoutAnchor

• UILayoutGuide

まとめ

• UIStackView



• レイアウト実装のコストが下がる

まとめ

• NSLayoutAnchor


• NSLayoutConstraint を生成用のクラス

• 制約を設定するコードが読みやすくなる

まとめ

• UILayoutGuide



参考資料

• WWDC 2015 スライド

• Mysteries of Auto Layout, Part 1

• Class Reference

• UIStackView Class Reference

• NSLayoutAnchor Class Reference

• UILayoutGuide Class Reference

サンプルコード

• Github

• https://github.com/hirayaCM/iOS9UIKitDemos

https://github.com/hirayaCM/iOS9UIKitDemos

Thank you!

Software

iOS 9 Bootcamp #6 UIKit