LoginSignup
1
2

More than 3 years have passed since last update.

UITableViewCellでいっつも躓くんですが。(1)

Posted at

前書き

 毎度毎度つまずき、今回も例によってつまずいて大変困っているので、分かっていることを一旦整理しておきたいのです。混乱が生じる原因として、セルを生成して設定する方法がいろいろありすぎて、どれを使えばいいのか、自分がどれを使っているのかわかんなくなっちゃうことが挙げられる気がします(少なくとも自分はそう)。なので、この記事ではそれぞれの方法を簡潔にまとめることを目標としたいと思います。
 ちなみに、UITableViewについて説明すると大変長くなってしまいフォーカスするポイントがわかりにくくなりそうなので、この記事では極力セルのみに着目して進めていきたいと思いますです。

今回はどんな回?

最初の2回は、生成〜セルの設置までの流れをまとめるつもりです。今回は「xib使わない!」編です!!最後にセルの再利用についてちょっと書きます。

UITableViewCellとは(ざっくり)

 Swiftでリスト表示するために使うUITableViewというものがあって、そのリストの一個一個=「セル」を定義するのがUITableViewCellです。UITableViewCellを定義する時にはxibというものを使ったり使わなかったりします。

xibとは(超ざっくり)

 なんかストーリーボード上でパーツ(UIViewとかレーベルとかボタンとか)配置したりデザインしたりしていい感じにできるやつです。コードからパーツを生成しなくて済むので、視覚的に全体を作っていけるのがグッドな点。初期化がよくわからんのがバッドな点。こいつがよく分かっていないせいで毎回つまずいている気がする。

実装方法1:xibを使わない場合

1-1:ストーリーボードも使わずクラスも作らない場合

セルの生成

 基本的にはこんな感じで初期化できるみたいです。


  cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")

参考:5分でUITableViewを作ってみる。
 自分はこの方法全然使わないので詳細はわかりませんが、デフォルトのスタイルでセルを生成できるみたいです。他にもいくつかスタイルがあるみたいで、こちらのサイトでまとめられています。そこまで凝ったスタイルにする必要がなければ、これらを使ってチャチャっと実装しちゃうのがいいでしょうね。
 後ろについているreuseIdentifierというのは、セル再利用時に呼び出す名前の設定です(後述します)。よく見るやつはregisterというメソッドを使ってセルを登録するやつですが、こういう書き方もできるのかなぁ。よくわからん。

セルをマスに突っ込む

 そして、ここで生成したセルを、テーブルのそれぞれのマスに突っ込んでいきます。cellForRowAtというメソッドで以下のように書きます。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
  ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")

  cell.textLabel?.text = self.items[indexPath.row]

  return cell

}

参考:5分でUITableViewを作ってみる。
 dequeueReusableCellというメソッドが2行目で呼ばれていますが、これは先ほど名前をつけたセルを呼び出す時に使うメソッドです。呼び出した名前のセルが登録されていない場合は、新たにセルを生成して登録する、という流れになっているようです。
 5行目ではセルのテキストを設定しています。どうやらデフォルトスタイルのセルにはtextLabelというものがあるらしく、これに表示したいテキストを設定するだけでお手軽に表示できます。単にテキストを表示したいだけなら、わざわざクラスを新たに作成しなくても、上記のように作れちゃうわけですね。

1-2:ストーリーボードは使うがクラスは作らない場合(基本編)

ストーリーボードでセルをテーブルに登録する

 ストーリーボードで設置したUITableViewにUITableViewCellを設置します。ここで、セルにIdentifierを設定することで、呼び出し可能にします。
スクリーンショット 2020-12-27 20.13.56.png

セルをマスに突っ込む


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // StoryBoradで定義したTableViewCellを取得する
    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "NameCell", for: indexPath)
    cell.textLabel?.text = tableData[indexPath.row]
    return cell
}

参考:【Swift】Swift入門 ~ UITableViewを使ってみる ~
1-1と同じ感じですね。

1-3:ストーリーボードは使うがクラスは作らない場合(カスタマイズ編)

 1-2と同じ感じでセルをもっとカスタマイズすることもできるようです。

ストーリーボードでセルをカスタマイズ

 ストーリーボード上でセルを設置した段階で、ヒエラルキーはこのような表示になっていると思います。
スクリーンショット 2020-12-27 20.25.40.png
 テーブルにセルを設置したように、セルにimageViewやLabelを設置していくとこんな感じになります。
スクリーンショット 2020-12-27 20.28.24.png
スクリーンショット 2020-12-27 20.28.31.png
 セルのcontentViewの中にいろいろ入っていることがわかりますね。

セルをコードでカスタマイズしてマスに突っ込む

 説明が長くなりそうなので、詳細はこちらのサイトで確認してみてください。imageViewに画像を設定したりLabelにテキストを設定したりする方法は、セルが絡まない場合と同じです。セルをマスに突っ込む方法はこれまで通りです。

ところで、セルの再利用、とは?

 書こうとして気付いたのですが、最近自分でわかることをまとめたばかりでした……。ということでこちらの記事をチェキラ!この記事が当てにならん場合は、公式とかをチェキラ!

参考

5分でUITableViewを作ってみる。
【Swift】tableViewとtableViewCellの使い方とソースコード事例
【Swift】Swift入門 ~ UITableViewを使ってみる ~
[iPhone] UITableView をストーリボードで作る

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2