Help us understand the problem. What is going on with this article?

【iOS】TableViewのカスタムセルを作る方法2つを比べてみた(PrototypeCell / xibファイル)

普段私がカスタムセルを作るときに使う方法は、主に以下2つです。

  1. Storyboard上のTableView内で、PrototypeCellを使う
  2. xibファイルとして切り出したものを、登録して使う

それぞれに使うべきタイミングやメリット・デメリットがあるなーと思ったので、比較してみたいと思います。

①Storyboard上のTableView内で、PrototypeCellを使う方法

使い方のおさらい

PrototypeCellとは言わずもがな、LibraryからTableViewCellを選んだときにTableView上に表示されるアレです。(アプリ開発をはじめて間もない頃はこの方法しか使えず、よくお世話になっていました。)
スクリーンショット 2019-02-24 1.21.29.png
こんな感じで↓、ImageViewやLabelを置いたり、アクセサリを付けたりしてカスタムすることが多いのではないでしょうか。
スクリーンショット 2019-02-24 1.30.29.png
UITableViewCellを継承したカスタムクラスを作り、AttributesInspectorでIdentifierを入れましょう。
スクリーンショット 2019-02-24 1.37.03.png
あとはViewController内で、Identifierをもとに呼び出して使うことができます。

ViewController
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
     if let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as? CustomCell {
         return cell
     }
     return UITableViewCell()
}

メリット:grin:

  • 簡単に使える
    • 初心者にはこちらのほうが易しい気がします
  • TableViewとの関連がわかりやすい
    • 同じStoryboard上で完結するため
  • ファイル数が増えない
    • .swift, .xibのファイルが増殖するのを防ぐことができる

デメリット:sob:

  • Cellの使い回しができない
    • 同じようなセルを使いたい場合でも再度作り直すことになる
  • ViewControllerが肥大化する
    • セルのロジックをViewControllerに積んでいくことになる

こんなときに使うといいんじゃないでしょうか

  • 何でもいいからとりあえずカスタムセルをTableViewに表示してみたいとき
  • 将来大きくする予定のないプロジェクトで、セルの使い回しや見通しの良さまで考える必要がないとき
  • 自分ひとりで行うプロジェクトのとき

小さな個人プロジェクトなんかはこっちで全然問題ないと思います:ok_hand:

②xibファイルとして切り出したものを、登録して使う方法

使い方のおさらい

UITableViewCellを継承したカスタムクラスを新しく作ります。Also create XIB fileにチェックを入れてxibファイルも一緒に作ってしまいましょう。
スクリーンショット 2019-02-24 2.11.08.png
xibファイル上でお好みのレイアウトを組み、AttributesInspectorでIdentifierを入れましょう。
スクリーンショット 2019-02-24 2.16.12.png
ポイントとしては、ViewControllerのviewDidLoad()内でxibを登録すること!

ViewController
override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register(UINib(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: "CustomCell")
}

あとはPrototypeCell同様、Identifierをもとに呼び出して使うことができます。

ViewController
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
     if let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as? CustomCell {
         return cell
     }
     return UITableViewCell()
}

メリット:grin:

  • セルの使い回しができる
    • 他のTableViewでも同じようなセルを使いたいときに便利
  • セルのロジックを.swiftファイルに分けて書くことができる
    • ViewControllerが太らなくて済む
  • 複数人で開発するときのコンフリクトリスクを減らすことができる
    • みんなが同じStoryboardいじっちゃうなんてことが減る

デメリット:sob:

  • ファイル数が増える
    • ファイル数が100を超えるなんてザラ
  • 初心者には少しとっつきにくいかもしれない
    • 私は最初「xibってなにそれ怖い」状態でした(笑)

こんなときに使うといいんじゃないでしょうか

  • 同じようなセルを色々な箇所で使うとき
  • ViewControllerをスマートに保ちたいとき
  • チームで開発するとき
  • そろそろ脱初心者したいなってとき

会社で作るプロジェクトや、長く続けていきたいプロジェクトはこっちを使うといいと思います:ok_hand:

おわりに

他にもxibファイルを使わずにコードで書いたりとか方法はあると思いますが、今回は個人的に普段よく使っている2つの方法を比べてみました。カスタムセルの作り方に悩んだときに少しでもお役に立てば嬉しいです。

カスタムセルは用法用量を守って正しくお使いください。(言ってみたかっただけ)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away