#8 XcodeのTableViewの使い方1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
Xcodeで`TableView`と検索する．

<img width="681" alt="スクリーンショット 2019-11-20 午前0.09.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/0f7d1e3f-3947-88bf-c62d-3eaacc9a8efa.png">



##part2
UITableViewを置きたいViewに乗せる．
制約を付ける．
先に`bannerView`を置くこと．

<img width="360" alt="スクリーンショット 2019-11-20 午前0.09.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/56a3ca95-d68a-d7d9-3212-043499a5b34d.png">



##part3
Xcodeで`TableViewCell`と検索する．

<img width="679" alt="スクリーンショット 2019-11-20 午前0.09.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/b379b4d2-7f96-0c40-ba26-b9b4b7d591cf.png">



##part4
UITableViewCellを先ほど置いたUITableViewに乗せる．

<img width="344" alt="スクリーンショット 2019-11-20 午前0.10.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/16ce1a02-ed40-ddcf-5e8c-e21ee0693d46.png">



##part5
Cellを選択した状態で，`Attributes inspector`の`Identifier`にCellを識別するための任意の文字列を入力する．

<img width="255" alt="スクリーンショット 2019-11-20 午前0.15.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/289862ab-dd3b-fd9b-0723-b2e02167f27a.png">



##part6
ここからは`FirstViewController`のみ．
Cellを選択したときに表示する`UIViewController`を置く．

<img width="591" alt="スクリーンショット 2019-11-20 午前0.16.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/eb5f4b57-6f3a-4848-fa6f-7c69e9b4b332.png">



##part7
Cellを選択した状態で，`contrl`キーを押しながら先ほど置いた`UIViewController`にドラッグ・ドロップする．
`Show`を選択する．

<img width="582" alt="スクリーンショット 2019-11-20 午前0.16.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/44aa232d-163c-0707-67c1-cee09b942260.png">



##part8
画面を分割し，`Main.storyboard`で`Table View`を選択する．

<img width="542" alt="スクリーンショット 2019-11-20 午後9.29.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/3785b19d-8448-5ba8-7e24-dea355a945a8.png">



##part9
`contrl`キーを押しながらドラッグ・ドロップで，コードと接続する．

<img width="690" alt="スクリーンショット 2019-11-20 午後9.28.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/0fcf0e1e-348b-779c-0c0d-5ae44c6d3888.png">



##part10
- `FirstViewController`クラスに`UITableViewDataSource, UITableViewDelegate`の2つを批准させる．
- `viewDidLoad()`メソッドに`namesTableView.delegate = self`，`namesTableView.dataSource = self`の2つを追加する．
- `tableView(_:numberOfRowsInSection:)`メソッドを追加する．
- `tableView(_:cellForRowAt:)`メソッドを追加する．

下が追加後のコード

```swift
import UIKit

//↓↓↓↓↓デリゲートを追加
class FirstViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet weak var namesTableView: UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //↓↓↓↓↓追加
        namesTableView.delegate = self
        namesTableView.dataSource = self
    }
    
    //↓↓↓↓↓追加
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    //↓↓↓↓↓追加
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "nameCell", for: indexPath)
        cell.textLabel?.text = "Test"
        return cell
    }
}
```



##part11
ビルドしてTableViewが使えたらOK．