UITableViewをViewControllerへ実装する
ストーリーボードでViewControllerにUITableViewを配置する
メリットとしては、UITableViewControllerは1つのテーブル固定ですが、UITableView単体で使えば一つのViewControllerの中で複数のテーブルを実装することができたりします。 実装方法については色々とありますがここでは一番基本的な実装を解説しています。
※ プロジェクトを新規作成した時点から実装を開始しています。プロジェクトの新規作成は「Xcode プロジェクトの新規作成」で説明していますので参照してください。
※ UIViewControllerではなくUITableViewControllerを実装する場合は「ストーリーボードでUITableViewControllerを設置してリスト表示する」を参考にしてください。
UITableViewを配置する
まずはストーリーボード選択して表示します。
Xcodeの右上にある「+」ボタンをクリクして、表示されるUIKitのパーツ一覧より、TableViewを選択してストーリーボードにcontrolを押しながらドラッグ&ドロップします。
ドラッグ&ドロップした直後は、以下の画像のように小さなTable Viewが配置されます。
UITableViewを画面にフィットさせる
配置直後では少しサイズが小さいため、iPhoneの画面にフィットさせるように、設定していきます。 全画面に表示されるようにしたいので、Table Viewをクリックして、画面右下にあるボタン(画像の②の部分)をクリックします。
そうしたら、上下左右の余白をすべてゼロになるようにします。画像のように表示されている上下左右の部分をすべて0と入力しましょう。
ここまで出来たら、「Add 4 Constraints」をクリックして適用します。
「Add 4 Constraints」をクリックすると、すぐにTableViewはサイズがストーリーボードに見えている画面にフィットします。
この設定をしておくと、どの端末でアプリを起動しても、サイズが調節されてレイアウトが崩れることなく表示することができます。
UITableViewをUIViewControllerのソースコードと関連付ける
ストーリーボードでテーブルビューが設置できたところで、何も処理はされないのでViewControllerのソースコード(ViewController.swift)とテーブルビューを関連付けて処理ができるようにします。
表示されているストーリーの右上にあるリストボタンをクリックして「Assistant」をクリックすることで、ViewControllerのコードが表示されます。
コードが表示されたら、ストーリーボードのテーブルビューの部分をcontrolキーを押しながらコードにドラッグ&ドロップしましょう。ViewControllerクラスの直下がいいでしょう。間違ってメソッドの中にドラッグ&ドロップしないようにしましょう。
ドラッグ&ドロップができるとメニューが表示されますので、「Name」の部分に「tableView」と入力して、「Connect」ボタンをクリックします。
以下の画面のように、tableViewがコード側と関連付けることができたらOKです。 これでコード側でテーブルビューに対して色々な処理を行う準備ができました。
ViewControllerを編集する
ViewControllerに設置したTableViewに簡単なデータを表示させるコードを記述します。 以下の画像にあるように、コードを書きましょう。 (画像の下にはテキストがありますので、面倒な場合は適宜コピペをしてください。)
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
let listData:[String] = ["cell_1","cell_2","cell_3","cell_4","cell_5"] // 追記
override func viewDidLoad() {
super.viewDidLoad()
tableView.delegate = self
tableView.dataSource = self
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return listData.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell.init(style: .default, reuseIdentifier: "cell")
// Configure the cell...
cell.textLabel?.text = listData[indexPath.row]
return cell
}
}
アプリを実行してみる
ここまでできたらXcodeの「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。
いかがでしょうか。うまく実装することができましたでしょうか。
実はこのアプリの実行結果は「ストーリーボードでUITableViewControllerを設置してリスト表示する」で実装したものと同様の結果を表現しています。 UITableViewの実装を覚えてしまえばUITableViewControllerよりもよく利用できるものとなります。ぜひ基本的な実装を押さえておきましょう。
UITableViewの基本的な実装方法は以上です。