Swift カスタムセルを再利用したtableViewの作り方 [初級向け]

<img width="1440" alt="スクリーンショット 2018-06-03 16.41.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/ef31c5ba-dec7-7fdb-a70d-20a84157c254.png">

# 🍀まえがき

## ■書いてあること
xcodeにて、再利用するカスタムセルをxibファイルで別に作って、TableViewに呼び出す方法

## ■下記の症状に効能があります

- カスタムセルを手軽に、簡単に使えるようになりたい
- カスタムセルの作り方について、調べたけど、中級以上のレベル感の記事しかなくて理解できない
- 何を言ってるのかチンプンカンプンだからもっとレベル下げて欲しい

## ■この記事の特徴
初心者でも内容が分かりやすいようになってます。
**特に、英語で命名するのがセオリーですが、あえて全部日本語にしてます（それでも動きます）**
xcode 9.4 swift 4.1

## ■過去の関連記事

SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

## ■主な流れ

1. 表示させたいセルのテンプレート的な物のレイアウトを作る（セルの中身だけ的なもの）
2. セルのテンプレート用のクラスを作る
3. ストーリーボードで簡単なメイン画面の設定
4. メイン画面のコントローラーの編集
5. 完成

## ■完成品を先にどうぞ

```セル用のクラス.swift
//  カスタムセルクラス.swift
import UIKit
class カスタムセルクラス: UITableViewCell {
  @IBOutlet weak var 画像: UIImageView!
  @IBOutlet weak var ラベル: UILabel!

  func セルに表示するデータの制御(選択数はこれを使う: IndexPath){
    self.ラベル.text = String((選択数はこれを使う.row)+1)
    self.画像.image = UIImage(named: "1.jpg")
  }
}
```

```ViewController.swift
//  ViewController.swift
import UIKit

class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {

  @IBOutlet weak var マイテーブル: UITableView!

  override func viewDidLoad() {
    マイテーブル.register (UINib(nibName: "カスタムセルクラス", bundle: nil),forCellReuseIdentifier:"再利用セル")
  }

  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }

  func tableView(_ tableView: UITableView, cellForRowAt 何個セル出すの: IndexPath) -> UITableViewCell {
    let 表示するセルの内容 = tableView.dequeueReusableCell(withIdentifier: "再利用セル", for: 何個セル出すの) as! カスタムセルクラス
    表示するセルの内容.セルに表示するデータの制御 ( 選択数はこれを使う : 何個セル出すの )
    return 表示するセルの内容
  }
}
```


# 💡詳細手順

## 1️⃣下ごしらえ
- シングルページでプロジェクトを立てる
- 表示するサンプル画像を追加する
- カスタムセル用に新規のファイルを作成する



### □シングルページでプロジェクトを立てる
- プロジェクト名は適当でok

<img width="733" alt="スクリーンショット 2018-06-03 15.01.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/5e0d2361-3c6b-636d-a070-52a76084cd23.png">

