【Swift】Table View Cellの使い方。テーブルに表示するデータ1つ1つの入れ物。(Swift 2.1、XCode 7.2)

2020年6月16日

Table View Cellとは

前回の記事でTable View(以下、テーブルビュー)を使って、セクションやインデックスとともにデータを目次のように並べて表示する方法について説明した。⇒「記事

本記事ではテーブルビューの記事で使ってきた部品のTable View Cell(以下、セル)について説明する。
Table View Cell

 

セルとは、テーブルに表示するデータ1つ1つの入れ物である。データの数だけセルが存在し、テーブルビューの中に複数のセルを格納して画面に表示する。

テーブルとセルのイメージ

 

テーブルビューの記事では設定項目のPrototype Cellsの値を増やしてセルを追加したが、下図のように部品リストからドラッグ&ドロップで格納することもできる。

テーブルビューの中にセルの部品を配置する

 

 

原型セルを2つ利用する例

上記でテーブルビューに格納したセルはセルの原型(以下、原型セル)なので、すべでのデータのセルのデザインを同じにするならばテーブルビューには1個のセルのみ格納しておけば良い。

では、原型セルを2つ利用する例を見てみよう。

まずはテーブルビューをデバイス画面に配置し、Ctrlキーを押しながら部品をデバイス画面の上にある黄色い丸に運ぶ。そして、ポップアップで表示されたメニューから「dataSource」を選択する。

デバイス画面にテーブルビューを追加

 

次に、テーブルビューに2つのセルを格納する。その中の1つのセルをクリックしたあとに下図黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開く。

設定項目のIdentifierに「TestCell1」、Backgroundに青、Tintに白を指定する。続いて、もう一方のセルをクリックして、設定項目のIdentifierに「Testcell2」、Backgroundに茶色、Tintに白を指定する。これで、外見の異なる2つの原型セルを作ったことになる。

Table View Cellのアトリビュートインスペクタを開く

 

次にソースコードを実装する。

以下のコードはUITableViewDataSourceプロトコルを適用し、プロトコルの必須メソッドの「データを返すメソッド」と「データの個数を返すメソッド」の2つを実装した例。

データを返すメソッドでは引数で与えられたインデックスをもとに、インデックス番号が偶数の場合は「TestCell1」、奇数の場合は「TestCell2」の原型セルからインスタンスを作って返すようにした。これにより、セルの背景が青、茶色の交互に表示されるようになる。

 

以下は実際のプレイ動画

セルの設定項目にも色々あり、柔軟なカスタマイズが可能である。確認してみよう。

Style

セルの表示スタイルをBasic、Right Detail、Left Detail、Subtitle、Customの5つの中から選ぶ。セルの中にはタイトルと詳細文の2つを表示することができ、各スタイルによって表示される場所やフォントサイズが変わる。

下図はBasicのスタイルで、タイトルのみ表示される。今までのサンプルで見てきたスタイルだ。

StyleにBasiceを設定

 

Right Detailは左にタイトル、右に詳細文を表示するスタイル。

以下のコードはセルにタイトルと詳細文を設定する例。データをカンマで分割し、1つ目をタイトル、2つ目を詳細文(detailTextLabel)に設定している。

 

下図のように表示される。

右に詳細文

 

Left Detailは、左側に詳細文、右側にタイトルが表示されるスタイルと思いきや、左にタイトル、右に詳細文はそのままに2つが中央寄りに表示される。

スタイルにleft detailを設定

 

SubTitleは、タイトルと詳細文の両方が左端に表示される。

スタイルにSubTitleを設定

 

Customはスタイルを自分でカスタムする。

例えば、連番とタイトルと詳細文の3つを表示して、フォントカラーを赤、青、黒に分けたい場合を見てみよう。Styleを「Custom」に設定したあと、下図のようにセルの中にラベルの部品を格納する。

次に、左端のラベルを選択してアトリビュートインスペクタボタン(黄緑枠)を押して設定画面を開き、設定項目のColorに赤、Tagに1を指定する。Tagはソースコードからこのラベルにアクセスするための識別番号である。続いて、2つ目のラベルはColorに青、Tagに2、3つ目のラベルはColorに黒、Tagに3を指定する。

スタイルにcustomを設定

 

3つのラベルに値を設定するソースコードは以下のようになる。Tag番号でセルに含まれるラベルを取得し値を設定する。

 

実行すると下図のようになる。
スタイルにCustomを設定したあとの実行結果

 

また、Basic、Right Detail、SubTitleを選択するとImageの入力項目が現れるので、そこに画像を指定すればセルの中に画像を表示させることができる。

下図はBasicでImageを設定した場合
イメージ画像を設定

Identifier

セルの識別子。ソースコードから原型セルを取得する場合に利用する。今まで使ってきたので使い方の説明は割愛する。

 

Selection

セルをクリックしたときの背景色を設定する。Noneは色なし、Blueは青、Grayは灰色、Defaultは灰色。

しかし、Blueを設定してもなぜか灰色になる事象が発生した。プロパティのselectionStyleをコードから設定しても変更できない。今後理由が分かったときに追記する。

SelectionにGrayを設定

 

ちなみに、セルをクリックしたときの背景色を青色や灰色以外の自分好みの色にしたいときは以下のコードのようにする。UIViewインスタンスを作成して背景色を変えてから、セルの選択時背景色のプロパティに設定する。

選択時の背景色を表示

 

Accessory

セルの右端にマークをつける。Disclosure Indicator(>マーク)、Detail Disclosure(詳細マークと>マーク)、Checkmark(チェックマーク)、Detail(詳細マーク)の4つの中から選択する。

下図はDisclosure Indicator
disclosure indicator

 

下図はDitail Disclosure
detail disclosure

 

下図はCheckmark
checkmark

 

下図はDetail
detail

Editing Acc.

編集モードのときにセルの右端にマークをつける。選択肢はAccessoryと同じ。編集モードについては別の記事で説明する。

 

Focus Style

セルが選択されたときのスタイルをDefault、Customの2つから選択する。利用方法が分かったら追記する。

 

Indentation

セルに段落を入れる。Levelはインデントの個数、Widthは1つのインデントの幅を表している。

下図はLevelに4、Widthに15を設定した場合
インデントを設定

 

Indent While Editing

編集モードでインデントをするかどうかの設定のようだが、チェック有無で変化が分からなかった。ShouldIndentWhileEditingプロパティを直接設定しても変化無し。理由が分かったら追記する。

 

Shows Re-order Controls

並び替えマークを表示するかどうかの設定のようだが、チェック有無で変化が分からなかった。ShowsReOrderControlプロパティを直接設定しても変化無し。理由が分かったら追記する。

 

Separator

セル境界線の左右のスペース。Default InsetsとCustom Insetsの2つから選択する。

Custom Insetsを設定するとleftとrightの入力欄が表示される。下図はCustom Insetsを選択し、leftとright両方に50を設定した場合
Cumstom Insetsのleft 50, right 50