UITableViewについて

2018.7.10

1. はじめに

突然ですが、3ヶ月ほど前からswiftを勉強し始めまして、自分のnoteに忘れないようメモをしていたのですが、せっかくなのでQiitaに書いていこうと思います。
書いた通りまだまだど素人なので、間違い等ありましたら教えて頂けますと嬉しいです。

また、なんでいきなりUITableViewからと思われるかもしれませんが、特に意味はなく、作りたいものにtableviewが必要だったのでtableviewから書き始めました。後に、凄く基礎的な文法のことやGitのことなども書いて行くと思います。

2. UITableViewとは

LINEのメッセージや設定のページなどに使われている。

大きく2つの種類がある
1. Plain
2. Grouped

2つともsectionとrowを持っており、違いはsectionの部分になります。
Plainが持っておらず、Groupedが持っている2点の違い
- 2行分の高さで表示され、文字の色がグレーで表示されている点
- フロート表示されずスクロールによって非表示となる

また、tableviewを使う時にはよくDataSourceやDelegateというものを使います。
簡単に説明すると

常に店長的な存在であるViewControllerにバイト的な存在であるdatasourceとdelegateが質問して行動しているイメージ

ViewController
⇅
UITableViewDataSource -> Tableにどんなデータ表示するか
UITableViewDelegate -> そのデータをどのように扱うか（ex.何行目のどこに表示するかや個数などなど）

3. UITableViewを使う時に必要なメソッド

UITableViewを使う時には必ず存在しないといけないメソッドが2つあります。
それは行数とセルに表示する内容に関するメソッドです。

3-1. 行数

セルが何行必要なのか明記する必要があります。
また、行数の部分は数字のみに置き換えてください。

func tableView ( tableView:UITableView , numberOfRowInSection section:Int ) -> Int {

      return 行数　
      }

3-2. セルに表示する内容

セルが何行必要か決めたので次に中身を決めていきます。
行数のcodeもそうですがfunc tableviewと打った際にxcodeでは予測変換が出てきますので、（理解した上で）全部覚える必要はなくcellForRowAtIndexPathを選択するだけで大丈夫です。

また、code内のstyle: DefaultとreuseIdentifier:”MyCell”は後ほど説明します。
ここでは、cell.textLabel?.text = “文字列”の"文字列"の部分がセルに表示する内容を表しています。

func tableView ( tableView:UITableView , cellForRowAtIndexPath indexPath:NSIndexPath ) -> UITableViewCell {
　　     let cell = UITableViewCell ( style: Default , reuseIdentifier:”MyCell” )
　　     cell.textLabel?.text = “文字列”
　　     return cell
      }

以上の2つがUITableViewを使う際に必ず必要になるメソッドになるので、覚えてください。

また、上で書いた2つの必須のメソッド以外にも自由に追加して変更することができます。

• セクション数
• セクションのタイトル文字
• セクションのタイトルの高さ
• セクションのフッター
• セクションのフッターの高さ
• セルの高さ

などなど色々とできます。
詳しくはググればいっぱい出てくるので調べてください。

4. UITableViewCellをいじりたい時

上ではUITableViewについて説明してきました。
ここでは、UITableViewCellについて説明したいと思います。

UITableViewCellとは、UITableViewに表示する各行のことを指します。

そしてそのUITableViewをいじる方法が大きく2つあります。

4-1. セルの種類を選択して変更する方法（サブ）
4-2. セルを自由にレイアウトして作る方法（メイン）

4-1. セルの種類を選択して変更する方法

セルの種類は大きく4種類あります。
そしてUITableViewCellStyle.◯○という書き方によって表示できます。（以下記載）
また、どのようにUI上変更されるのかはググってみてください。すぐに出てきます。

UITableViewCellStyle.Default -> 左だけ
UITableViewCellStyle.Valuel -> 左（普通）と右（薄め）
UITableViewCellStyle.Value2 -> 左（textLabelが青色）と中央（中央）
UITableViewCellStyle.Subtitle -> 左上（textLabel）と左下（detailTextLabel）

実際にcodeでは以下（swift2）のように書きます。また、swiftのverによって表記の仕方が多少違う場合があります。

　ex, var cell = UITableViewCell ( style: UITableViewCellStyle.Subtitle , reuseIdentifier:”MyCell” )


