完全に理解する Storyboard & UIKit (Day 16): UITableViewのカスタムセル作成

Day 15では、iOS標準のシンプルなテキストセルを表示させました。しかし実際のアプリでは、「左にユーザーのアイコン、右上に名前、その下にツイート本文、右端にいいねボタン」のように、複雑なレイアウトを持ったリスト行が必要です。

これを実現するのが カスタムセル（Custom UITableViewCell） の作成です。

1. カスタムセル作成の3ステップ

カスタムセルの作成には、「見た目（Storyboard）」と「裏側の設計図（Swiftファイル）」の両方を用意し、紐付ける必要があります。

ステップ1: Viewの作成（Storyboard）

1. ViewController上のTableView内に配置した Prototype Cell を選択します。
2. セルの高さを広げ、その中に UIImageView や UILabel を自由にドラッグ＆ドロップして配置します。
3. セルの中（Content View）で、Day 4〜6で学んだ Auto Layout または Stack View を駆使して制約をつけます。
4. Attributes Inspector で、セルに必ず Identifier（例: CustomTweetCell）を設定します。

ステップ2: クラスファイルの作成（Swift）

見た目を操作するための専用クラスを作成します。

1. Xcodeのメニューから File > New > File... を選択します。
2. Cocoa Touch Class を選びます。
3. Subclass of: に UITableViewCell を指定し、名前を CustomTweetCell として保存します。

ステップ3: Storyboardとコードの紐付け

1. 再度Storyboardを開き、作成したセルを選択します。
2. Identity Inspector (⌥⌘3) を開き、Class にステップ2で作成した CustomTweetCell を指定します。
3. Assistant Editorを開き、セル内のImageViewやLabelから CustomTweetCell クラスへ、IBOutlet を接続します。

swift
// CustomTweetCell.swift
import UIKit

class CustomTweetCell: UITableViewCell {
    @IBOutlet weak var userImageView: UIImageView!
    @IBOutlet weak var userNameLabel: UILabel!
    @IBOutlet weak var tweetContentLabel: UILabel!

    // セルがStoryboardからロードされた直後に呼ばれる初期化メソッド
    override func awakeFromNib() {
        super.awakeFromNib()
        // アイコンを丸くするなどの初期設定をここに書く
        userImageView.layer.cornerRadius = userImageView.frame.width / 2
    }
}

2. ViewController側でのセルの呼び出し

セルの準備ができたら、Day 15で実装した cellForRowAt メソッドを修正して、このカスタムセルを呼び出します。

swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    // 1. Identifierを指定し、as? を使って自作クラスの型にキャスト（変換）する
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTweetCell", for: indexPath) as? CustomTweetCell else {
        return UITableViewCell()
    }

    // 2. 自作クラスのIBOutletにアクセスしてデータをセットする
    let tweet = tweetList[indexPath.row]
    cell.userNameLabel.text = tweet.userName
    cell.tweetContentLabel.text = tweet.content
    cell.userImageView.image = UIImage(named: tweet.imageName)

    return cell
}

※ Day 15で使用した defaultContentConfiguration() は標準デザイン専用の機能なので、カスタムセルの場合は従来通り直接IBOutletのプロパティ（.text など）に代入を行います。

3. 高度なテクニック: セルの高さの自動計算

カスタムセルの中に、複数行のテキスト（長文）を表示するラベル（Lines = 0）がある場合、文字数によってセルの高さを動的に変えなければなりません。

昔のiOS開発では文字数から高さを手動計算するという地獄の苦しみがありましたが、現在は Auto Layoutの機能（Self-Sizing Cells）によって自動化されています。

自動計算（Self-Sizing）を有効にする条件

セル内の要素が、セルのTopからBottomまで、Auto Layoutの制約で隙間なく（またはStack Viewで）完全に繋がっていること です。 これにより、Labelの Intrinsic Content Size（文字数による自然な高さ）がセルの外枠を押し広げるように働き、システムがセルの高さを自動算出します。

また、viewDidLoad で以下の2行が設定されていることを確認してください（iOS 11以降はデフォルトで有効になっています）。

swift
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 100 // ざっくりとした平均的な高さ

📝 今日のまとめ

• 標準デザイン以外のリストを作るには、UITableViewCellを継承したカスタムクラス を作成する。
• セルの Identifier と Custom Class の設定をStoryboard上で忘れないこと。
• cellForRowAt メソッド内で、as? CustomCellClass でキャスト してからプロパティにアクセスする。
• セルの高さを文字数に合わせて自動可変にするには、上下のAuto Layout制約を完全に繋ぎ切る必要がある。

これで縦スクロールの美しいリストUIが作れるようになりました。 明日の Day 17 では、TableViewの兄弟であり、縦横無尽なグリッドレイアウト（タイル状の表示など）を可能にする強力なコンポーネント UICollectionView の基礎を学びます。