【Swift】【初心者用】TableViewのカスタム Cellを作ってみる

はい、どうも！

フリーランスエンジニアの南だいすけです！

今回は前回やったSwiftのTableViewに

カスタムCellを乗っけてみたいと思います！

やっぱりTableViewといったらカスタムCellといった感じで、

非常に大切ですし、よく使うので一緒に勉強していきましょう！

カスタムcellとは

TableViewのCellの部分を独自で作ってはめていく感じです！

こちらは私の作ったアプリなのですが、

作り方によってはTableViewでもこんな感じの画面が作れます。

SNSなどでよくあるタイムラインの画面ですね。

これも一個のCellを使いまわしているわけです！

Cell自体はこんな感じです。

というわけで早速作ってみましょう！

カスタムCellを作ってみる

まずは新しいファイルを作り、Cocoa Touch Classを選択します。

以下の画面になるので、UITableViewCellを選びましょう。

ここでAlso create XBI fileにもチェックをつけるのがポイントです！

（チェックすることで、〜.swiftファイルと一緒に、XIBも作ってくれます）

そしたらまずはじめに、

下画像でいう赤く表示されているTimeLineCellをクリックし、

右側にあるIdentifierを設定します。（私はTimeLineCellとしています）

あとは画像のように部品を置いていきましょう。

そしてOutletを繋ぎ、コードを書いていきます。

import UIKit

class TimeLineCell: UITableViewCell {

   @IBOutlet weak var userIcon: UIImageView!
   @IBOutlet weak var nickName: UILabel!
   @IBOutlet weak var postTime: UILabel!
   @IBOutlet weak var contents: UILabel!
   @IBOutlet weak var refrigeratorImage: UIImageView!
   
   override func awakeFromNib() {
       super.awakeFromNib()
   }

   override func setSelected(_ selected: Bool, animated: Bool) {
       super.setSelected(selected, animated: animated)
   }

   func setCell(imageName: String, name: String, time: String, contents: String, refrigerator: String) {
       self.userIcon.image = UIImage(named: imageName)
       self.userIcon.layer.cornerRadius = 35.0
       self.nickName.text = name
       self.nickName.textColor = Color.Palette.bwDark80
       self.nickName.font = Font.bold15
       self.postTime.text = time
       self.postTime.textColor = Color.Palette.bwDark20
       self.postTime.font = Font.regular10
       self.contents.text = contents
       self.contents.textColor = Color.Palette.bwDark80
       self.contents.font = Font.bold15
       self.refrigeratorImage.image = UIImage(named: refrigerator)
   }
}

一旦これでカスタムCellの方は完成です！

次にこれを使っていきます。

カスタムCellを使ってみる

import UIKit

class TimeLineViewController:  UIViewController{

   let timeLineViewModel: TimeLineViewModel = TimeLineViewModel()
   
   let icon = "Image"               // ここはAssetに画像を追加したときの名前です
   let name = "ちゃちゃ"
   let time = "23:34"
   let contents = "冷蔵庫ってすごいなぁ\nこれで魚を美味しく保存できる"
   let refrigerator = "Image-1"    // ここはAssetに画像を追加したときの名前です
   
   @IBOutlet private weak var tableView: UITableView!

   override func viewDidLoad() {
       super.viewDidLoad()
       tableView.delegate = self
       tableView.dataSource = self

       tableView.tableFooterView = UIView(frame: .zero)

       // ①
       tableView.register(UINib(nibName: "TimeLineCell", bundle: nil), forCellReuseIdentifier: "TimeLineCell")
   }
}

extension TimeLineViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return 3
   }
   
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       // ②
       let cell: TimeLineCell = tableView.dequeueReusableCell(withIdentifier: "TimeLineCell") as! TimeLineCell
       cell.setCell(imageName: icon, 
                    name: name, 
                    time: time, 
                    contents: contents, 
                    refrigerator: refrigerator)
       return cell
   }
}

具体的に説明していきます。

まず①でCellを使えるように登録しています。

次に②でCellを生成しています。

ここの””が先ほどIdentifierで登録したものを当てはめる感じです。

思ったよりも簡単でしたね！

カスタムCellは単純にみやすいですし、

別画面でも使うことができるので、汎用性が上がります。

これからはどんどんカスタムCellを使っていきましょう！

さいごに

プログラミングって難しいですよね。。

僕も文系大学を出て、全くの未経験からスタートしたので

気持ちは痛いほどよくわかります。。！

少しずつ勉強していけば知識が蓄積され、

いつかはそれが線として繋がる日が絶対きます！！

一緒にがんばっていきましょう！

この記事で少しでも初心者の方が、

「お！そういうことか！」とか「ちょっとわかったぞ！！」

っとなっていただけたら幸いです。

最後まで見ていただきありがとうございました！

ではまた次の記事でお会いしましょう！