TableViewの基本　備忘録

##目的
TableViewを使用するときに毎回検索しているため、一通りの流れとしてメモを残す

##環境
Xcode12.1
Swift5

##流れ
・Main.storyboadの設定
・TableViewのコードを記述
・TableViewCellの作成
・TableViewCellのコードを記述
・Assetsに画像を設定
・実行


##Main.storyboadの設定

Main.storyboadにあるViewControllerにTableViewを設定します。

Xcodeの右上にある＋ボタンからTableViewを検索し、ViewControllerにドラッグします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/491aa30a-8f46-da10-6364-08d1e2740daa.png" width=500px>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/b5139372-78da-be4e-0b70-b643d82b8127.png" width=500px>

右下のAdd New Constraintsから制約を設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/61d03fc4-3516-a6a3-715e-115a3613ab86.png" width=500px>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/bc76e93d-1623-c086-b988-306f2b3e6f9c.png" width=500px>


アシスタントエディタを開きます。
キーボードのをCmd、Opt、Ctr、Enterを同時に押し、アシスタントエディタを開きます。

stroyboadのTableViewをCtrを押しながら、エディタにドラッグし、outletを設定します。
変数名はtableViewとしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/528bc2ae-9b0f-6367-0bb0-7ff361ce5b0a.png" width=500px>


##TableViewのコードを記述
以下のようにコードを記述します。

tableView(_:numberOfRowsInSection:)は、セルの個数を設定し、
tableView(_:cellForRowAt:)はセルの内容を設定します。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    private let languageArray = ["Swift","Kotlin","AWS","HTML","CSS","JavaScript"]
    private let cellId = "cell"
    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        let nib = UINib(nibName: "CustomViewCell", bundle: nil)
        tableView.register(nib, forCellReuseIdentifier: cellId)
        tableView.reloadData()
    }


}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return languageArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! CustomViewCell
        cell.setLayout(languageName: languageArray[indexPath.row])
        return cell
        
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}

```
##TableViewCellの作成
XcodeのナビゲーションエリアでCmd + Nを押します。

Cocoa Touch Class を選択しNext
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/65f6905c-e217-3d3b-8855-99a208a017a8.png" width=500px>

CalssにCustomViewCell
SubClass ofにUITableViewCell
Also create XIB fileにチェックをつけてNext

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/44b324ae-33cf-dc6e-0435-b1c4de747660.png" width=500px>

保存場所はそのままでCreate
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/abea964e-fa46-ce08-c3a3-1c08417f7f26.png" width=500px>



生成されたCustomViewCell.xibを開き、ドラッグして大きさを調整します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/1a039d6d-7bee-8fa7-161d-98c1b0ced3e2.png" width=500px>

中にTextLabelやImageViewなどCellに配置する部品を配置し、コードとoutlet接続を行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/e73d2f97-f849-4a6b-be40-de007a4827fb.png" width=500px>


##TableViewCellのコードを記述
以下のようにコードを記述します。
setLayoutメソッドの中でセルのLabelとImageを設定します。

```swift:CustomViewCell.swift
import UIKit

class CustomViewCell: UITableViewCell {

    @IBOutlet weak var logoImage: UIImageView!
    @IBOutlet weak var languageName: UILabel!
        
    override func awakeFromNib() {
        super.awakeFromNib()
        logoImage.layer.cornerRadius = logoImage.frame.size.width / 2
        logoImage.contentMode = .scaleAspectFill
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    func setLayout(languageName:String){
        self.languageName.text = languageName
        self.logoImage.image =  UIImage(named: languageName)
    }
    
}
```
##Assetsに画像を設定
Assetsに使用する画像を保存します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/34b24104-866b-e086-7cba-75f418724e2a.png" width=500px>


##実行
完成です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/0a9cad40-a5a3-424b-c6b7-7b2c18a71364.png" width=350px>