【Swift】セル上でLabelを動的可変しながら、ImageViewを固定表示する

以前、”【Swift】セルとLabelを動的に可変させる方法”という名の記事を投稿した。

nekokichi2yos2.hatenablog.com

 

もしチャットアプリを作るなら、Label以外にも解決すべき問題がある。

 

それは、アイコン、だ。

 

ImageViewを動的に可変させる設定を施したLabelの横に配置すればいいと思っているのだろうが、ただ設定してしまうと、セルの高さがImageViewの高さに適応してしまい、Labelの大きさに適応しなくなる。

 

つまり、

  • ImageViewは固定
  • Labelは動的に可変

させるはずが、セルの高さがLabelに適応しないので、Labelが途中で途切れたように表示されてしまう。

 

これを防ぐ方法を説明していく。

 

 

完成図

 

f:id:nekokichi_yos2:20181108231132p:plain 

 

ストーリーボード

  

f:id:nekokichi_yos2:20181108231149p:plain

 

ソースコード

 

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

に変更。

 

上記を設定しないと、だーめ。