UITableViewCellのheightを変更する方法を調べたのでメモ。
Udemyのオススメの講座
Contents
なぜheightを変更する必要があるのか？
twitterを例に考えてみましょう。
タイムラインですね。
行数がどれくらいか？
画像があるのか？
それらの条件でcellの高さを変更したいですよね。フィットさせたいですよね。
heightを動的に変更する方法
まず大切なことは３つあります。
- Autolayout
- estimatedRowHeight
- rowHeight
これらです。
①Autolayout
Storyboardを開きましょう。
UITableViewまたはUITableViewControllerを準備してある前提で進めます。
UITableView,UITableVeiwControllerをご存じない方は、
こちらをご参考にしてください。
swift3：超初心者向け！UITableViewControllerの使い方（１）
swift3：初心者向け！UITableViewの使い方：delegate・datasourceについて
それでは進めていきます。
- CellにUILabelを配置する。この時しっかりとCellの中にUILabelを配置する必要がある。
- UILabelにAutolayoutを設定。左右１０、上下５に指定。
- attributes inspectorにてLinesを０に設定。（デフォルトでは１になっているはずです）
- 最後にupdate framesをする。
①の理由
Autolayoutで失敗するから。
②の理由
数字は正直適当。
UILabelにAutolayoutを設定することで、どのような大きさのcellにも対応できるようになった。
これは逆に考えると、UILabelが大きくなったらcellも大きくなるということになる。今回のミソである。
③の理由
今回、UILabelに入れる文字列は１行ではなく、複数に渡る。cellのheightの変化を見たいからだ。
Linesを１に設定していると１行しか表示できない。
０に設定するとなぜか、複数行とりあつかうことができる。
これで第一段階終了です。
estimatedRowHeight
|
1 |
tableView.estimatedRowHeight = 40 |
正直なぜこれが必要なのかわからないが、これがないと動かないんですよね。
今回は４０に設定しました。
rowHeight = UITableViewAutomaticDimension
|
1 |
tableView.rowHeight = UITableViewAutomaticDimension |
これによって各cellが別々のheightを持つことができるようになる。
cellの大きさをAutomaticに変化させることができる。
最終的なコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import UIKit class TableViewController: UITableViewController { let languages = ["Swift\nSwift\nSwift","Ruby","PHP","C","Java"] override func viewDidLoad() { super.viewDidLoad() tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 40 } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } override func numberOfSections(in tableView: UITableView) -> Int { return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return languages.count } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell cell.label.text = languages[indexPath.row] return cell } } |
こんな感じになれば成功です。
質素ですね・・・
しかもcellのheightの変化がわかりづらい・・・これでも変化してるんですよ！
おまけ：Swift\nSwift\nSwiftの解説
この『\n』という謎。
これは改行を表しています。これによって実際にsimulatorでは見えなくなり、改行されます。
文字列の中に使えるので便利ですね。
『正規表現』
とかいう闇の深い分野らしいです。
ささお
このソースコードの「\n」は『正規表現』ではなく『エスケープシーケンス』ですね。