What's New in iOS
• UIKit は10項目
• UIStackView
• NSLayoutAnchor
• UILayoutGuide
• UIApplicationDelegate の新メソッド
• …
alignment
• 軸に対する垂直方向に view をどう並べるか
• (例) Fill: 軸に対する垂直のサイズが等しくなる
• axis が Horizontal の場合、高さが同じになる
軸
• UITableView + UIStackView
• UITableViewCell の中にUIStackView を配置する
• さらに、UIStackView の中にUIStackView を配置する
タイムライン画面 を 作成
タイムライン画面 を作成
• セルの高さを指定する
• Self-Sizing Table View Cells (iOS 8 ~)
• self.tableView.rowHeight = UITableViewAutomaticDimension;
• self.tableView.estimatedRowHeight = 44.0f;
NSLayoutAnchor とは
• iOS 9 で UIView に追加されたプロパティ (の一部)
• NSLayoutXAxisAnchor *leadingAnchor
• NSLayoutXAxisAnchor *trailingAnchor
• NSLayoutYAxisAnchor *topAnchor
• NSLayoutYAxisAnchor *bottomAnchor
NSLayoutAnchor とは
• NSLayoutAnchor のメソッド (の一部)
• constraintEqualToAnchor:
• constraintGreaterThanOrEqualToAnchor:
• constraintLessThanOrEqualToAnchor:
• 他の view の Anchor と共に使用する
NSLayoutAnchor とは
• (例) 2つの view の leading を合わせる制約の生成
• constraintEqualToAnchor メソッドを使ってconstraint を生成
• NSLayoutConstraint *constraint = [view.leadingAnchor constraintEqualToAnchor:otherView.leadingAnchor]
WebViewController を作成
• まずは leading の制約を設定
• webView.leadingAnchor = self.View.leadingAnchor
webView.leadingAnchor
leading の制約を生成して active にするNSLayoutConstraint *leadingConstraint =[webView.leadingAnchor constraintEqualToAnchor:self.View.leadingAnchor];
leadingConstraint.active = YES;
WebViewController を作成
• 残りも同様に…
• 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;
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;
UILayoutGuide とは
• UIView と同様に Anchor をプロパティにもつ
• NSLayoutXAxisAnchor *leadingAnchor
• NSLayoutXAxisAnchor *trailingAnchor
• NSLayoutAnchor のメソッドを使用してレイアウトを実装できる
ボタンを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];
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
参考資料
• 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