クイズアプリ開発入門書を書きました。

【Swift5/Xcode】カスタムセルを使用したTable View(テーブルビュー)の使い方〜初心者にわかりやすく解説〜

サトリク

今回は、カスタムセルを使ったテーブルビューの使い方について解説していきたいと思います。

ネットで調べてもなかなか良い記事がなかったので、ここでは初心者に向けてしっかりと解説していきたいと思います。

カスタムセルとは?

簡単に言うとセルだけのファイルを作って、それをテーブルに載せる。というのがカスタムセルです。

少し複雑なセルを作るときは、このカスタムセルを使いましょう。

例えば、このように画像とかあるセルはカスタムセルで作った方がいいと思います。

サトリク

そもそも、テーブルビューの使い方がわからないよと言う方はまずこちらの記事を見てください。

【Swift/Xcode超入門】リストを使ったアプリを作ってみよう

 

動作環境

Item Version
Swift 5.3.1
Xcode 12.2
Interface Storyboard

バージョンの確認方法

 

実装の仕方を簡単に解説

作ったことあるけど、やり方忘れちゃったという方のために簡単に解説します。

TableViewを配置して紐付ける

②「subclass」をUITableViewCellにして、「Also create XIB file」にチェック入れてセルだけのクラスとボードを作成

ViewDidLoadに以下のコードを記述

tableView.register(UINib(nibName: "MainTableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")

MainTableViewはTableCellクラスの名前

func tableViewのUITableViewCellに以下のコードを記述

let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! MainTableViewCell

※MainTableViewはTableCellクラスの名前

ざっと簡単に説明するとこんな感じです。これだけでカスタムセルが作れます。

では、初心者でもわかるように細かく解説していきたいと思います。

 

実際に作ってみる

まずはプロジェクトを新しく作ってカスタムセルを実装してみましょう。

STEP.1
プロジェクト作成

「Create a new Xcode Project」>「App」>InterfaceはStorybaordを選んで「Create」

STEP.2
TableViewを配置

①TableViewを配置

②TableViewを広げる

STEP.3
TableViewのdataSourceとdelegate

delegatedataSourceを紐付けます。

①TableViewで右クリック

dataSourceのまるぽちをView Contollerにドラッグ&ドロップ

 

同じようにdelegagteもドラッグ&ドロップしてください。

STEP.4
TableViewを紐付け

TableViewをtableViewという名前で紐づけます。

STEP.5
セルのファイルを作成

メニューバーのFile > New > File…をクリックしてください。

 

「Cocoa Touch Class」を選択して、「Next」をクリックしてください。

 

①「Subclass of:」を「UITableViewCell」に変更

②「Class」にMainTableViewCellと入力

③「Also create XIB file」にチェックを入れる←重要!

でNextをクリック

 

そのまま何もせずにCreateをクリック

 

そうすると、このようにMainTableViewCell.swiftMainTableViewCell.xibが作られます。

STEP.6
セルにオブジェクトを追加

MainTableViewCell.xibを選択

ImageViewを配置

Labelを配置

STEP.7
紐付け

command + option + control + enterで2分割する

Imageをimgという名前で、Lalbelをlabelという名前で紐づける

STEP.8
TableViewを使えるようにする

Class ViewController: UIView~~~を以下のように書き換えましょう。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

この時点ではエラーが出ています。

STEP.9
TableViewを使う上で必要なコード

以下のようにするとエラーを自動で解消してくれます。

①まるぽちをクリック

②Fixをクリック

 

そうするとこのように自動で作られます。

しかし、@IBOutletoverride funcの上にあるのはちょっと不自然なので、以下のようにコピペで下に移動させましょう。

STEP.10
セルの数を設定

TableViewを使うには、まずセルの数を決めなければなりません。

一つ目のfuncに以下のように追記しましょう。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}

STEP.11
セルを登録

override func viewDidLaodを以下のように書き換えましょう。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    tableView.register(UINib(nibName: "MainTableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")
}

ここでMainTableViewCellを登録してるイメージです。

STEP.12
セルをテーブルに表示させる

先ほど登録したセルをテーブルに表示させましょう。

2つ目のfunc tableViewを以下のように書き換えてください。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! MainTableViewCell
    return cell
}

これで表示できました!

STEP.13
実行

command + rで実行してみましょう。

このように10個Labelというセルが表示されると思います。

画像に何も設定していないし、Labelにも何も設定していないのでこんな感じになります。

STEP.14
ImageとLabelに代入

2つ目のfunc tableViewを以下のように書き換えてください。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! MainTableViewCell
    cell.img.image = UIImage(systemName: "swift")
    cell.label.text = "Swift"
    return cell
}

cell.img.image = UIImage(systemName: "swift")でimageViewにswiftのアイコンを表示させています。

cell.label.text = "Swift"でLabelにSwiftという文字を表示させています。

STEP.14
実行

command + rで実行してみましょう。

このようになるはずです!

これでカスタムセルを使ったテーブルビューが完成しました!

STEP.15
MainTableViewCelld.swiftで記述

初心者の方だと少し意味わかんなくなってしまうかもしれませんが、

ViewController.swiftではなく、MainTableViewCell.swiftに書いても同じように表示させることができます。

MainTaleViewCell.swiftawaleFromNib()に以下のように追記してください。

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    img.image = UIImage(systemName: "swift")
    label.text = "Swift"
}

これで実行してみても同じ結果になるはずです!

ViewController.swiftに書いてしまうと、ViewController.swiftのコードが長くなって読みづらくなってしまいます。

なので、なるべくMainTableViewCell.swiftに書いた方がいいと思います。

完了

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        tableView.register(UINib(nibName: "MainTableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! MainTableViewCell
        cell.img.image = UIImage(systemName: "swift")
        cell.label.text = "Swift"
        return cell
    }
}

 

MainTableViewCell.swift

import UIKit

class MainTableViewCell: UITableViewCell {
    @IBOutlet weak var img: UIImageView!
    @IBOutlet weak var label: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        img.image = UIImage(systemName: "swift")
        label.text = "Swift"
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
        // Configure the view for the selected state
    }
    
}

 

まとめ

ここまでカスタムセルについて解説してきました。

もし、エラーでできなかったら教えてください。改善します。

 

サトリク

独学でアプリ開発は厳しくないですか?

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

アプリリリースまで全力でサポートします。

気軽にご相談ください!

詳細はこちら

 

他にもアプリ開発についての記事を書いていますので、よかったら読んでみてください。