【iOSアプリ】Table Viewでセルタップ時に、画面遷移をする方法【Swift】

この記事では、Table Viewで、セルをタップした時に別の画面へ遷移をする方法をご紹介します。

Table Viewを使って、設定画面などを作っていると、セルをタップしたタイミングで画面遷移をし、詳細設定をしたい、といったことなどがありますよね。

そういった疑問を解消する方法を、こちらの記事で解説しています。

この記事を読むと、このようなツールを作成することができるようになります。

なお、この記事では、画面遷移の方法として、Navigation Controllerを使用しておりますが、Navigation Controllerを使用しない場合も、同様の方法で画面遷移の処理ができます。

画面遷移の方法だけを知りたい場合は、具体的なプログラム実装処理のセクションからみてください。

Navigation Controllerを使用した画面遷移の方法や、次画面への変数の引き継ぎ方法などは、こちらの記事で詳しく解説しています。興味のある方は、ぜひ、ご覧になってみてください。

目次

Storyboardで画面を準備する

画面遷移処理の実装のため、まずは、画面を作りましょう。以下の2画面を作っていきます。

画面機能
1画面目Table Viewを表示する
2画面目「2画面目」と表示する

また、2画面作成したら、画面遷移ができるように、Navigation Controllerで繋げていきます

Table Viewの使い方は、こちらの記事で詳しく解説しています。

1画面目を作る

Storyboard画面上にTable Viewを配置していきます。

STEP
Table Viewを配置する

LibraryからTable Viewを検索し、Storyboard上に配置しましょう。

Storyboard上に配置したら、Table Viewを画面いっぱいに広げます

AutoLayoutを使用し、上下左右全て余白0の設定をしましょう。

STEP
Table View Cellを配置する

LibraryからTable View Cellを検索し、Table Viewの上に配置しましょう。

Table View CellのIDを設定しましょう。

Table View Cellを選択し、Attribute Inspectorを開きます。

Identifierへ「next」と入力しましょう。

これで、1画面目は完成です。

2画面目を作る

続いて、2画面目を作っていきましょう。

2画面目は、単純に「2画面目」と表示するだけの画面ですので、とても簡単です。

STEP
新しいView Controllerを配置する

LibraryからView Controllerを検索し、Storyboard上に配置しましょう。

STEP
Labelを配置する

Library から Label を検索し、View Controller上に配置しましょう。

Labelには、「2画面目」と入力しておきましょう。

また、好みに応じて、Alignment (配置) や Font (書式) を変えて下さい。

これで、2画面目も完成です。

1画面目と2画面目を繋げる

最後に、1画面目と2画面目をNavigation Controllerを使用して繋げれば、Storyboard上の画面は完成です。

早速、作っていきましょう。

STEP
1画面目にNavigation Controllerを適用する

まずは、1画面目にNavigation Controllerを適用しましょう。

1画面目を選択し、右下のアイコンから、Navigation Controllerを選択します。

1画面目の左側に、「Navigation Controller」が表示されれば、OKです。

STEP
1画面目と2画面目を接続する

1画面目と2画面目を繋げましょう。

1画面目を選択し、Controlキーを押しながら、2画面目へ引っ張り、離します。

選択肢は、「Show」を選びましょう。

1画面目と、2画面目の間に、「Segue」が表示されれば、OKです。

設定したSegueにIDをつけましょう。

1画面目と2画面目の間のSegueを選択し、Attribute Inspectorを開きます。

Identifierへ「next」と入力しましょう。

ここで設定するIDは、プログラムで画面遷移時に使用するIDになります。
正しく設定しないと画面遷移ができないため、間違えないように注意しましょう。

これで、Storyboard上の準備は、全て完了です。

Table Viewのプログラムを実装する

Storyboard上の画面作成ができたので、次は、Table Viewの要素を表示するプログラムを作成しましょう。

今回は、以下の記事で解説したプログラムを流用します。

1画面目のViewControllerのプログラムへ、以下の通り実装しましょう。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet var tableView:UITableView!
    
    // Todoリスト
    let todoList:[[String]] = [
        ["風呂そうじ","お迎え",],       // 月曜日のタスク
        ["洗濯","買い物","飲み会"],     // 火曜日のタスク
    ]
    
    // セクションのヘッダー
    let sectionHeader:[String] = ["月曜日","火曜日"]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
        tableView.dataSource = self
        tableView.delegate = self
    }
    
    // セクション数を設定する
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionHeader.count
    }

    // セクションヘッダーを設定する
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionHeader[section]
    }

    // セクションヘッダーの高さを設定する
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }
    
    // セクション毎のセル数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todoList[section].count
    }

    // セクション毎のセルの内容
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "next", for: indexPath)
        cell.textLabel?.text = todoList[indexPath.section][indexPath.row]
        return cell
    }
}

実装できたら、Storyboardとプログラムを紐づけます。

Storyboard上で、1画面目のViewControllerを選択し、Connections Inspectorを開きます。

tableViewを引っ張り、View Controller上のTable Viewを紐付けましょう。

紐付けができたら、シミュレータを起動してみましょう。

以下の画面が表示されたら、Table Viewの実装は完了です。

セルタップ時に画面遷移をするプログラムを実装する

準備が全て完了しましたので、Table Viewのセルをタップしたら、画面遷移をするプログラムを作っていきましょう。

プログラム自体は、とても簡単です。

1つ目のView Controller用のプログラムに、以下の処理を追加しましょう。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
    
    let segueName = "next"
    performSegue(withIdentifier: segueName, sender: nil)
}

追加したら、シミュレータを起動してみましょう。

適当なセルをタップすると、次の画面へ遷移しますよね?

Backボタンで前のボタンに戻り、何度か画面遷移を試してみましょう。

それでは、最後に、プログラムの処理の詳細を見てみましょう。

process

これは、Table Viewのセルがタップされたタイミングで、呼び出される関数です。

セルをタップしたタイミングで、何か処理をしたい場合は、この関数の中に実装しましょう。

process

これは、指定したSegueIDを使って、画面遷移をする関数です。

今回は、2画面目へ遷移するSegueに、「next」という名前をつけました。

そのため、「next」というIDを、withIdentifier引数に指定し、実行することで、2画面目に遷移できます。

process

これは、指定したセルの選択状態を解除する関数です。

セルを選択すると、以下のように、網掛けの選択状態に表示になります。

今回は、画面遷移から戻ってきた場合に、選択状態を解除しておきたい場合は、この処理を実行しましょう。

選択中のセルの情報は、tableView関数の引数「indexPath」に入っています。そのため、indexPathを引数に、deselectRowを実行すれば、選択状態を解除できます。

また、選択したセルごとに、遷移先を変えたい場合もありますよね。

tableView関数が呼ばれた時に、どのセルがタップされたかは、以下の通り、引数のindexPathに入っています。

プロパティ設定内容
indexPath.section選択されたセルのセクション番号
indexPath.row選択されたセルのセクション内でのインデックス番号

そのため、例えば、今回のTable Viewであれば、todoList[indexPath.section][indexPath.row]が「風呂そうじ」であればこの画面へ遷移、といった方法で、セルごとに、遷移先を変えることもできます。

これで、この記事は終わりになります。ご覧いただき、ありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次