見出し画像

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

はい、どうも!

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


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

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

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

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


カスタムcellとは

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


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

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

スクリーンショット 2020-05-27 21.34.07

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

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


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

スクリーンショット 2020-05-27 21.36.03


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


カスタムCellを作ってみる

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

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

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

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

スクリーンショット 2020-05-27 21.38.32


そしたらまずはじめに、

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

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

スクリーンショット 2020-05-27 21.43.59

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


そして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を使っていきましょう!


さいごに

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

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

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

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

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

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


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

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

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



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


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

この記事が気に入ったらサポートをしてみませんか?