【Swift/iOS】UITableViewの使い方

UITableViewの使い方を超わかりやすく解説します!

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】Version 10.1
【Swift】Version 4.2.1
【macOS】High Sierra バージョン 10.13.6
【iOS】12.1.2

storyboardの設定

部品(Table View)の配置

Object Libraryより、「Table View」 をViewControllerにドラッグ&ドロップして配置します。似た名前の部品で「Table View Controller」がありますので間違えないようにして下さい。

図:TableViewの配置(画像をクリックで拡大します)

TableViewのOutletsを設定

Document OutlineのTableViewを右クリックして、表示されるダイアログから、dataSourcedelgateViewController(3つに並ぶアイコンの一番左)にドラッグ&ドロップで紐付けます。

図:TableViewのOutletsを設定(画像をクリックで拡大します)

ダイアログの中身がこのようになればOKです。

図:紐付け後のダイアログ

Outletsの紐付け手順は上の方法以外にもいくつかやり方があります。

入門書などで紹介されている方法で、ViewControllerのソースにTableViewをOutlet紐付けした後、次のようになコードを記述する例もありますが、上のやり方だとこの記述は不要です。

部品(TableViewCell)の配置

Object Libraryより「Table View Cell」をTableView部品の上にドラッグ&ドロップで配置します。

セル(Cell)はテーブルを構成するリストのを表すものですが、ここで配置するセルはあくまで雛形ですので、1つだけでOKです。

図:TableViewCellの配置(画像をクリックで拡大します)

セルに名前を付ける

配置したセルに任意の名前(Identifer)を付けます。

コードから使用する為の識別子として必要となります。

値はなんでもかまいませんが、ここでは”mycell”としました。

図:セルに名前を付ける(画像をクリックで拡大します)

storyboardでの設定は以上です。

コードの記述(ViewController.swift)

ViewController.swiftに必要な記述を追加します。 コメントに番号が振られている箇所が、追記する部分です。

①プロトコル(UITableViewDataSource, UITableViewDelegate)の追加

ViewControllerクラス宣言部に、2つのプロトコル(UITableViewDataSource, UITableViewDelegate)を追記します。

UITableViewDataSourceは、テーブルに出力するデータの操作を定義するプロトコル、UITableViewDelegateは、テーブル表示に関する操作を定義するプロトコルです。

②テーブルに表示するデータの準備

サンプルとして国名リスト(5カ国)のデータを用意します。

今回は単純なので配列でデータを保持しますが、アプリケーションよってデータの持ち方は自由に決められます。

③テーブルの行数を指定するメソッド(必須)

テーブルの行数を返すメソッドです。

配列(CountryList)に入っている全ての国名をテーブルに表示させたいので、配列の要素数(CountryList.count)を戻り値とします。

ちなみにこのメソッドは、UITableViewを使う場合は必須となりますので、無いとビルドエラーとなります。(UITableViewDataSourceプロトコルで必須メソッドとして定義されている)

④セルの中身を設定するメソッド(必須)

indexPathで指定された行のセル(Cell)を返す処理です。

手順としては、まずCellオブジェクトを取得して、次にそのセルに値を設定して返します。

セルの取得に使うdequeueReusableCellメソッドは、毎回新たにCellオブジェクトを生成するのではなく、再利用できるものがあればそれを返してくれる賢いメソッドです。

このメソッドのwithIdentifierプロパティには、先程storyboard上で任意に設定したセル名”mycell”を指定します。

こちらの記述も、UITableViewを使う場合は必須となります。

実行結果

ビルドして実行します。

配列で保持していた5つの国名が正しく表示されました。
図:実行結果

最後に

まずはTableViewを表示するところまでです。

その他の仕組みの解説は以下の記事を御覧ください、徐々に追加していく予定です。

【Swift/iOS】UITableViewのセルをタップした時のアクションを実装する
UITableViewのセルをタップした時のアクションを実装する方法を解説します。
【Swift/iOS】遷移先から戻った時にテーブルを再表示する
遷移先画面から戻った時にテーブルを再表示する方法を解説します。本記事は次のようなケースを想定しています。TableViewで構成された画面Aから画面Bを呼び出す。画面Bでリストの値を変更。画面Aに戻った時に、2で変更された値をTa...

コメント