はじめに
1枚目のテーブルビューでジャンルを選択して,2枚目のテーブルビューでその要素一覧を表示したい時ってありません?そういうのなんて単語で表すのだろう...調べ方が分からないので,自分で書いてメモを兼ね投稿します.
いろいろ配置
まずはストーリーボードから
黄色い四角を選択して
「Editor」→「Embed In」→「Navigation Controller」を選択すると...
こうなる.
そして,黄色い四角をコントールキー(右クリック)で引っ張っると...
遷移の種類が出てくるので「Show」を選択.
そしてこうなる.いろいろなアプリで見かけるやつです.
TableViewと
TableViewCellを各画面に配置すると...
こうなる.
そして,1枚目の画面から2枚目の画面への遷移を選択してidentifierを設定する.以上で見た目の準備は完了.
コーディング
コーディングをゴリゴリしていく前に...このままだとコーディングをするファイルが足らないので,ファイルを作成します.
まずは2枚目のViewControllerのファイルを作成します.(詳しい説明は省略)
次にTableViweCellのファイルを作成します.
「File」→「New」→「File...」で「Cocoa Touch Class」を選択.
名前は「TableViewCell」 SubClassは「UITableViewCell」を選択.「Also create XIB file」のチェックも忘れずに.
このファイルを各画面ごとに作成します.2枚目の画面は「secondTableViewCell」としました.
.xibファイルのセルを選択し,identifierを設定.「TableViewCell」は「cell_01」,「secondTableViewCell」は「cell_02」としました.
そして.xibファイルのセルにLabelを配置.(両方の.xibファイルで)
あとは下記のコードをゴリゴリしていくだけ.
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
}
}
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
}
}
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
}
}
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