バージョン情報:
Swift Version 5.6
Xcode Version 13.3.1
概要
XcodeとSwiftを使って「配列の中身をTableViewCellに表示させる方法」を解説します。
「Cellを選択すると自動で選択が解除される機能」も併せて解説します。
本記事ではユーティリティエリアの右上にある7つのアイコン(下画像)を左から「ファイル」「時計」「はてな」「新聞」「ゲージ」「三角」「C」アイコンと呼びます。
ご承知おきください。
目次
1.StoryBoardの設定
2.Cellの設定
3.配列を作成
4.TableViewにデータを反映
5.Cellの選択解除のアニメーション
1.StoryBoardの設定
まず、初期設定で配置されているViewControllerを削除し、TableViewcontrollerを配置。
TableViewControllerを選択してユーティリティの「ゲージ」アイコンをクリックし、「Is Initial View Controller」にチェックを入れる。
(これをしないと、どのViewControllerがアプリのスタート画面かを指定できない)
TableViewControllerに紐付けるswiftファイルを作成。
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2F5c06865f-9c72-7a64-8d32-c4ea0d04f274.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4307e0d81d5b5aefed44c5ab5e033506)
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2Fee53f533-03cc-e945-0ae8-681f1905b0f4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1957c6f49e480b3b7cb86b1f714e4779)
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2F0c37ef89-1dec-50b8-fd33-028d1459f46e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7aec95cda518f9cff9ca8232025efc12)
忘れないうちに、TableViewControllerとSwiftファイルを紐付け。
次に、Cellを選択する。
TableViewを操作するときは、TableView、cell、ContentViewなど選択しているものが変わってしまいやすいので、DocumentOutlineを開いて選択すると安心。(画面がMacのダークモードになっているので黒いです)
「ゲージ」アイコンをクリックしてIdentifierに好きな名前を入力。(ここではcell)
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2Feb062867-1a40-8633-e097-5a6e2e490419.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=329019645d9c13340d178ff4fd080e10)
TableView内のCell(行)の高さを変えたい場合はTableViewを選択状態にし、「三角」アイコンをクリックしてRow Heightに好きな数値を入力。(ここでは200)
最後に、Cellの好きな場所にLabelを一つ配置。
これで、StoryBoardでの作業はひとまず終了です!
2.Cellの設定
ここからはコードを書いていきます。
まず、TableViewCellのカスタムクラスを作成。
カスタムクラスとは、「あるオブジェクトに関する設定(カスタム)をまとめる箱(クラス)」のこと。
手順は、下の画面の部分以外はswiftファイルの作成と同じです。
TableViewCell.swiftの中で、先ほど設置したLabelを宣言。
下の画像の位置に@IBOutlet var label: UILabel!
というコードを書く。
これは「label」という名前の「UILabel」を宣言するコード。
@IBOutlet var
= Swift上のコードとStoryBoard上のオブジェクトを紐付ける
label
= 先ほど配置したUILabelの名前(好きに命名して大丈夫)
:UILabel!
= オブジェクトの型としてUILabelという型を指定
コードを翻訳すると
「labelという名前のUITLabelがStoryBoardに存在するよ!」
という感じです。
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2Fb54eeb6f-4ad3-882e-39fc-cfdc827cf70e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a2bcb536dca8c38ededb0dcc79e6085)
3.配列を作成
続いて、UITableViewに表示するデータを準備します。
TableViewに表示したいデータを配列に入れます。
配列とは複数のデータを入れる箱のようなものです。
例えば「りんご」「ぶどう」という文字データや「1」「2」などの数字データを入れられます。
ここでは、「fruits」という名前の配列に「いちご、ぶどう、もも、みかん、マスカット、ドリアン、マンゴスチン」という7つの文字データを入れます。
下の画像のようにコードを書きます。
![mojikyo45_640-2.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2713259%2F969f16e8-c61f-2c58-416a-38d144a7247a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=abe75b0f7d1d2da5760c8e1c26e21b53)
let fruits
= 「fruits」という名前の配列を作成
: [String]
= 配列の中に入れるデータの型を指定(ここではString型)
["いちご", ... ,"マンゴスチン"]
= 配列に入れるデータを指定
コードを翻訳すると 「fruitsという名前の配列に、"いちご", ... ,"マンゴスチン"というString型のデータを入れるよ!」 という感じです。
これで、TableViewに表示するデータは整いました。ここからは、データをTableViewに反映させていきます。
4.TableViewにデータを反映
まず、TableViewにおけるセクションの数を指定します。
セクションとは、TableView内の項目のまとまりのことです。
下の画像では、赤い線で示された範囲が一つのセクションになっています。
override func numberOfSections …
と書いてある部分を探しましょう。
2行下にreturn 0
という部分があるので、return 1
に変更します。
コードの中の主要な部分の説明です。
〜〜〜
numberOfSections
= 直訳すると「SectionsのNumber」です。つまり、TableViewにおけるSectionのNumber(数)を指定しています。
return 1
= Sectionの数を1と指定
〜〜〜
次に、TableViewにおけるCellの数を指定します。
override func tableView(_ tableView: UITableView, numberOfRowsInSection …
と書いてある部分を探しましょう。
2行下にreturn 0
という部分があるので、return 配列の名前.count
に変更します。(ここではreturn fruits.count
)
コードの中の主要な部分の説明です。
〜〜〜
numberOfRowsInSection
= 直訳すると「Sectionの中のRowのNumber」です。つまり、TableViewにおけるRow(行)のNumber(数)を指定しています。
return fruis.count
= fruitsという名の配列の要素をCountする(数える)
〜〜〜
次に、Cellに表示するデータを指定します。
override func tableView(_ tableView: UITableView, cellForRowAt …
と書いてある部分を探しましょう。
以下のようにコードを書きかえます。
(赤枠が書き換える部分)
コードの中の主要な部分の説明です。
どこの話かが分かりにくいので番号を振りました。
〜〜〜
①
cellForRowAt indexPath
= indexPathで指定されたCellを生成
補足
indexPathとは一つ一つのCellのセクションと「インデックス」(=全部のCellの中での並び順)の情報が入った箱のこと。
②
: IndexPath
= cellForRowAt indexPath
で生成されるデータの型としてIndexPathという型を指定
③
dequeueReusableCell
= 再利用可能なCellがあれば、先に作られたCellから順番に再利用していく
(Cellの再利用については以下の記事がおすすめです。
https://qiita.com/Tatsuya_ss0121/items/1c0df20dc738fddfd1fb )
④
withIdentifier: Cellの名前
= CellのIdentifier(名前)を指定(ここでは、StoryBoardで設定したcellという名前を指定)
⑤
for: indexPath
= indexPathの数だけ繰り返す
⑥
as! TableViewCell
= Cellの総称としてTableViewCellという名前を指定
〜〜〜
最後に、コードとStoryBoard間で、オブジェクトを関連付けします。
まずLabelを関連付けします。
DocumentOutlineを開いてcellを選択し、画像の通りにlabelを紐付ける。
次にCellを関連付けします。
DocumentOutlineを開いてcellを選択し、「新聞」アイコンをクリックして「Class」にTableViewCellと入力。
これで、配列をTableViewに反映させることができました。
5.Cellの選択解除のアニメーション
ここでは最後の仕上げとして、下の動画のような、Cellの選択解除のアニメーションをつけます。
アニメーションが無いと、Cellを選択したら、他のCellを選択するまではずっとそのCellがハイライトされた状態になります。
override func tableView(_ tableView: UITableView, cellForRowAt …
と書いた部分の下に、以下のようにコードを書きます。
(赤枠が追加する部分)
主要なコードの説明です。
〜〜〜
didSelectRowAt
= Cellが選択された時に呼ばれる、ということ
deselectRow
= Row(行)をdeselect(選択解除)する
at: indexPath
= 選択されたCellのindexPathに該当するCellを指定
〜〜〜
翻訳すると、
「Cellがselectされたら、選択されたCellのindexPathを取得して、Cellの選択状態を解除するよ!」
という感じ。
以上が、配列の中身をUITableViewに表示し、Cellの選択解除のアニメーションを実装する方法です。