ストーリーボードでUITableViewControllerを設置してリスト表示する
テーブルビューコントローラーを作る
UIKitの標準でテーブルビューが用意されているので、アプリの中でリスト表示するにはテーブルビューを使うのが一般的です。 構造としては、ViewControllerがベースでスクロールビュー(ScrollView)の中に、Viewがありデータの数だけ並べてくれるというセットになっています。
UITableViewControllerのswiftファイルを作成する
ストーリーボードで配置は簡単にできますが、テーブルビューへのデータ展開はソースコードで書く必要がありますので、まずはTableViewController.swiftのファイルを準備します。
Xcodeのメニューから「File」を選択し、「New」から「File」を選択しましょう。
次に、新規作成するファイルの形式を選択するメニューが表示されるので、「Cocoa Touch Class」を選択して「Next」をクリックします。
クラスは「TableViewController」と入力し、「Subclass of」の部分で、UITableViewControllerを選択します。「Next」をクリックしましょう。
特に指定がなければそのまま「Create」をクリックしてファイルを生成します。
生成されるとXcodeでTableViewController.swiftの内容が表示されます。
とりあえず、ファイルの新規作成は以上です。続いてストーリーボードで画面を配置していきます。
ストーリーボードでテーブルビューコントローラーを配置する
ストーリーボードでのテーブルビューコントローラーの配置は簡単です。 Main.storyboardを選択してから、右上にある「+」をクリックして、UIKitのメニューを表示させます。
検索フォームで「Tab」と検索するとすぐに見つかりますが「Table View Controller」をストーリーボードにドラッグ&ドロップしましょう。
ドラッグ&ドロップすると、ストーリーボードでTableViewControllerの画面が配置されます。
テーブルビューコントローラーを起動時の画面にする
このままでは、アプリを実行しても画面の遷移がないので画面には何も表示されません。 ここでは、テーブルビューコントローラーが最初の画面になるように、インスペクタで「Is Initial View」、起動したときの最初の画面として設定しておきます。
以下の画像のようにTableViewControllerの部分に矢印が付くようにします。
アプリを実行して表示を確認する
ここまで実装できたら、アプリを実行してみます。 最初に表示される画面が以下のような横線が並んだテーブルビューになっていればOKです。
簡単なデータをテーブルビューで表示してみる
次はテーブルビューにデータを展開するようにソースコードと関連づけ、リスト表示させてみます。
最初に作ったTableViewController.swiftとストーリーボードのテーブルビューコントローラーを関連付ける
ストーリーボードで配置しただけでは何も機能しませんので、ソースコードと関連づけて、データをテーブルビューに展開できるように実装をしていきます。 まずは、ストーリーボードでテーブルビューコントローラーを最初に新規作成したTableViewController.swiftと関連付けます。
画像のように順番にクリックしていき、インスペクタで「Custom Class」の項目の「Class」に「TableViewController」と入力します。選択肢で出てくると思いますので選択すれば大丈夫です。
テーブルの中のセルについても設定する
ソースコードとの接続が出来たら、次はテーブルビューに使われるセルについての定義をしておきます。 画像のようにセルのIdentifierを「cell」にしておきましょう。特に保存ボタンはないので記述だけしておけば大丈夫です。
ソースコードで、プログラムを書く(データを用意する)
今回は簡単なデータの展開として、5つのデータ「cell_1」「cell_2」「cell_3」「cell_4」「cell_5」という文字列を用意しておきます。 配列の使い方については詳しくは触れませんが以下のように、「class TableViewController」の中に書きます。
let listData:[String] = ["cell_1","cell_2","cell_3","cell_4","cell_5"]
テーブルビューに表示するために必要なコードを書く
まずは、使用するメソッドを使える状態にするためコメント解除します。
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCellというメソッドはセルに対してデータを返す(展開する)ために必要なメソッドですので、新規作成時にコメントされてすでに書かれていますので、コメントを解除して使える状態にしましょう。
次は、以下の画像のようにソースコードを編集します。
コードはこのようになります。
import UIKit
class TableViewController: UITableViewController {
let listData:[String] = ["cell_1","cell_2","cell_3","cell_4","cell_5"] // 追記
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return listData.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
// Configure the cell...
cell.textLabel?.text = listData[indexPath.row]
return cell
}
... 以下略
アプリを実行してみる
ここまでできたらXcodeの「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。listDataの配列を基にテーブルビューにデータを展開することができました。
UITableViewControllerとTableViewの違い
よく、テーブルビューコントローラーとテーブルビューが同じような勘違いをしてしまいがちですが、簡単な違いは
- テーブルビューコントローラーはViewControllerの画面として1セットになったパッケージで実装が簡単
- テーブルビューは、UIKitの基本パーツで、どこでも配置できる。しかし色々とコードを書く必要がある
です。
テーブルビューコントローラーは特に何もしなくても今回のように簡単にデータの展開ができましたが、テーブルビューは予め簡単に使えるようになっていないので、ある程度コードを記述する必要があります。テーブルビューは別で解説していますので、参照してください。