TableViewセルの作り方 その２（Xib）

###環境
Xcode 12.2
###1.Xibファイルの作成
 - Project navigatorでNew File...

![スクリーンショット 2020-12-05 15.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/2dcbe459-220d-c5e7-fea1-9e833e69b768.png)

 - User InterfaceのViewを選択してNext　→　Xib名を入力してCreate
 
![スクリーンショット 2020-12-05 15.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/96ad3cde-f52a-c8b7-0bfb-7a28405f1312.png)

###2.TableViewCellの作成

 - デフォルトのViewを消す（選択してdelete)

![スクリーンショット 2020-12-05 15.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/65fcd525-13fc-1169-eb47-a79319207c03.png)

 - （＋）をクリックしてLibraryからTableViewCellを選択しXibファイルにドラッグアンドドロップ

![スクリーンショット 2020-12-05 15.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/78b6a63b-18ab-0f07-26f4-0cb0cf58c821.png)

 - できたセル
![スクリーンショット 2020-12-05 16.04.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/792c267b-da6f-c90c-f54e-0c42eb57603d.png)

 - UIパーツを配置して、レイアウトの制約を追加する

###3. UITableViewCell クラスの作成

仮にSecondTableViewCellというUITableViewCell クラスにした場合

```SecondTableViewCell.swift
class SecondTableViewCell :UITableViewCell{
  
  override func awakeFromNib() {
    super.awakeFromNib()
  }
  
  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    
  }
```

###4. XibとUITableViewClassの紐付け

 - 使用するUITableViewCellクラスの設定

![スクリーンショット 2020-12-05 23.15.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/2cf78ff3-0637-499c-3d7c-08f8ebe68427.png)

###5. CellIdの設定

![スクリーンショット 2020-12-05 22.53.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/246c4c4e-adb0-5c4f-8ba6-8481db730304.png)

後でTableViewに登録する際に使う

###6. UIをUITableViewCellクラスに紐付ける（ついでにUIのプロパティーも変更）

```SecondTableViewCell.swift
class SecondTableViewCell :UITableViewCell{

  //★★★UIとの接続
  @IBOutlet weak var cellImageView: UIImageView!
  @IBOutlet weak var textView: UITextView!

  override func awakeFromNib() {
    super.awakeFromNib()

    //CellのUIのプロパティー変更
    cellImageView.layer.cornerRadius = 25
  }
  
  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
  }
}

```

###7. TableViewへのセルの登録

viewDidLoad内などに記述

```swift

private let cellId = "cellId"
  
  @IBOutlet weak var secondTableView: UITableView!

  override func viewDidLoad() {
    super.viewDidLoad()

    //セルの登録（Xibファイル名:SecondViewTableViewCell.xibの場合)
    secondTableView.register(UINib(nibName: "SecondViewTableViewCell", bundle: nil), forCellReuseIdentifier: cellId)

  }
}

```

###出来上がり

![スクリーンショット 2020-12-06 0.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918084/02e284d5-bc9c-acab-a151-b954120724aa.png)

###全コード

```SecondTableViewCell.swift
import UIKit

class SecondTableViewCell :UITableViewCell{
  
  //cellIdを決めて格納
  private let cellId = "cellId"
  
  //★★★UIとの接続
  @IBOutlet weak var cellImageView: UIImageView!
  @IBOutlet weak var textView: UITextView!

  override func awakeFromNib() {
    super.awakeFromNib()
    
    //CellのUIのプロパティー変更
    cellImageView.layer.cornerRadius = 25
    
  }
  
  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    
  }
}
```


```SecondViewController.swift
import UIKit

class SecondViewController : UIViewController{
  
  
  private let cellId = "cellId"
  
  @IBOutlet weak var secondTableView: UITableView!
  override func viewDidLoad() {
    super.viewDidLoad()
    
    secondTableView.delegate = self
    secondTableView.dataSource = self
    
    //セルの登録（Xibファイル名:SecondViewTableViewCell.xibの場合)
    secondTableView.register(UINib(nibName: "SecondViewTableViewCell", bundle: nil), forCellReuseIdentifier: cellId)
  }
}

extension SecondViewController :UITableViewDelegate,UITableViewDataSource{
  
  //セルの高さを指定
  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
  }
  //セルの個数
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }
  //セルの内容
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = secondTableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath)
    cell.backgroundColor = .lightText
    
    return cell
  }
}
```

###最後に
私の理解が間違っていたらご指摘いただければ幸いです。