### □表示するサンプル画像を追加する
- プロジェクトを作成したら、プロジェクトフォルダ直下に、使用したい画像をD&Dしましょう
- 今回は可愛い子猫ちゃんで癒されましょう(о´∀`о)
- 名前は取り込みをしてから変更してもokですが、先に変えてから入れちゃいましょう
- copy items if neededにチェックを入れておくとプロジェクト内にコピーデータを作成してくれます

<img width="1440" alt="スクリーンショット 2018-06-03 15.04.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/7699d51a-2c0a-99b3-c4b4-2bb7ff16b7ad.png">

<img width="1440" alt="スクリーンショット 2018-06-03 15.04.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/58921860-c91c-2029-9105-19cf938e581c.png">

<img width="1440" alt="スクリーンショット 2018-06-03 15.05.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/9ae28c55-4f57-0b99-30c5-be0191132479.png">


### □カスタムセル用に新規のファイルを作成する
- cocoatouchで新規ファイルを作成します
- ポイントは **Also create XIB file** にチェックを入れることです
- 新規のswiftファイルとxibファイルができたらokです

<img width="1440" alt="スクリーンショット 2018-06-03 15.10.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/87c025e7-9342-9516-f22c-ab44f97c513a.png">

<img width="1440" alt="スクリーンショット 2018-06-03 15.11.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/07205c79-2b88-eeb8-ebf4-d4435eeba028.png">


> **💡つまづきポイント：xibファイルってそもそもなんやねん**
> いわゆるストーリーボード用のファイルのことです
> xibファイルを作成すると、自動的にnibファイルができます
> xibファイルは単体のファイル
> nibファイルはxibを含めた複数のファイルからなるパッケージと覚えておきましょう
> http://mtntmyk.hatenablog.com/entry/2017/10/31/210049

---

## 2️⃣カスタムセルを作っていく

### □カスタムセルクラス.xibを設定していく
- カスタムセルクラス.xibを開く
- 外枠のサイズをW375*H100にする（iphone8を想定）
- 画像のオプションで下記の２つを忘れずに設定
    - ContentsMode→AspectFill
    - Drawing→ClipToBounds

<img width="1440" alt="スクリーンショット 2018-06-03 15.20.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/1af6af9e-6985-20eb-86c6-bf2360416557.png">

<img width="1440" alt="スクリーンショット 2018-06-03 16.37.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/3137b286-374f-4059-461c-9ad7695586a0.png">

- ラベルと画像をこんな感じに配置する
- (テキストは分かりやすく、赤文字＆サイズ大きめにしてありますが、しなくてもokです)
- (オートレイアウトは今回は省略します)

<img width="1440" alt="スクリーンショット 2018-06-03 15.23.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/d0865fa0-e238-aec9-ef4f-2c8d487e7acf.png">



### □カスタムセルクラス.swiftを設定していく
- プロジェクト名を日本語にしたせいか、初期クラス名が変な感じになってるので、直しましょう
- デフォルトで入っているファンクションも今回はいらないので、削除しちゃいます

<img width="1440" alt="スクリーンショット 2018-06-03 15.27.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/a09131ff-34ff-e0e7-7c30-533c86faa4aa.png">

<img width="1440" alt="スクリーンショット 2018-06-03 15.28.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/c9d79f20-8b40-da94-62bb-906e66e89a83.png">


- 先ほど設置した、ラベルと画像をみょいんと紐付けます

<img width="1440" alt="スクリーンショット 2018-06-03 15.33.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/1d09d7a4-9c54-d273-2ae7-ff5183e61a0e.png">


- さらにこんな感じで追記します
- 今回は、「何番目に表示されたセルか」という番号をラベルに表示させて行きます

```カスタムセルクラス.swift
func セルに表示するデータの制御(選択数はこれを使う: IndexPath){
  self.ラベル.text = String((選択数はこれを使う.row)+1)
  self.画像.image = UIImage(named: "1.jpg")
}
```

### □カスタムセルクラス.xibのクラス指定をカスタムセルクラスにする
- 忘れがちなのでご注意ください
<img width="1440" alt="スクリーンショット 2018-06-03 15.44.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/f031d9bc-f54f-57d6-cc2a-2f4b4825c8f0.png">


## 3️⃣メイン画面の設定

### □main.storyboardを設定していく

- tableviewを画面一杯に設置して、datasouceとdelegateを紐付け


### □ViewContoroller.swiftを設定していく
- 先ほどのtableviewを紐付ける

<img width="1440" alt="スクリーンショット 2018-06-03 16.12.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/117802ec-810a-ef15-3961-c8d1e1f5616e.png">

- datasouceとdelegateをクラスに継承
- (入れた瞬間、怒られます。fixを押して、コードを自動追加してもらいましょう)

<img width="1440" alt="スクリーンショット 2018-06-03 15.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/91b838a6-03b2-ad7b-01fd-2c4097374323.png">

- 先ほど作成したカスタムセルを呼び出す記述を追加する
- ざっくり言うと、"カスタムセルクラス"と言うファイルを読み込んで、"再利用セル"と言う名前で使えるようにしてねと言う内容

```ViewController.swift
  override func viewDidLoad() {
    マイテーブル.register (UINib(nibName: "カスタムセルクラス", bundle: nil),forCellReuseIdentifier:"再利用セル")
  }
```
> **💡つまづきポイント：xib作ったのに、なんでいきなりnibやねん**
> xibファイルを作成すると、自動的にnibファイルができます
> xibファイルから最終的にnibファイルが作られます
> nibはxibと同じファイル名になります

- 表示するセルの数を指定する(`return 10`を追記するだけ)

```ViewController.swift
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }
```

- 表示するセルの内容を指定する

```ViewController.swift
  func tableView(_ tableView: UITableView, cellForRowAt 何個セル出すの: IndexPath) -> UITableViewCell {
    let 表示するセルの内容 = tableView.dequeueReusableCell(withIdentifier: "再利用セル", for: 何個セル出すの) as! カスタムセルクラス
    表示するセルの内容.セルに表示するデータの制御 ( 選択数はこれを使う : 何個セル出すの )
    return 表示するセルの内容
  }
```
---

## 4️⃣完成！
お疲れ様でした！
完成したら、コメントに「ワッフルワッフル」と叫んでください😆✨

<img width="1440" alt="スクリーンショット 2018-06-03 16.41.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/63060/ef31c5ba-dec7-7fdb-a70d-20a84157c254.png">

# 追記
オートレイアウト設定をしないと、画像のように高さがきれいに出ませんのでご注意ください。
オートレイアウトに関しては、それだけでボリュームが出てしまうので、また別の記事にて言及していきたいと思いますm(_ _)m

# NextStage!

**🎉TODOアプリを作ってみようシリーズ**

📱Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

📱SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

📱Swiftでカスタムセルを再利用したTODOアプリを作ってみよう
https://qiita.com/TD3P/items/116a2199b1f872ac6471

📱SwiftでCoreDataを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/adbbeee827995cffd509

📱SwiftでRealmを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/616e0dbd364179ca284b

---

📱Flutterで基本のTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0

📱Flutterでページ遷移するTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/e547c4cf460319f5093c

📱Flutter x Firestore で気軽に永続化してオラオラする方法
https://qiita.com/pe-ta/items/ccd49fc396b063a821af