outlayout ios2開発会議20150528
TRANSCRIPT
【朝活】 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