UITableViewのセルの高さを動的に変更する

f:id:motom552:20171210212150p:plain
UITableViewのセル高さを動的に変更

概要

iOSで使われるUIベスト3に入るUITableView

そのUITableViewのセルの高さを内容に応じて動的に変更する方法についてまとめました。

実装方法

  • UITableView.rowHeightUITableViewAutomaticDimensionを設定する
  • セルのAuto Layoutの縦軸が全て繋がるように設定する

サンプルコード

サンプルコードは少し長いですが、実際はカスタムセルとセル内に表示するでかい文字列を生成するコードが大半です。

ViewController.swift

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil),
                           forCellReuseIdentifier: "TableViewCell")
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 44.0
    }
}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 12
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
        cell.configure(with: TableViewCell.Model(title: cellTitle, desc: text, date: Date()))
        return cell
    }
    
    var cellTitle: String {
        return [title1, title2, title3][Int(arc4random()) % 3]
    }
    var text: String {
        return [text1, text2, text3][Int(arc4random()) % 3]
    }
    
    var title1: String { return "HogeHoge" }
    var title2: String { return "ダミー太郎" }
    var title3: String { return "本日晴天なり🇯🇵" }
    var text1: String {
        return """
        この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
        """
    }
    var text2: String {
        return "ダミーテキスト。"
    }
    var text3: String {
        return """
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        """
    }
}

TableViewCell.swift

class TableViewCell: UITableViewCell {
    struct Model {
        let title: String
        let desc: String
        let date: Date
        
        var dateString: String {
            let fmt = DateFormatter()
            fmt.dateFormat = "yyyy/MM/dd"
            return fmt.string(from: date)
        }
    }
    
    @IBOutlet private weak var titleLabel: UILabel!
    @IBOutlet private weak var descLabel: UILabel!
    @IBOutlet private weak var dateLabel: UILabel!
    
    private(set) var model: Model? {
        didSet {
            titleLabel.text = model?.title
            descLabel.text = model?.desc
            dateLabel.text = model?.dateString
        }
    }
    
    func configure(with model: Model?) {
        self.model = model
    }
}

レイアウト

f:id:motom552:20171210212157p:plain
UITableViewのセル高さを動的に変更するためのレイアウト