TableViewの基礎

# はじめに
UITableViewのsectionとcellの使い方をまとめました！

# 完成品
<img width="287" alt="スクリーンショット 2018-05-10 20.41.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/de6513a4-e7e9-e19b-b990-d81beb30e1bc.png">

<img width="286" alt="スクリーンショット 2018-05-10 20.41.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/f469dd60-00cd-4a9e-69fd-93a85315f92f.png">


# つくってみよう
今回は、UINavigationControllerとUITableViewControllerとUIViewControllerを使いました。

まず、StoryboardでNavigationControllerを持ってきます。
<img width="623" alt="スクリーンショット 2018-05-10 20.44.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/a65572ca-8a1e-2ecf-19c5-c7baa32521e4.png">

右のTableViewの上にあるRoot View ControllerをTableViewControllerに変えます。
そして、cellの中にLabelを配置します。
<img width="579" alt="スクリーンショット 2018-05-10 20.47.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/bbc92f2d-272b-a53d-9340-85396db6f16c.png">

そして、Cellを選択して、CellのIdentifierをTableViewCellにします。
<img width="259" alt="スクリーンショット 2018-05-10 20.49.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/d5249ae3-dadf-a868-23cf-d33a10f6392b.png">

次に、StoryboardにViewControllerを持ってきます。
<img width="454" alt="スクリーンショット 2018-05-10 20.50.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/7a7658e3-a9d5-60b8-280b-902deb5ada91.png">

TableViewの上にある黄色いボタンをcontrolボタンを押しながらViewControllerに持っていきます。
<img width="286" alt="スクリーンショット 2018-05-10 20.51.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/da74a114-a32c-2e19-43bc-2b2280f05e0d.png">

すると、こういったものが出るので、Showを押してください。
<img width="173" alt="スクリーンショット 2018-05-10 20.52.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/317898df-5b0f-8b3b-6fdb-9fd48f127122.png">

全体は、下の写真のようになります。
<img width="577" alt="スクリーンショット 2018-05-10 20.54.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/d321b9df-3458-4d9e-dfbc-60f2413955d2.png">

そして、TableViewControllerとViewControllerを繋いているSegueと言うものを押して、IdentifierをSegueにしてください。
<img width="849" alt="スクリーンショット 2018-05-10 20.56.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/760e0920-b0a9-5a7d-6d16-a9f0a7dc3bd8.png">

これでStroyboardはほぼ完成です。

次に、NewFile...からUITableViewControllerを継承をしているTableViewController.swiftとUITableViewCellを継承しているTableViewCell.swiftとUIViewControllerを継承しているViewController.swiftを作ってください。

Fileを継承させるには、Cocoa Touch ClassのSubclass ofに継承させたいクラスを書きます。
<img width="718" alt="スクリーンショット 2018-05-10 21.00.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/0e4a8bb1-5ad5-012d-66c0-e6949e2775a2.png">

作ったファイルは左側のファイル一覧に並びます。

<img width="214" alt="スクリーンショット 2018-05-10 21.00.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/10572e9b-cbae-7df1-e45c-d5a8a0c2423b.png">

そして、StoryboardのTableViewControllerとCellとViewControllerにそれぞれのファイルを紐付けます。
<img width="256" alt="スクリーンショット 2018-05-10 21.03.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/b3ff4af3-7d28-dd33-dec1-49225254ae51.png">

そして、CellのLabelをTableViewCell.swiftに紐付けたいので、TableViewCell.swiftとStryboardを開いて、controlを押しながら、ファイルの方に持ってきます。
Labelの名前は、nameにしてあります。

```TableViewCell.swift
    @IBOutlet weak var name: UILabel!
```

そして、StoryboardのViewControllerにもLabelを置きたいので、LabelをViewControllerの真ん中に置きます。
<img width="215" alt="スクリーンショット 2018-05-10 21.08.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/29ee574c-e02c-3776-2115-34b9e74b45e9.png">

CellのLabelと同じように、StoryboardのViewControllerのLabelをViewControllerにlabelという名前で紐付けます。

```ViewController.swift
    @IBOutlet weak var label: UILabel!
```

ここから、コードを書いていきます。
主に書くのは、TableViewController.swiftです。

```TableViewController.swift
class TableViewController: UITableViewController {
    
    // cellのlabelに書く文字列
    let name1: [String] = ["aaa", "bbb", "ccc"]
    let name2: [String] = ["ddd", "eee", "fff"]
    
    // 遷移先のViewControllerに渡す変数
    var giveData: String = ""

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // sectionの数を返す関数
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

    // sectionごとのcellの数を返す関数
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0 {
            return name1.count
        } else if section == 1 {
            return name2.count
        } else {
            return 0
        }
    }
    
    // sectionの高さを返す関数
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
    }
    
    // sectionに載せる文字列を返す関数
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "seciton\(section)"
    }

    // cellの情報を書き込む関数
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
        
        // ここでcellのlabelに値を入れています。
        if indexPath.section == 0 {
            cell.name.text = name1[indexPath.item]
        } else {
            cell.name.text = name2[indexPath.item]
        }

        return cell
    }
    
    // cellが押されたときに呼ばれる関数
    // 画面遷移の処理もここで書いている
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 押されたときのcellのlabelの文字列をViewControllerに渡したいので、一旦、giveDataに入れとく
        if indexPath.section == 0 {
            giveData = name1[indexPath.item]
        } else {
            giveData = name2[indexPath.item]
        }
        // Segueを使った画面遷移を行う関数
        performSegue(withIdentifier: "Segue", sender: nil)
    }
    
    // 遷移先のViewControllerにデータを渡す関数
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "Segue" {
            let vc = segue.destination as! ViewController
            vc.receiveData = giveData
        }
    }

}
```

ViewController.swiftでの処理は、TableViewControllerから渡されたデータをlabelに反映させるだけです。

```ViewController.swift
class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    var receiveData: String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label.text = receiveData
    }

}
```

TableViewCell.swiftのほうはなにも書かなくて大丈夫です。

```TableViewCell.swift
class TableViewCell: UITableViewCell {

    @IBOutlet weak var name: UILabel!

}
```


これで完成です。

# 最後に
[github](https://github.com/azuma317/TableViewSample)に載せました。
参考にしてください。