64
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-02-23

普段私がカスタムセルを作るときに使う方法は、主に以下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つの方法を比べてみました。カスタムセルの作り方に悩んだときに少しでもお役に立てば嬉しいです。

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

64
53
2

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
64
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?