【Swift】セル上でLabelを動的可変しながら、ImageViewを固定表示する
以前、”【Swift】セルとLabelを動的に可変させる方法”という名の記事を投稿した。
もしチャットアプリを作るなら、Label以外にも解決すべき問題がある。
それは、アイコン、だ。
ImageViewを動的に可変させる設定を施したLabelの横に配置すればいいと思っているのだろうが、ただ設定してしまうと、セルの高さがImageViewの高さに適応してしまい、Labelの大きさに適応しなくなる。
つまり、
- ImageViewは固定
- Labelは動的に可変
させるはずが、セルの高さがLabelに適応しないので、Labelが途中で途切れたように表示されてしまう。
これを防ぐ方法を説明していく。
完成図
ストーリーボード
ソースコード
import UIKit class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource { @IBOutlet weak var tableView: UITableView! @IBOutlet weak var textField: UITextField! //セルに表示するテキストを格納した配列 var array = [String]() func numberOfSections(in tableView: UITableView) -> Int { return 1 } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return array.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) //labelを生成 let label = cell.viewWithTag(1) as! UILabel //labelの行を無制限に label.numberOfLines = 0 //labelに角丸をつける label.layer.cornerRadius = 5.0 label.clipsToBounds = true //labelにテキストを代入 label.text = array[indexPath.row] return cell } @IBAction func button(_ sender: Any) { //入力したテキストを配列に格納 array.append(textField.text!) //セルをリロード tableView.reloadData() } }
注意
Labelの制約は、
- 上
- 下
- 右
- 左
- 幅
の5つ。
ImageVIewの制約は、
- 上
- 下
- 右
- 左
- 幅
- 高さ
の6つ。
以前の記事で述べたが、
- Labelの下
- ImageVIewの下
のRelationを
- Equal → Greater Than or Equal
に変更。
上記を設定しないと、だーめ。