【iOS開発】カスタムセルを使用したTable View(テーブルビュー)の使い方【iphoneアプリ・swift】

iphoneアプリ開発で頻繁に使用されるTable View。

メディアサイトの記事一覧ページ等で、同じカード型レイアウトの繰り返しに使われるUIコンポーネントです。

自分への備忘録として、カスタムセルを使用したテーブルレイアウトの使い方を紹介します。

Table Viewを作成する

table Viewを使用するために、まずはUI パーツから

  • Table View Controller
  • Table View

のどちらかをstoryboardに配置します。

配置したControllerのswiftファイルのclass宣言部分を

に変更して、UITableViewControllerを使用できるようにします。

これで、Table Viewを使用できるようになりました。

カスタムセルを作成する

Table Viewの一つずつのセルを自由にカスタマイズするためにはカスタムセルを使用します。

カスタムセルを作成するには、以下のように

Also Create XIB File

にチェックをした状態で、新規ファイルを作成します。作成すると、

  • TableViewCell.swift
  • TableViewCell.xib

という2ファイルが作成されます。

この2ファイルがカスタムセルという、Table Viewの各コンテンツの内容を定義するファイルになります。

カスタムセルを定義する

作成後、カスタムセルをMain.storyboardのTable Viewに紐付ける作業が必要です。

まずは、

TableViewCell.xibのIdentityに対して、任意の名前を設定します。

その後に、TableViewを配置したControllerファイルに対して、

と記載します。

上から順にソースの解説をすると、

Main.storyboardのtableViewに対して、今回作成したxibファイル(カスタムセル)を登録する記述です。

  • nibNameにファイル名
  • forCellReuseIdentifierに先程設定したxibファイルのidentityの名前

を設定します。

これで、Main.storyboardのtableViewと今回作成したカスタムセルが繋がりました。

この部分はtable viewの記述で、それぞれ

  • 2つ(適当)セルを表示する
  • セルの内容を編集

しているメソッドです。

最後のこのメソッドはカスタムセルの高さを調整しています。(なくても大丈夫です。)

この状態でアプリをビルドすると、以下のように空のセルが2つ表示されるアプリが作成されます。

カスタムセルの中身を編集する

Table Viewとカスタムセルが紐付いたので、カスタムセルの中身を編集しましょう。

Main.storyboardのUIパーツを配置して、Controllerと関連付けすることが可能です。

この画像は、Labelコンポーネントを配置して、TableViewCell.swiftに関連付けした(control + ドラッグアンドドロップ)した状態です。

ここで指定したアウトレット名に対して、Table View側のコントローラーから値を代入することで、カスタムセルの中身を編集します。

TableViewCell.swift

TableViewControllerのcellを編集するメソッド内

このように変更すると、TableViewControllerから紐付いているカスタムセルのtitleTextに文言が代入されます。

そして、この状態でビルドすると、

カスタムセルが編集された状態でアプリが表示されます。

これで、カスタムセルを使用したTable Viewの完成です!

あとは、好きなように、カスタムセルをレイアウトし、TableViewControllerから値を渡してやりましょう!!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。