ストーリーボードでUITableViewControllerを設置してリスト表示する

[UIKit] [Stroryboard] [UITableViewController]

テーブルビューコントローラーを作る

UIKitの標準でテーブルビューが用意されているので、アプリの中でリスト表示するにはテーブルビューを使うのが一般的です。 構造としては、ViewControllerがベースでスクロールビュー(ScrollView)の中に、Viewがありデータの数だけ並べてくれるというセットになっています。

UITableViewControllerのswiftファイルを作成する

ストーリーボードで配置は簡単にできますが、テーブルビューへのデータ展開はソースコードで書く必要がありますので、まずはTableViewController.swiftのファイルを準備します。

Xcodeのメニューから「File」を選択し、「New」から「File」を選択しましょう。

/data/uploads/20200430015051.png

次に、新規作成するファイルの形式を選択するメニューが表示されるので、「Cocoa Touch Class」を選択して「Next」をクリックします。

/data/uploads/20200429132825.png

クラスは「TableViewController」と入力し、「Subclass of」の部分で、UITableViewControllerを選択します。「Next」をクリックしましょう。

/data/uploads/20200429134102.png

特に指定がなければそのまま「Create」をクリックしてファイルを生成します。

/data/uploads/20200429134116.png

生成されるとXcodeでTableViewController.swiftの内容が表示されます。

/data/uploads/20200430024149.png

とりあえず、ファイルの新規作成は以上です。続いてストーリーボードで画面を配置していきます。

ストーリーボードでテーブルビューコントローラーを配置する

ストーリーボードでのテーブルビューコントローラーの配置は簡単です。 Main.storyboardを選択してから、右上にある「+」をクリックして、UIKitのメニューを表示させます。

/data/uploads/20200429134209.png

検索フォームで「Tab」と検索するとすぐに見つかりますが「Table View Controller」をストーリーボードにドラッグ&ドロップしましょう。

/data/uploads/20200429134229.png

ドラッグ&ドロップすると、ストーリーボードでTableViewControllerの画面が配置されます。

テーブルビューコントローラーを起動時の画面にする

このままでは、アプリを実行しても画面の遷移がないので画面には何も表示されません。 ここでは、テーブルビューコントローラーが最初の画面になるように、インスペクタで「Is Initial View」、起動したときの最初の画面として設定しておきます。

以下の画像のようにTableViewControllerの部分に矢印が付くようにします。

/data/uploads/20200429134500.png

アプリを実行して表示を確認する

ここまで実装できたら、アプリを実行してみます。 最初に表示される画面が以下のような横線が並んだテーブルビューになっていればOKです。

/data/uploads/20200429134316.png

簡単なデータをテーブルビューで表示してみる

次はテーブルビューにデータを展開するようにソースコードと関連づけ、リスト表示させてみます。

最初に作ったTableViewController.swiftとストーリーボードのテーブルビューコントローラーを関連付ける

ストーリーボードで配置しただけでは何も機能しませんので、ソースコードと関連づけて、データをテーブルビューに展開できるように実装をしていきます。 まずは、ストーリーボードでテーブルビューコントローラーを最初に新規作成したTableViewController.swiftと関連付けます。

画像のように順番にクリックしていき、インスペクタで「Custom Class」の項目の「Class」に「TableViewController」と入力します。選択肢で出てくると思いますので選択すれば大丈夫です。

/data/uploads/20200430021304.png

テーブルの中のセルについても設定する

ソースコードとの接続が出来たら、次はテーブルビューに使われるセルについての定義をしておきます。 画像のようにセルのIdentifierを「cell」にしておきましょう。特に保存ボタンはないので記述だけしておけば大丈夫です。

/data/uploads/20200430023512.png

ソースコードで、プログラムを書く(データを用意する)

今回は簡単なデータの展開として、5つのデータ「cell_1」「cell_2」「cell_3」「cell_4」「cell_5」という文字列を用意しておきます。 配列の使い方については詳しくは触れませんが以下のように、「class TableViewController」の中に書きます。

/data/uploads/20200430022215.png

 let listData:[String] = ["cell_1","cell_2","cell_3","cell_4","cell_5"]

テーブルビューに表示するために必要なコードを書く

まずは、使用するメソッドを使える状態にするためコメント解除します。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCellというメソッドはセルに対してデータを返す(展開する)ために必要なメソッドですので、新規作成時にコメントされてすでに書かれていますので、コメントを解除して使える状態にしましょう。

/data/uploads/20200430024346.png

次は、以下の画像のようにソースコードを編集します。

/data/uploads/20200430024058.png

コードはこのようになります。

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の配列を基にテーブルビューにデータを展開することができました。

/data/uploads/20200430024644.png

UITableViewControllerとTableViewの違い

よく、テーブルビューコントローラーとテーブルビューが同じような勘違いをしてしまいがちですが、簡単な違いは

  • テーブルビューコントローラーはViewControllerの画面として1セットになったパッケージで実装が簡単
  • テーブルビューは、UIKitの基本パーツで、どこでも配置できる。しかし色々とコードを書く必要がある

です。

テーブルビューコントローラーは特に何もしなくても今回のように簡単にデータの展開ができましたが、テーブルビューは予め簡単に使えるようになっていないので、ある程度コードを記述する必要があります。テーブルビューは別で解説していますので、参照してください。

Posted_at:2020-05-01