【Swift】UITableViewControllerを使って、チャットアプリにトークルームを追加する

はじめに

この記事で学べること

• UITableViewControllerの簡単な使い方
• NavigationControllrの簡単な使い方

1. NavigationControllerの追加

新しいUIを追加する。
Navigation Controllerを検索して、ドラッグ&ドロップで追加する

2. セグエを変更して、画面遷移の流れを変更する

下記の図のようにドラッグ&ドロップして、結びつけを変更します。

Entry Pointのセグエを変更して、起動時の初期画面を変更します。

3. 新しい画面用のSwiftファイルを作成する。

TalkRoomViewControllerクラスを作成する。

TalkRoomViewController.swift

import Foundation
import UIKit

class TalkRoomViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

}

4. StoryboardのViewControllerとクラスを紐付ける

5. Cellの作成をする。

Cellの数を指定する。

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

Cellを作成し、タイトルを設定する。

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = "Room1"
        return cell
    }

6. Cell選択時に画面遷移する処理の追加

SegueのIDを設定

Cell選択時の処理を追加

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        self.performSegue(withIdentifier: "showRoomView", sender: nil)
    }

7. トークルームの新規作成画面を追加する

Main.storyboardファイルを開き、新しいUIViewControllerを追加します。

新規作成したUIViewControllerに以下の3つを追加する。

• UILabel
• UITextField
• UIButton

StackViewを使用して、レイアウトを調整します。

追加した3つのUI部品を選択して、赤枠の箇所を選択します。

Stack Viewを選択します。

StackViewの位置を指定します。

StackViewを画面中央に指定します。

左右の余白の指定をします。

StackView内のUIの配置方法を指定します。
Aligment: StackView内の要素の揃え位置を指定
Disribution: StackView内の要素の配置方法を指定

8. 新しい画面のクラスを作成します。

下記画面のように対象ディレクトリを選択して、New File...を選択します。

CreateTalkRoomViewController.swiftファイルを新規作成します。

CreateTalkRoomViewController.swift

import Foundation
import UIKit

class CreateTalkRoomViewController:  UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

UIとコードを接続します。

9. 新規トークルーム追加用のCellを追加

セルの数を変更

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }

新規トークルーム追加用のセルを作成

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        switch  indexPath.row {
        case 0:
            cell.textLabel?.text = "Room1"
        default:
            cell.textLabel?.text = "+ Create New Room"
            cell.textLabel?.textColor = UIColor.blue
        }
        return cell
    }

10. Cellタップ時の画面遷移処理を追加

Segue のIDを指定。

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        switch indexPath.row {
        case 0:
            self.performSegue(withIdentifier: "showRoomView", sender: nil)
        default:
            self.performSegue(withIdentifier: "modalCreateRoomView", sender: nil)
            return
        }
    }

11. Createボタン押下時にFirebaseにデータを保存する処理の追加

CreateTalkRoomViewControllerから戻る処理を追加

CreateTalkRoomViewController.swift

    @IBAction func tappedCreateButton(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }

Createボタン押下時にFirebaseにデータを保存する処理の追加

CreateTalkRoomViewController.swift

    @IBAction func tappedCreateButton(_ sender: Any) {

        if let roomName = inputRoomView.text, !roomName.isEmpty {
            let instanceValue = ["name":"name", "message":"message"]
            databaseRef.child(roomName).childByAutoId().setValue(instanceValue)
        }

        self.dismiss(animated: true, completion: nil)
    }

12. トークルームの読み込み処理を追加

ライブラリをimportする。

TalkRoomViewController.swift

import  FirebaseDatabase

データベースを初期化する
データベースの変数を宣言して、インスタンスを生成する。
且つ、テーブルに表示するデータを変数として宣言する。

TalkRoomViewController.swift

    var databaseRef: DatabaseReference!

    var roomData = [String]()

ViewDidLoad内でインスタンスを生成する。

TalkRoomViewController.swift

    databaseRef = Database.database().reference()

データベース読み込み時に、roomDataパラメータに値を追加して、テーブルの再描画を実施する。

TalkRoomViewController.swift

        databaseRef.observe(.childAdded, with: { snapshot in
            self.roomData.append(snapshot.key)
            self.tableView.reloadData()
        })

セルの数を変更 ※(データの数)+(新規追加用セルの数)

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return roomData.count + 1
    }

データから名前を取得して表示する。

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        switch  indexPath.row {
        case ..<roomData.count:
            cell.textLabel?.text = roomData[indexPath.row]
        default:
            cell.textLabel?.text = "+ Create New Room"
            cell.textLabel?.textColor = UIColor.blue
        }
        return cell
    }

Cellタップ時のメソッドを変更

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        switch indexPath.row {
        case ..<roomData.count:
            self.performSegue(withIdentifier: "showRoomView", sender: nil)
        default:
            self.performSegue(withIdentifier: "modalCreateRoomView", sender: nil)
            return
        }
    }

13. 画面遷移時に部屋情報を遷移先の画面に渡す

ViewController.swftに部屋情報を受け取る用のパラメータを作成する。

ViewController.swift

var roomName: String?

画面遷移前に呼ばれるメソッドで次の画面に値を設定する処理を追加

TalkRoomViewController.swift

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        guard segue.identifier == "showRoomView", let targetVC = segue.destination as? ViewController else {
            return
        }

        if let roomName = sender as? String {
            targetVC.roomName = roomName
        }
    }

Cell選択時に、選択されたCellの情報を渡す処理を追加

TalkRoomViewController.swift

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        switch indexPath.row {
        case ..<roomData.count:
            let roomName = roomData[indexPath.row]
            self.performSegue(withIdentifier: "showRoomView", sender: roomName)
        default:
            self.performSegue(withIdentifier: "modalCreateRoomView", sender: nil)
            return
        }
    }

14. チャット画面のデータベース読み込み/書き込み処理を修正

ルーム名をキーとして、データを取得する。

ViewController.swift

 databaseRef = Database.database().reference().child(roomName!)