Swift 4 で TableView を使ってみる

さて、TableViewでイカしたUIを作ってやろう！と思ったら意外にTableViewを使いこなすのが難しかったので、メモを残しておきます。
このメモを読めばテーブルビューなんて楽勝？

1.ストーリーボードを設定しよう

何をするにも、まずストーリーボード上にオブジェクトを置かないと、始まらない。まず、TableViewを画面上に配置しよう！

配置したら、Constraintsを設定してTable ViewをiPhone画面全体に表示できるように調整しよう！Add New Constraints の下にある□マークの周りの数字(4箇所)にゼロを代入して、画面全体に表示させることができるぞ。

これだけでは部品が足りない。TableViewに必要なもう一つの部品Table View Cellを選択して、Table Viewにドラッグ&ドロップしよう！このCellとは行の意味で、TableViewはCellを入れておく箱のようなもので、たくさんのCellデータをTableViewで表示することができるんだ。

Cellを追加すると左上に⚠︎が出てくると思う。「CellにIdentifierが必要」と言ったエラーがね。Identifierとは直訳で識別子という意味なんだが、つまりは固有名詞だ。このエラーは、「いくつもCellがあったら、名前つけないとCellがたくさんあったら識別できないだろうがぁ！この●●が！」と言っているんだ。
怒られる前に、Cell名を決定するのが賢明だな！

Table View Cell を選択した後、右上にあるattributes inspectorを選択しよう(▼とーを足したみたいなマーク)！その中の、「Identifier」に自分の好きなCell名を入力しよう！今回は「Baka_Cell」としたぞ！

2.コードと紐ずける

このままだと、ViewController.swift(コード)がTableViewを認識してくれないので、コードとstory boardを紐ずけよう！右上にある、世紀末のオリンピックマーク(丸が二つ合体してるやつ)をクリックして、二画面化しよう。
二画面かしたらTable ViewをControlを押したままドラッグして、マウスカーソルから出現する青い不思議な棒を出そう！そのまま、「ViewDidLoad」の上の行にドラックだ！そうすると上の写真のような画面になるぞ！
この不思議な青い棒は、オブジェクト？の紐付けによく使うので覚えておこう！
そうしたらNameのところに、コード上で使うTableViewの名前を入力だ！今回は「TableView」としたぞ！

次に、Delegate, DataSourceの関連づけを行おう！
右上にある、⇨＋●マークを選択してオブジェクト？の接続設定ができるぞ。今回は、TableViewを選択してTableViewのDataSource、Delegateの右にある●をドラッグして謎の青い線を出そう！青い線が出たら、

上画像に「ViewController」と吹き出しが出てる場所の下、黄色い●＋□マークの場所にドラッグしよう！そうすると上画像のように DataSouceがViewController(コード)と関連ずけされるぞ！同じようにDelegateも関連ずけしよう！
こいつらがなんなのかって？難しいことを聞くね！私もよくわからん！
(ちょっと説明すると、DataSouceとDelegateは、TableViewCellの高さや値、文字などのデータを設定できるんだ。今回は、それらの設定をViewControllerで行うので、ViewControllerに関連づけを行なったぞ！)

3.コードをイジイジする

さて、今度はコードをいじっていこう！

上の画面を表示したら、
以下の部分を、

class ViewController: UIViewController {

以下に変更しよう！

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

変更すると右に赤い□＋●が出てくるかもしれないけど気にするな！
このコードの変更により、UITableViewDelegateとUITableViewDataSourceに依存したコードが使えるようになったぞ！内容的にはCell変更とかだ。

UITableViewDelegateとUITableViewDataSourceを追加すると、画像のような感じで怒られると思う。でも、これは怒られているわけではないのだ！UITableViewDelegateとUITableViewDataSourceを設定できるプロトコルがあるけど、コードの中には存在しないよ。プロトコルを追加するかい？と言っているんだ。パーフェクトだ！
自動で追加してくれるなんてありがたい！
喜んで「FIX」を押そう！

FIXを押すと、

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       <#code#>
   }
   
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       <#code#>
   }

