テックキャンプ126日目〜テーブルの記述

kobasaです(´ω｀*)
テーブルの記述を用いてTodoミニアプリを作成していました。
Excelなどで見る表という感じではなく、
配列に追加した値を順番に表示するのにテーブルを使っている感じです。

Rubyでいうeach文のような使い方ぽい。
そういやテックキャンプのカリキュラムでテーブル勉強してないなー。

126日目の勉強内容

テーブル使用時の基本

UIにテーブルを配置するには「Table View」でテーブル画面(セルの置き場所)を配置し、
「Table View Cell」でテーブルのセルを配置する。
配置したCellのIdentifierにid名を付与しておく。

テーブルではUITableViewDelegate,UITableViewDataSourceという2つのデリゲートが必要。

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {

@IBOutlet weak var tableView: UITableView!

tableView.delegate = self
tableView.dataSource = self

テーブルのメソッド

テーブルは複数のメソッドの記述が必要。また、呼び出される順番がある。

テーブルに配置するセルの数を決めるメソッド

func tableView(_tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
	return textArray.count
}

2番目に呼ばれるメソッド。
返り値のtextArrayに入っている値の数がセルの数になる。
数字を入れると配列が最初は空のためエラーになってしまう。

セクション(テーブルのまとまりの数)を決めるメソッド

func numberOfSections(in tableView: UITableView) -> Int{
	return 1
}

1番目に呼ばれるメソッド。セクションがいくつあるか記述する。

セルを生成して返却するメソッド

func tableView(_tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{

	let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

	cell.selectionStyle = .none
	cell.textLabel?.text = textArray[indexPath.row]
	cell.imageView!.image = UIImage(named: "checkImage")
	return cell
}

3番目に呼ばれるメソッド。オプショナル型の記述があるが今はスルー。
画像の配置場所など指定していないが細かい指定もできるはず。

1. idが”Cell”のセルと紐づけている。indexPathを付与
2. 選択したセルのハイライトを消去する記述
3. セルのテキストを配列から取得。「indexPathの番号行目」に格納されている値を取得
4. 指定した画像をセルの画像に表示

セルがタップされた時に呼ばれるメソッド

func tableView(_tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

	let nextVC = storyboard?.instantiateViewController(identifier: "next") as! NextViewController
        
	nextVC.toDoString = textArray[indexPath.row]        
	navigationController?.pushViewController(nextVC, animated: true)
}

セルがタップされたときなので順番などはなし。配列の中身を取り出して遷移先へ渡す処理。

1. id名”next”が指定された”NextViewController”へ遷移する(紐付けを行う)
2. 遷移先の変数toDoStringに配列に格納された値を渡す。[indexPath.row]の記述でタップしたセルの番号目の値を取得できる
3. ナビゲーションコントローラーを用いてnextVCのコントローラーへ遷移

セルの高さを決めるメソッド

func tableView(_tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{
	return view.frame.size.height/6
}

返り値のCGFloatはどんな値でも良い?
返り値として1つのセルの高さを画面全体の1/6に指定。UIの設定より優先される。

テキストフィールドでキーボードのリターンキーを押したときの処理

func textFieldShouldReturn(_textField: UITextField) -> Bool{

	textArray.append(textField.text!)
	textField.resignFirstResponder()
	textField.text= ""
	tableView.reloadData()
        
	return true
}

テーブルのメソッドではないが、テーブルを更新するという処理を記述。

1. 配列にテキストフィールドの文字を加える
2. FirstResponderはキーボード表示のこと。resign=辞める,become=なる
3. テキストフィールドの文字を空にする
4. テーブルを更新する