【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

この記事からわかること

  • SwiftUIKitリスト実装する方法
  • UITableViewCellとは?
  • カスタマイズできるセル作り方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitでUITableViewを使ったリスト表示をする際にカスタマイズできるセルの作成方法をまとめていきます。UITableViewの基本的な使用方法はこの記事では解説しませんので、以下の記事を参考にしてください。

カスタムセルの作成の流れ

一番最初に今回の目的と流れを整理しておきます。

目的

自分でUI部品を配置できるセルの構築

【Swift UIKit】UITableViewの使い方!リストの作成方法

流れ

  1. UITableViewCellクラスの生成
  2. StoryboardからTable Viewの追加
  3. Table Viewの管理クラスを設定
  4. Table Viewの設定(デリゲートなど)
  5. StoryboardからTable View Cellの追加
  6. Table View Cellの管理クラスを設定
  7. Table View CellのIdentifierを設定
  8. Table View Cellをカスタマイズ
  9. UI部品の@IBOutletを作成
  10. カスタマイズTableViewCellクラスの呼び出し

1.UITableViewCellクラスの生成

カスタマイズできるセルを作成するためにはまずUITableViewCellを継承したクラスを作成していきます。「File」>「New」>「File...」>「CoCoa Touch Class」を選択し、subclassを「UITableViewCell」にして新規ファイルを作成します。すると以下のコードがあらかじめ記述された状態のTableViewCellクラスが出来上がります。


import UIKit

class TableViewCell: UITableViewCell {
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)        
        // Configure the view for the selected state
    }
}

awakeFromNibメソッド

作成したTableViewCellクラスがロードされた直後に実行されるメソッド。

setSelected(_ selected: Bool, animated: Bool)メソッド

セルがタップにより選択された状態/通常の状態になった時に実行されるメソッド

2〜4.StoryboardからTable Viewの追加〜設定

ここではUITableViewでのリストビューの作成方法は省略しますので詳しくは以下記事をご覧ください。

おすすめ記事:【Swift UIKit】UITableViewの使い方!リストビューの実装方法

  1. Main.storyboardにTable Viewを追加
  2. delegateとdatasourceを紐付け
  3. 表示させるデータの定義
  4. UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成
  5. セルの個数とセルを生成するメソッドの定義

Main.storyboardにTable Viewを追加

【Swift UIKit】UITableViewの使い方!リストの作成方法

delegateとdatasourceを紐付け

【Swift UIKit】UITableViewの使い方!リストの作成方法

表示させるデータの定義


import UIKit
struct UserModels {
    var name:String
    var age:Int
}

#if DEBUG
extension UserModels{
    static var sampleData = [
        UserModels(name: "John", age: 20),
        UserModels(name: "Michael", age: 15),
        UserModels(name: "Stephanie", age: 69),
        UserModels(name: "Lloyd", age: 27),
        UserModels(name: "Theodore", age: 42),
        UserModels(name: "Bagwell", age: 30),
    ]
}
#endif

UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成 & セルの個数とセルを生成するメソッドの定義


class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let userData = UserModels.sampleData

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    // セルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.userData.count;
    }

    // セルの生成
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      // 後述します
    }
}

5〜8.StoryboardからTable View Cellの追加〜設定

続いてStoryboardからTable View Cellを追加します。

【Swift UIKit】UITableViewの使い方!リストの作成方法

Table View Cellの管理クラスを設定

追加したTable View Cellを管理するクラスを記述します。インスペクタの以下の場所に定義したクラス名を入力します。

【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

Table View CellのIdentifierを設定

作成したTable View Cellを識別するための識別子(Identifier)を設定します。識別子は何でも良いですがクラス名と同じものにしておきます。

【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

Table View Cellをカスタマイズ

最後にTable View CellにUI部品を追加しておきます。

【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

9.UI部品の@IBOutletを作成

続いてSwiftファイル内からStoryboardに追加したUI部品を操作するために@IBOutletを使用して紐付けていきます。ViewController.swiftにはテーブルビュー自体をTableViewCell.swiftには追加したラベルを操作するように準備します。

以下のコードを追記したら、Storyboardに移動し以下画像のように「New Referencing Outlet」からドラッグして追加した対象の変数を選択して紐付けます。


class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let userData = UserModels.sampleData
    @IBOutlet  private weak var tableView: UITableView!
    // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
}
【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

TableViewCell側も同様に紐付けをしておきます。ついでに独自のcreateメソッドを追加しておきます。テーブルセルのラベルに値を格納するためのイニシャライザ的な役割を持たせています。


class TableViewCell: UITableViewCell {

    @IBOutlet  private weak var nameLabel: UILabel!
    @IBOutlet  private weak var ageLabel: UILabel!
    // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
    func create(name: String, age: Int) {
        nameLabel.text = name
        ageLabel.text = String(age)
    }
}

10.カスタマイズTableViewCellクラスの呼び出し

最後にViewController.swift内でdequeueReusableCellメソッドを使用してカスタマイズTableViewCellクラスを指定して返却するセルを構築します。


// セルの生成
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
    cell.create(name: self.userData[indexPath.row].name, age: self.userData[indexPath.row].age )
    cell.textLabel!.font = .systemFont(ofSize: 20)
    return cell
}
【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index