1. ホーム
  2. ios

[解決済み] テーブルビューのセクションヘッダーの高さを、オートレイアウトで動的に取得することは可能でしょうか?

2022-07-14 08:27:11

質問

iOS 8 の新機能として、行の推定高さを設定し、自動レイアウトを使用してセル内に要素をレイアウトするだけで、100% 動的なテーブル ビュー セルを得ることができます。コンテンツの高さが増加すると、セルも高さが増加します。これは非常に便利ですが、テーブル ビューのセクション ヘッダーで同じことを実現できるのでしょうか?

例えば UIViewtableView:viewForHeaderInSection: を追加し、さらに UILabel サブビューを追加し、ビューに対してラベルの自動レイアウト制約を指定し、ラベルの内容に合わせてビューの高さを増加させることができます。 tableView:heightForHeaderInSection: ?

のドキュメントは viewForHeaderInSection のドキュメントには次のように書かれています: "このメソッドは tableView:heightForHeaderInSection: も実装されているときのみ正しく機能します。

それができない場合、この動作を模倣する最良の方法は何でしょうか。

どのように解決するのですか?

これは可能です。iOS 8 で導入された動的なセルの高さと並んで新しいものです。

これを行うには、セクション ヘッダーの高さに自動寸法を使用し、必要であれば、セクション ヘッダーの推定高さを提供することができます。これは、テーブル ビューが選択されたときに Interface Builder で行うか、プログラムによって行うことができます。

tableView.sectionHeaderHeight = UITableView.automaticDimension
tableView.estimatedSectionHeaderHeight = 38

//You can use tableView(_:heightForHeaderInSection:) and tableView(_:estimatedHeightForHeaderInSection:)
//if you need to support different types of headers per section

次に tableView(_:viewForHeaderInSection:) を実装し、Auto Layout を使用して、希望するようにビューを制約します。必ず、完全に UITableViewHeaderFooterView 's contentView のように、特に上から下へ、高さが制約によって決定されるようにします。以上です。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {    
    let headerView = UITableViewHeaderFooterView()
    headerView.translatesAutoresizingMaskIntoConstraints = false
    headerView.backgroundView = {
        let view = UIView()
        view.backgroundColor = myCustomColor
        return view
    }()

    let headerLabel = UILabel()
    headerLabel.translatesAutoresizingMaskIntoConstraints = false
    headerLabel.text = "Hello World"
    headerView.contentView.addSubview(headerLabel)
    
    NSLayoutConstraint.activate([
        headerLabel.leadingAnchor.constraint(equalTo: headerView.contentView.leadingAnchor, constant: 16),
        headerLabel.trailingAnchor.constraint(equalTo: headerView.contentView.trailingAnchor, constant: -16),
        headerLabel.topAnchor.constraint(equalTo: headerView.contentView.topAnchor, constant: 12),
        headerLabel.bottomAnchor.constraint(equalTo: headerView.contentView.bottomAnchor, constant: -12)
    ])
    
    return headerView
}