質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

テーブルビューのセルの高さの自動調整について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 703

sw07

score 6

お世話になります。
Swift初心者です。

お忙しい中大変申し訳ございませんが、
現在、UITableViewの実装で悩んでおります。

セルの高さの自動調整についてのご質問となります。

 前提・実現したいこと

セルの構成として、
セルの左半分にLabel、右半分にTextViewを配置し、
Labelのテキストは可変長(テキスト長に応じて高さが変動)、TextViewの高さは固定(高さ:300)として、
・Labelのテキスト長が少ない(Labelの高さ<TextViewの高さ)の場合 → セルの高さをTextViewの高さとする
・Labelのテキスト長が多い(Labelの高さ>TextViewの高さ)の場合 → セルの高さをLabelの高さとする
を考えております。

 発生している問題・エラーメッセージ

書籍やWebより、
セルの高さの自動調整として、

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        freeSetsumon.estimatedRowHeight = 150
        return UITableViewAutomaticDimension
    }


の処理で高さが自動で算出され、
かつ、その際、LabelもしくはTextViewのいずれかに制限をかけなければならないというのは
何となくわかってきてはいるのですが、実装上どのようにすれば上記が実現できるのかがわからず
困っている状況でございます。

実装方法について、ご存知の方がおりましたら、
ご助力を賜りたく、ご教授頂けますと幸いでございます。

ご迷惑をおかけ
どうぞ、よろしくお願い致します。

 該当のソースコード

▼Label側(Viewの中にLabelを配置) Labelはstoryboard上でLines=0としております
        // View include Label
        labelBaseView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            labelBaseView.widthAnchor.constraint(equalToConstant: 400.0),
            labelBaseView.topAnchor.constraint(equalTo: cell.topAnchor, constant: 5.0),
            labelBaseView.leadingAnchor.constraint(equalTo: cell.leadingAnchor, constant: 10.0),
            labelBaseView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: 0.0)
            ])
        // Label
        labelName.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            labelName.topAnchor.constraint(equalTo: labelBaseView.topAnchor, constant: 0.0),
            labelName.leadingAnchor.constraint(equalTo: labelBaseView.leadingAnchor, constant: 0.0),
            labelName.trailingAnchor.constraint(equalTo: labelBaseView.trailingAnchor, constant: 0.0),
            labelName.bottomAnchor.constraint(equalTo: labelBaseView.bottomAnchor, constant: 0.0)
            ])

▼TextView側(Viewの中にTextViewを配置)
        // View include TextView
        textBaseView.translatesAutoresizingMaskIntoConstraints = false
        textBaseView.heightAnchor.constraint(equalToConstant: 300.0).isActive = true
        textBaseView.topAnchor.constraint(equalTo: cell.topAnchor, constant: 10.0).isActive = true
        textBaseView.leadingAnchor.constraint(equalTo: labelBaseView.trailingAnchor, constant: 8.0).isActive = true
        textBaseView.trailingAnchor.constraint(equalTo: cell.trailingAnchor, constant: -10.0).isActive = true
        if labelHeight < 300.0 {
            inputBaseView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: -10.0).isActive = true
        }
        // TextView
        textView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            textView.topAnchor.constraint(equalTo: textBaseView.topAnchor),
            textView.bottomAnchor.constraint(equalTo: textBaseView.bottomAnchor),
            textView.leadingAnchor.constraint(equalTo: textBaseView.leadingAnchor),
            textView.trailingAnchor.constraint(equalTo: textBaseView.trailingAnchor)
            ])

▼実行箇所

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! sampleTableViewCell
        cell.labelName.text = "1234567890"
        ★ここでLabel側の制約処理を実行しています
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        sampleTableView.estimatedRowHeight = 150
        return UITableViewAutomaticDimension
    }

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        tableView.beginUpdates()
        ★ここでTextView側の制約処理を実行しています
        tableView.estimatedRowHeight = 150
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.endUpdates()
    }

 試したこと

 補足情報(FW/ツールのバージョンなど)

Swift4
xCode10.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sw07

    2018/10/23 11:18

    「inputBaseView」は「textBaseView」の誤りでした。記載を修正いたしました

    キャンセル

  • sw07

    2018/10/23 11:19

    階層はセルの中にViewを左右に2つ並べ、左のビューの中にLabel、右のビューの中にTextViewを配置する構成となります。

    キャンセル

  • sw07

    2018/10/23 11:21

    各制約処理の実行箇所につきまして、追記させて頂きました。お手数をおかけ致しまして申し訳ございませんが、ご確認頂けますと幸いです。よろしくお願い致します。

    キャンセル

回答 1

checkベストアンサー

+1

if labelHeight < 300.0 {
    inputBaseView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: -10.0).isActive = true
}

の代わりに、

let bottom = textBaseView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: -10.0)
bottom.priority = UILayoutPriority(rawValue: labelName.contentCompressionResistancePriority(for: .vertical).rawValue - 1)
bottom.isActive = true

これでどうでしょうか?
Labelの縦に伸びる力(?)よりもTextViewのbottom制約の優先を下げています。

 ちなみに

tableView(_:willDisplay:forRowAt:)の処理は不要です。

また、tableView(_:heightForRowAt:)も不要です。
こっちは、書くとすれば、

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    return 150
}

となります。

 さらに

制約を付けるのは一度だけでいいので、sampleTableViewCellの`awakeFromNib()にでも書くのがいいと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/23 11:59 編集

    補足ですが、セルにViewを乗せるときは、cellに直接乗せるのではなくcell.contentViewに乗せます。乗せたViewの制約もcell.contentViewに対して付けます。

    こちらではcell.contentViewに乗せて試しましたので、もしうまくいかない場合は、contentViewにViewを乗せるように修正して下さい。(今のままでうまくいったとしても修正をお勧めしますが)

    キャンセル

  • 2018/10/24 14:36

    解決できました!
    UILayoutPriorityで制約に優先順位をつけることで解決できるとは考えもおよばず。。
    大変勉強になりました!
    スムーズかつわかりやすいご回答、誠にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る