UITableViewをViewControllerへ実装する

[UIKit] [UITableView]

ストーリーボードでViewControllerにUITableViewを配置する

メリットとしては、UITableViewControllerは1つのテーブル固定ですが、UITableView単体で使えば一つのViewControllerの中で複数のテーブルを実装することができたりします。 実装方法については色々とありますがここでは一番基本的な実装を解説しています。

※ プロジェクトを新規作成した時点から実装を開始しています。プロジェクトの新規作成は「Xcode プロジェクトの新規作成」で説明していますので参照してください。

※ UIViewControllerではなくUITableViewControllerを実装する場合は「ストーリーボードでUITableViewControllerを設置してリスト表示する」を参考にしてください。

UITableViewを配置する

まずはストーリーボード選択して表示します。

/data/uploads/20200501135243.png

Xcodeの右上にある「+」ボタンをクリクして、表示されるUIKitのパーツ一覧より、TableViewを選択してストーリーボードにcontrolを押しながらドラッグ&ドロップします。

/data/uploads/20200501135346.png

ドラッグ&ドロップした直後は、以下の画像のように小さなTable Viewが配置されます。

/data/uploads/20200501135404.png

UITableViewを画面にフィットさせる

配置直後では少しサイズが小さいため、iPhoneの画面にフィットさせるように、設定していきます。 全画面に表示されるようにしたいので、Table Viewをクリックして、画面右下にあるボタン(画像の②の部分)をクリックします。

そうしたら、上下左右の余白をすべてゼロになるようにします。画像のように表示されている上下左右の部分をすべて0と入力しましょう。

ここまで出来たら、「Add 4 Constraints」をクリックして適用します。

/data/uploads/20200501142215.png

「Add 4 Constraints」をクリックすると、すぐにTableViewはサイズがストーリーボードに見えている画面にフィットします。

/data/uploads/20200501135606.png

この設定をしておくと、どの端末でアプリを起動しても、サイズが調節されてレイアウトが崩れることなく表示することができます。

UITableViewをUIViewControllerのソースコードと関連付ける

ストーリーボードでテーブルビューが設置できたところで、何も処理はされないのでViewControllerのソースコード(ViewController.swift)とテーブルビューを関連付けて処理ができるようにします。

表示されているストーリーの右上にあるリストボタンをクリックして「Assistant」をクリックすることで、ViewControllerのコードが表示されます。

/data/uploads/20200501135705.png

コードが表示されたら、ストーリーボードのテーブルビューの部分をcontrolキーを押しながらコードにドラッグ&ドロップしましょう。ViewControllerクラスの直下がいいでしょう。間違ってメソッドの中にドラッグ&ドロップしないようにしましょう。

/data/uploads/20200501140238.png

ドラッグ&ドロップができるとメニューが表示されますので、「Name」の部分に「tableView」と入力して、「Connect」ボタンをクリックします。

/data/uploads/20200501140049.png

以下の画面のように、tableViewがコード側と関連付けることができたらOKです。 これでコード側でテーブルビューに対して色々な処理を行う準備ができました。

/data/uploads/20200501140120.png

ViewControllerを編集する

ViewControllerに設置したTableViewに簡単なデータを表示させるコードを記述します。 以下の画像にあるように、コードを書きましょう。 (画像の下にはテキストがありますので、面倒な場合は適宜コピペをしてください。)

/data/uploads/20200501140909.png

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の「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。

/data/uploads/20200430024644.png

いかがでしょうか。うまく実装することができましたでしょうか。

実はこのアプリの実行結果は「ストーリーボードでUITableViewControllerを設置してリスト表示する」で実装したものと同様の結果を表現しています。 UITableViewの実装を覚えてしまえばUITableViewControllerよりもよく利用できるものとなります。ぜひ基本的な実装を押さえておきましょう。

UITableViewの基本的な実装方法は以上です。

Posted_at:2020-05-01