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

この記事からわかること
- SwiftのUIKitでリストを実装する方法
- UITableViewCellとは?
- カスタマイズできるセルの作り方
index
[open]
\ アプリをリリースしました /
SwiftのUIKitでUITableViewを使ったリスト表示をする際にカスタマイズできるセルの作成方法をまとめていきます。UITableViewの基本的な使用方法はこの記事では解説しませんので、以下の記事を参考にしてください。
カスタムセルの作成の流れ
一番最初に今回の目的と流れを整理しておきます。
目的
自分でUI部品を配置できるセルの構築

流れ
- UITableViewCellクラスの生成
- StoryboardからTable Viewの追加
- Table Viewの管理クラスを設定
- Table Viewの設定(デリゲートなど)
- StoryboardからTable View Cellの追加
- Table View Cellの管理クラスを設定
- Table View CellのIdentifierを設定
- Table View Cellをカスタマイズ
- UI部品の@IBOutletを作成
- カスタマイズTableViewCellクラスの呼び出し
1.UITableViewCellクラスの生成
カスタマイズできるセルを作成するためにはまずUITableViewCell
を継承したクラスを作成していきます。「File」>「New」>「File...」>「CoCoa Touch Class」を選択し、subclassを「UITableViewCell」にして新規ファイルを作成します。すると以下のコードがあらかじめ記述された状態のTableViewCell
クラスが出来上がります。
awakeFromNibメソッド
作成したTableViewCellクラスがロードされた直後に実行されるメソッド。
setSelected(_ selected: Bool, animated: Bool)メソッド
セルがタップにより選択された状態/通常の状態になった時に実行されるメソッド
2〜4.StoryboardからTable Viewの追加〜設定
ここではUITableViewでのリストビューの作成方法は省略しますので詳しくは以下記事をご覧ください。
おすすめ記事:【Swift UIKit】UITableViewの使い方!リストビューの実装方法
- Main.storyboardにTable Viewを追加
- delegateとdatasourceを紐付け
- 表示させるデータの定義
- UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成
- セルの個数とセルを生成するメソッドの定義
Main.storyboardにTable Viewを追加

delegateとdatasourceを紐付け

表示させるデータの定義
UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成 & セルの個数とセルを生成するメソッドの定義
5〜8.StoryboardからTable View Cellの追加〜設定
続いてStoryboardからTable View Cellを追加します。

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

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

Table View Cellをカスタマイズ
最後にTable View CellにUI部品を追加しておきます。

9.UI部品の@IBOutletを作成
続いてSwiftファイル内からStoryboardに追加したUI部品を操作するために@IBOutlet
を使用して紐付けていきます。ViewController.swiftにはテーブルビュー自体をTableViewCell.swiftには追加したラベルを操作するように準備します。
以下のコードを追記したら、Storyboardに移動し以下画像のように「New Referencing Outlet」からドラッグして追加した対象の変数を選択して紐付けます。

TableViewCell側も同様に紐付けをしておきます。ついでに独自のcreate
メソッドを追加しておきます。テーブルセルのラベルに値を格納するためのイニシャライザ的な役割を持たせています。
10.カスタマイズTableViewCellクラスの呼び出し
最後にViewController.swift内でdequeueReusableCell
メソッドを使用してカスタマイズTableViewCellクラスを指定して返却するセルを構築します。

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