もちゅろぐ
iOS
UITableView
iOSでSlackアプリみたいなアイコンと可変文字のセルの作り方

iOSでSlackアプリみたいなアイコンと可変文字のセルの作り方

2019-10-1

Table of Contents

View構成はUIViewController内UITableView
- UIViewControllerやUITableViewのコードは特に凝ったつくりではない
UITableViewCellのConstraints設計が重要
iOSのConstraintsで2つ制約をつけるテクニックは覚えよう

この記事はiOSでUITableViewとUITableViewCellでSlackみたいな「可変テキストがアイコン高さ幅より下回ってもアイコンよりは小さくならず」「可変テキストがアイコン高さ幅より上回っていたらセルの高さ幅が可変テキストに追従する」セルをプログラムは特別な実装は不要でUITableViewCellの AutoLayout設計 で Constraintsを2つ制約つけるテクニック で実装する方法について説明します。Twitterみたいなセルでもイメージは同じです。

View構成はUIViewController内UITableView

この記事で紹介するView構成について説明します。

ViewController: UIViewController
- views: UIView
  - tableView: UITableView

見てすぐ分かるとおりView構成は、ViewControllerがTableを持ってるだけの非常に一般的な構成となります。

UIViewControllerやUITableViewのコードは特に凝ったつくりではない

コード側もカスタムセルを高さ自動算出にしただけで特に変わった部分はありません。ファイルは2ファイルです。

ViewController.swift
TableView.swift

単純ではありますが、それぞれいくつか処理を説明します。

もしセル高さの自動算出について詳しく知りたい場合は、「【初心者向け】UITableViewCellの高さを可変にする」の記事に詳しくまとめてあります。

ViewController.swift

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!

    let text = """
Slackみたいなセル。文字列の高さがアイコンより小さい場合は、セルの高さ幅はアイコンより小さくならない。
しかし文字列が長くなり、高さがアイコンより大きくなる場合は、セルの高さ幅はアイコンより大きくなり、文字列の高さに追従する
"""
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.estimatedRowHeight = 81
        tableView.rowHeight = UITableView.automaticDimension
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 400
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableCell", for: indexPath)
        if let c = cell as? TableCell {
            let comment = String.init(repeating: text, count: indexPath.row + 1)
            c.setup(image: #imageLiteral(resourceName: "icon"), name: "mothule", comment: comment)
        }
        return cell
    }
}

今回はサンプルなので構造をシンプルにするためセル数は固定で400にしてあります。
estimatedRowHeightの数字はInterface Builderの高さ幅を適当に参照します。この値は工夫したところでslackのようなコミュニケーションツールは発言量に差があるので全ての発言量をカバーする推測値は不可能です。
セル参照ではTableCellという名前のセルを使っています。これはTable View CellのIdentifierで設定された文字列を指定してます。

let comment = String.init(repeating: text, count: indexPath.row + 1)

こちらはセル位置の値に比例してたテキスト量を生成してるだけです。

c.setup(image: #imageLiteral(resourceName: "icon"), name: "mothule", comment: comment)

こちらはカスタムセルの制御クラス(TableCell)で用意したセットアップメソッドで、アイコン情報と発言者名、発言内容の情報をセルに渡しています。

次にカスタムセルの制御クラス(TableCell)について説明します。

TableView.swift

class TableCell: UITableViewCell {
    @IBOutlet private weak var iconImageView: UIImageView!
    @IBOutlet private weak var commentLabel: UILabel!
    @IBOutlet private weak var nameLabel: UILabel!

    func setup(image: UIImage, name: String, comment: String) {
        iconImageView.image = image
        nameLabel.text = name
        commentLabel.text = comment
    }
}