Outlayout ios2開発会議20150528

【朝活】 iOS開発会議 in beez渋谷 18回目

2015年5月28日 佐藤剛士

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

【肩書】 コンセプトづくりから相談できるエンジニア。

【お仕事】 昨年10月に独立。 前は受託IT企業でインフラの保守運用業務 今は知り合いのスタートアップのお手伝い。

【できること】 ruby,iOS,apatch,linux(サーバー周り）

【今年の目標。】 iOSのアプリを定期リリース。今年こそ作る( ・ω・)

AutoLayoutとは• 異なる画面サイズでも1つのレイアウトでまとめることができる機能 • iPhone5が登場したあたりからiPhoneのレイアウトを１つにまとめる必要がでてきた。

• さらにiPhone6,iPhone6 plusが出てきて、各端末サイズのレイアウトを作る必要が出てきました。

• AutoLayout大事になってきました。

Viewを表示するときに必要な情報は？ →X座標、Y座標、幅（Width)、高さ(Height)

(x:100,y:100)

(w:120)

(h:200)

Viewを表示するときに 以前までは直接XYWHを指定していた！

(x:100,y:100)

(w:120)

(h:200)

view.fram=CGRectMake(100,100,120,200);

AutoLayoutでは Constraint(制約)を設定して、XYWHを決める →XYWHを決めることには変わりがない

制約

AutoLayout　応用編

TableViewのCellの高さを自動計算

TableViewのCellの高さを自動計算

Cellの制約を追加

8

8

Margin

Margin

MarginMargin

Margin

ラベルのpreferredMaxLayoutWidthを設定

-(void)layoutSubviews { [super layoutSubviews]; //ラベルの横幅をpreferredMaxLayoutWidthで設定する。(高さ計算で必要） self.titleLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.titleLabel.bounds); self.bodyLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.bodyLabel.bounds); }

-(void)setDataSorce:(DataSorce *)dataSorce { self.titleLabel.text = dataSorce.title; self.bodyLabel.text = dataSorce.body; [self layoutIfNeeded]; //→layoutSubviewsが呼ばれる！ }

文字列を設定

preferredMaxLayoutWidth →どんな幅で改行させるのかの値

systemLayoutSizeFittingSizeメソッドでAutoLayout後の高さを取得する

+(CGFloat)heightForRowWithTable:(UITableView *)tableView dataSorce:(DataSorce *)dataSorce { CustamTableViewCell *cell; cell = (CustamTableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"custam"]; if (cell) { cell.frame = CGRectMake(cell.frame.origin.x, cell.frame.origin.y , CGRectGetWidth(tableView.bounds), cell.frame.size.height); cell.dataSorce = dataSorce; //Autolayoutが適用された後の高さサイズを取得する CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize]; return size.height; }else{ return 0; } }

DEMO

AutoLayout　アニメーション

AutoLayout　アニメーション•一度ビューの制約を外す

- (void)removeConstraints:(NSArray *)constraints

•制約を設定し直す

•アニメーションメソッドで親ビューに対してlayoutIfNeededを実行して再描写する - (void)layoutIfNeeded

AutoLayout　アニメーション

AutoLayout　アニメーションcontentView

redView

yellowView blueView

88

20

2020

20

20 2020

64 64

redViewとyellowViewとblueViewの高さは一緒 yellowViewとblueViewの幅は一緒

さっきの制約をVFLで表すとこんな感じ

H:|-20-[redView]-20-|

H:|-20-[yellowView]-20-[blueView(==yellowView]-20-|

V:|-88-[redView]-20-[yellowView(==redView)]-20-|

V:|-88-[redView]-20-[blueView(==redView)]-20-|

DEMO

AutoLayout　ラベルのトルツメ

AutoLayout　ラベルのトルツメ

AutoLayout　ラベルのトルツメ

1番目のラベル

30

2番目のラベル

3番目のラベル

4番目のラベル

30

30

30

0

0

0

0

0

0

0

0

※

※1～4番目のラベルは親ビューに対して垂直ぞろえ

AutoLayout　ラベルをトルツメ•Storyboadから実装ファイルに制約を接続できる

AutoLayout　ラベルをトルツメ•Labelは文字がなくなると高さが0になる。 •なので、消すラベルの上の制約も0にすればトルツメになる

1番目のラベル

30

2番目のラベル

3番目のラベル

4番目のラベル

30

30

30

0

0

0

0

0

0

0

0

1番目のラベル

30

3番目のラベル

4番目のラベル

30

30

30

0

0

0

0

0

0

0

0

0

AutoLayout　ラベルをトルツメ

/* Labelのテキストがない場合にトルツメさせるメソッド */ - (IBAction)dissapearView:(UIBarButtonItem *)sender { self.secondLabel.text = nil; self.secontVertualConstraint.constant = 0.f; }

DEMO

サンプルコードURLhttps://github.com/SatoTakeshiX/AutoLayoutSample/tree/master/3_CheckTableCellHight_Sample

参考URLiOS7・iOS8の処理分岐なし！UITableViewのCellの高さをAutolayoutで自動計算する方法 http://eure.jp/blog/autolayout-cell-ios7-ios8/

Auto Layoutでsubviewを動的に非表示にしたときのマージンをどうにかする http://yoonchulkoh.hatenablog.com/entry/2013/12/02/230952

Popping https://github.com/schneiderandre/popping

UILabel#preferredMaxLayoutWidthはなぜ必要か http://blogios.stack3.net/archives/2484

参考URLテーブルビューのセル毎にピッタリの高さを計算する http://sasata299.hatenablog.com/entry/2014/05/19/085817