【Xcodeのお勉強】TableViewの練習、セクションを作ってみる

TODOアプリを作ってなんとなくTableViewを使う時のお作法みたいなのが身についてきた。もう少し理解を深めるためにセクションを使ってみる。

参考にしたチュートリアル(あんまりしゃべらない人だった)

NavigationViewControllerをEditor > Embed inで配置する

TableViewを配置してdelegateをsettingする

Utility areaからtableViewをドラッグ・アンド・ドロップし、autolayoutの設定をしたらdelegateを設定する。tableViewからControlを押しながら上部に線を引っ張る(説明雑だな

また、このままだとtableView上部に空間ができているのでViewControllerをクリックした後にLayout > Adjust Scroll View Insetsのチェックを外す。これのチェックを外さないとInterface Builderと見え方が違ってしまうらしい。ここ

ImageViewとLabelを使ってセルを作る

autolayoutの設定

正直ここはもう少し深める余地がありそう。この設定で作った時下方向の余白が考えられていない気がする。

TableView用のカスタムクラスを作る

新規ファイルを作成しTableView用のカスタムクラスを作る。ViewControllerでClassを作成した新規のファイルにする。また、TableCellのidentifierに「TableCell」を設定した。

※ここが間違いだった。TableView用のカスタムクラスではなく、TableCell用のカスタムクラスだった。

ImageViewとLabelをoutletで繋ぐ

TableViewController.swiftと2つのパーツを繋ぐ

ViewController.swiftにプロトコルを追記する

そうやこれはお作法や。

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

配列を用意する

セルに表示するためのデータを用意する。めんどいのでfまでにする

var IndexArray = ["a","b","c","d","e","f"]

UITableViewのプロトコルに必須なメソッドたちを呼び出す

これもお作法なんだ。そうなんだ。

セルの個数

func numberOfSections(in tableView: UITableView) -> Int {
 return IndexArray.count
 }

セクションのタイトル

titleって打つだけで出てくるよ。

 func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { return IndexArray[section] } 

これと↑の違いがよくわからん

インデックスセクションのタイトルを返すメソッド

func sectionIndexTitles(for tableView: UITableView) -> [String]? {
 return IndexArray
 }

セクションの中にいくつセルが入っているか

とりあえず3ついれている

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return 3
 }

Assetsの中にimageを入れる

 

完成はしたが不明点が多かった

ハマったポイント

途中でハマったのがカスタムクラスを設定するviewをTableCellにしなかったせいですごいハマった。

追記
なんかめっちゃややこしいな・・・
このリンクが参考になった。

この記事が気に入ったら
いいね ! しよう