が追加されるぞ！

追加されたら、ちょっとこいつらは放っておいて、以下のコードを追加しよう。

//MARK:関数設定
   let List = ["ニック","ひかり","タオ","キャサリン","リトルマック","トレイシー"]

追加場所は、

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

の下の行あたりに追加してくれ！

このListはテーブルビューに表示される文字だ！これからこのリストが、テーブルビューに表示されるように設定していくぞ。

先ほどFIxで追加された、

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       <#code#>
   }
   
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       <#code#>
   }

を以下のように変更しよう！

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       //一つのセクションに入れるCellの数を指定する。
       return List.count
   }
   
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       //Cellの内容を設定する。
       let cell = tableView.dequeueReusableCell(withIdentifier: "Baka_Cell", for: indexPath)
       cell.textLabel?.text = List[indexPath.row]
       return cell
   }

これで、Cellの設定は完了だ!
内容を知りたいって？そうだな。

まずは上の部分、

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       //一つのセクションに入れるCellの数を指定する。
       return List.count
   }

の説明をするぞ！これはテーブルビュー内のセクションに何個のCellをおくかを定義するぞ！ん？そんなん嘘だって？
試しにList.countの部分を3にしてみるといい。リストにはタオまでしか表示されなくなるぞ！
ここで使っている、return 数字 の数字はかなり大事だぞ！この数字が下の部分に関わってくる。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       //Cellの内容を設定する。
       let cell = tableView.dequeueReusableCell(withIdentifier: "Baka_Cell", for: indexPath)
       cell.textLabel?.text = List[indexPath.row]
       return cell
   }

下の部分の説明だ！ここはCellの内容を設定するぞ。
let cell = 〜　で、story boardにて作ったBala_Cellとの関連づけを行なっているぞ。その関連ずけをおこなったCellに
cell.textlabel〜　で、Listの内容をCellに代入するんだ。
その後、 return cell でテーブルビューに反映すると。

ここまで、説明するとなんかわかった気になると思うがよく見て欲しい。
indexPath.rowってなんだ？これは、選択されたcell(行)の番号が入るんだ。
何を言っているかわからないって？

わかりやすく、処理を流れにして書こう

1.let cell = ~ 「ストーリーボードにある、Baka_CellというCellの1行目(indexPath.row = 0)に代入設定する。」
2.cell.textLabel?〜　「Baka_cellの一行目に、Listの最初の値(ニック)を代入する。
3.一行目のデータ(ニック)を返す

こんな感じで処理されるんだ。ん？なんだって？この処理だと、6回ループしないと全ての値(トレイシーまで)が入らないって？
何を言っているんだ！この部分はループするんだよ。

実はこの部分、先ほど言った 上の部分の数字(今回の場合は、return List.count)の回数ループするんだ！ループすることにより

一度目(indexpath=0)はニックを
二度目(indexpath=1)はひかりを、
三度目は....
六度目は(indexPath=5)トレイシーを代入する。

そんな感じで、「List.count(6)」回ループすることによってCellに代入を行うんだ。

ループの様子を確認したければ、

//Cellの内容を設定する。
       print(indexPath)
       let cell = tableView.dequeueReusableCell(withIdentifier: "Baka_Cell", for: indexPath)
       cell.textLabel?.text = List[indexPath.row]
       return cell

と書き換えることによって、六回ループしていることが確認できると思うぞ。

最終的なコードは以下の感じになるぞ！

さて、実行をしてちゃんと以下のようにリストが表示されたかな？

なにぃ！画面上部が青くならないって！
大丈夫だ。これはマクドナルドのWifiが使えず、iPhoneでテザリングして、この記事を書いている私の仕様なので気にしないで。

今回は以上！今後も気まぐれでSwiftの記事を投稿するかもしれないぞ。

またね！