先ほどUITableViewを使う際に必須のメソッドで説明したセルに表示する内容に関するcode内（以下に記載）でstyle: Defaultというのがありましたね。以下にはstyle: Defaultと記載されていますので左だけにLabelが表示されるUIとなっています。

func tableView ( tableView:UITableView , cellForRowAtIndexPath indexPath:NSIndexPath ) -> UITableViewCell {
　　     let cell = UITableViewCell ( style: Default , reuseIdentifier:”MyCell” )
　　     cell.textLabel?.text = “文字列”
　　     return cell
      }

このようにセルの種類を様々な方法で自分の作りたい理想に近づけることができます。
また、上で書いた基本的なセルの種類の変更以外にも、多種多様に変更することができます。

• セルの高さ
• 文字内容
• 画像
• 文字の色
• セルの背景色
• フォントやサイズ
• セルのアクセサリ

4-2. セルを自由にレイアウトして作る方法

UITableViewCellをいじる方法の2つ目になります。
また、今後、UITableViewCellをいじる際はこちらの方法がメインとなっていきますので、1つ目の方法は忘れて貰っても大丈夫です。
（基本的なことのみで済む実装の場合は1つ目の方法でも大丈夫です。）

セルを自由にレイアウトする方法がここでも2つに分かれます。
方法が少し多くなってきたかもしれませんが、最後に簡潔にまとめますので、安心してください。

4-1では既にあるカスタム方法をいじっていたのですが、ここでは、既存の方法以外に、自由にいじりたい時にどうすればいいのか説明します。
UITanbleViewCellの上に「LabelやImageをここに置きたいな」や「ここにこのボタン置きたいけど」などあると思いますので、そういう時に参考にしてください。

4-2-1. 部品にタグをつけて、タグでアクセスする方法（サブ）
4-2-2. セルのカスタムクラスを作って、アクセスする方法（メイン）

以下にはxcodeの部品名が出てきますが、基本的なことなので調べて覚えてください。

4-2-1. 部品にタグをつけて、タグでアクセスする方法

1. 追加したセルの[Identifier]にセルID（自由に付けれる）をつける
2. セルの中に追加した部品（label等）に[Tag]に番号つける
3. プログラムでタグを使ってオブジェクトにアクセスする

4-2-2. セルのカスタムクラスを作って、アクセスする方法

1. [Identifier]にセルIDをつけ、セル内の部品にTag番号をつけるまでは一緒
2. 新しいViewControllerファイルを作成する（ex,myTableViewCell :UITableViewCell）
3. TableViewCell内に作ったフィアルに[Custom Class] -> [Class]にファイル名を記載する
4. セル内の部品をアウトレット接続してプログラムで作っていく

簡単に説明すると上記の様になります。
そして、長期的には、4-2-2のカスタムセルを作ってアクセスする方法がデフォルトになってきますので、4-2-2を覚えて行ければ大丈夫かと思います。
自分もまだ覚えたばっかりなので一緒に勉強して行ければと思います。

[例外あり]
僕自身4-2-2の方法で実際に実装をしていたのですが、カスタムセルで作ったファイルが[custom class]に入力したのですが、アウトレット接続できず、原因を調べていた所、コンパイルファイル内にカスタムセルで作ったファイルがないとこが判明し、手動で追加してやっとアウトレット接続できました。
また、一般的にハマるとことしては、作ったファイルの継承先がUITableViewCellじゃないということがある様です。

まとめ

UITableViewについて説明してきましたが、僕もまだまだわからないことだらけですし、上記に書いてきた内容に間違っている内容ももしかしたらあるかもしれません。ですが、僕なり以下にUITableViewの実装をまとめてみます。

1. ViewController上に（UI）TableViewと必要な際は（UI）TableViewCellも持っていく。
2. code内で対象のViewControllerにUITableViewDataSourceとUITableViewDelegateを継承させる
3. UITableViewを使う際に必須の2つのメソッドを記載する
4. UITableViewCellをいじる際は、新しくファイルを作りカスタムセルとして4-2-2の方法で実装していく

大きく説明すると4つのステップを踏むかなと思います。
また、ここでは配列の話をするとさらに長くややこしくなってしまうので、割愛しています。

最後まで読んで頂きありがとうございました。

間違っている点などありましたら、Qiita内でもいいですし、twitter[@takenoshin_]までご連絡ください。