LoginSignup
18
19

More than 5 years have passed since last update.

tableViewからtableViewへ遷移する

Last updated at Posted at 2018-02-11

はじめに

1枚目のテーブルビューでジャンルを選択して,2枚目のテーブルビューでその要素一覧を表示したい時ってありません?そういうのなんて単語で表すのだろう...調べ方が分からないので,自分で書いてメモを兼ね投稿します.

いろいろ配置

まずはストーリーボードから

スクリーンショット 2018-02-12 3.42.28.png

黄色い四角を選択して

スクリーンショット 2018-02-12 3.42.54.png

「Editor」→「Embed In」→「Navigation Controller」を選択すると...

スクリーンショット 2018-02-12 3.43.18.png

こうなる.

スクリーンショット 2018-02-12 3.43.41.png

そして,黄色い四角をコントールキー(右クリック)で引っ張っると...

スクリーンショット 2018-02-12 3.44.13.png

遷移の種類が出てくるので「Show」を選択.

スクリーンショット 2018-02-12 3.44.24.png

そしてこうなる.いろいろなアプリで見かけるやつです.

スクリーンショット 2018-02-12 3.44.45.png

TableViewと

スクリーンショット 2018-02-12 3.45.15.png

TableViewCellを各画面に配置すると...

スクリーンショット 2018-02-12 3.45.25.png

こうなる.

スクリーンショット 2018-02-12 4.10.13.png

そして,1枚目の画面から2枚目の画面への遷移を選択してidentifierを設定する.以上で見た目の準備は完了.

コーディング

コーディングをゴリゴリしていく前に...このままだとコーディングをするファイルが足らないので,ファイルを作成します.
まずは2枚目のViewControllerのファイルを作成します.(詳しい説明は省略)
次にTableViweCellのファイルを作成します.

スクリーンショット 2018-02-12 3.45.42.png

「File」→「New」→「File...」で「Cocoa Touch Class」を選択.

スクリーンショット 2018-02-12 3.47.23.png

名前は「TableViewCell」 SubClassは「UITableViewCell」を選択.「Also create XIB file」のチェックも忘れずに
このファイルを各画面ごとに作成します.2枚目の画面は「secondTableViewCell」としました.

スクリーンショット 2018-02-12 3.55.22.png

.xibファイルのセルを選択し,identifierを設定.「TableViewCell」は「cell_01」,「secondTableViewCell」は「cell_02」としました.

スクリーンショット 2018-02-12 3.56.21.png

そして.xibファイルのセルにLabelを配置.(両方の.xibファイルで)

あとは下記のコードをゴリゴリしていくだけ.

ViewController.swift
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // テーブルビュー
    @IBOutlet var tableView: UITableView!

    // セルの要素をあらかじめ決めうち
    let someArray: [String] = ["果物", "スポーツ", "アニメ", "野菜", "映画", "飲み物"]

    // 選択されたセルを覚える変数
    var chosenCell: Int!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // テーブルビューにTableViewCellを登録
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil),forCellReuseIdentifier: "cell_01")

        tableView.delegate = self
        tableView.dataSource = self

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // セルの数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // someArrayの中身の数だけセルを表示
        return someArray.count
    }

    // 各セルの要素を指定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // UITableViewCellのインスタンスを生成
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell_01", for: indexPath) as! TableViewCell

        // セルのUILabelに配列の中身を順に表示
        cell.label.text = someArray[indexPath.row]

        return cell
    }

    // セルが選択された時に呼ばれる
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 選択されたcellの番号を記憶
        chosenCell = indexPath.row
        // 画面遷移の準備
        performSegue(withIdentifier: "toSecondViewController",sender: nil)
    }

    // Segue 準備
    override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        // 遷移先のViecControllerのインスタンスを生成
        let secVC: secondViewController = (segue.destination as? secondViewController)!
        // secondViewControllerのgetCellに選択された画像を設定する
        secVC.getCell = chosenCell

    }

}

TableViewCell.swift
class TableViewCell: UITableViewCell {

    @IBOutlet var label: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

secondViewController.swift
class secondViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // テーブルビュー
    @IBOutlet var secondTableView: UITableView!

    // ViewControllerから選択されたCell番号を受け取る変数
    var getCell: Int!

    // セルの要素をあらかじめ決めうち
    // 果物
    let fruitArray: [String] = ["リンゴ", "ブドウ", "バナナ", "オレンジ", "レモン", "ピーチ"]
    // スポーツ
    let sportArray: [String] = ["サッカー", "野球", "ラグビー", "卓球"]
    // アニメ
    let animeArray: [String] = ["ポ", "プ", "テ", "ピ", "ピ", "ッ", "ク"]
    // 野菜
    let vegetableArray: [String] = ["スイカ", "トマト", "キャベツ", "キュウリ", "大豆", "レタス", "サニーレタス"]
    // 映画
    let movieArray: [String] = ["ハリーポッター", "スターウォーズ", "アイアンマン", "スパイダーマン", "ゴーストバスターズ", "ブラックホークダウン", "タイタニック", "バックトゥーザフューチャー", "ジュラシックパーク"]
    // 飲み物
    let drinkArray: [String] = ["コーラ", "烏龍茶"]

    // 選択されたジャンルの配列の長さ変数
    var arrayLength: Int!

    override func viewDidLoad() {
        super.viewDidLoad()

        // テーブルビューにTableViewCellを登録
        secondTableView.register(UINib(nibName: "secondTableViewCell", bundle: nil),forCellReuseIdentifier: "cell_02")

        secondTableView.delegate = self
        secondTableView.dataSource = self

        // 選択されたジャンルによってセルの数を変える
        // getCellの中身が・・・
        switch getCell {
            // 0のとき
        case 0:
            arrayLength = fruitArray.count
            // 1のとき
        case 1:
            arrayLength = sportArray.count
            // 2のとき
        case 2:
            arrayLength = animeArray.count
            // 3のとき
        case 3:
            arrayLength = vegetableArray.count
            // 4のとき
        case 4:
            arrayLength = movieArray.count
            // 5のとき
        case 5:
            arrayLength = drinkArray.count
        default:
            break
        }

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    // セルの数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // someArrayの中身の数だけセルを表示
        return arrayLength
    }

    // 各セルの要素を指定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // UITableViewCellのインスタンスを生成
        let cell = secondTableView.dequeueReusableCell(withIdentifier: "cell_02", for: indexPath) as! secondTableViewCell

        // 選択されたジャンルによってセルの中身を変える
        // getCellの中身が・・・
        switch getCell {
        // 0のとき
        case 0:
            // セルのUILabelに配列の中身を順に表示
            cell.secondLabel.text = fruitArray[indexPath.row]
        // 1のとき
        case 1:
            cell.secondLabel.text = sportArray[indexPath.row]
        // 2のとき
        case 2:
            cell.secondLabel.text = animeArray[indexPath.row]
        // 3のとき
        case 3:
            cell.secondLabel.text = vegetableArray[indexPath.row]
        // 4のとき
        case 4:
           cell.secondLabel.text = movieArray[indexPath.row]
        // 5のとき
        case 5:
            cell.secondLabel.text = drinkArray[indexPath.row]
        default:
            break
        }

        return cell
    }

}
secondTableViewCell.swift
class secondTableViewCell: UITableViewCell {

    @IBOutlet var secondLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

はい.以上になります.
各部品の関連付けを忘れないように

今回作成したサンプルのリンクを以下に貼っておきます.
Github

18
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
19