テーブルに表示するデータ1つ1つの入れ物。テーブルに表示するデータ1つ1つの入れ物。Cell(以下、セル)について説明する。セルとは、テーブルに表示するデータ1つ1つの入れ物である。データの数だけセルが存在し、テーブルビューの中に複数のセルを格納して画面に表示する。Cellsの値を増やしてセルを追加したが、下図のように部品リストからドラッグ&ドロップで格納することもできる。上記でテーブルビューに格納したセルはセルの原型(以下、原型セル)なので、すべでのデータのセルのデザインを同じにするならばテーブルビューには1個のセルのみ格納しておけば良い。原型セルを2つ利用する例を見てみよう。テーブルビューをデバイス画面に配置し、Ctrlキーを押しながら部品をデバイス画面の上にある黄色い丸に運ぶ。ポップアップで表示されたメニューから「dataSource」を選択する。次に、テーブルビューに2つのセルを格納する。その中の1つのセルをクリックしたあとに下図黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開く。設定項目のIdentifierに「TestCell1」、Backgroundに青、Tintに白を指定する。続いて、もう一方のセルをクリックして、設定項目のIdentifierに「Testcell2」、Backgroundに茶色、Tintに白を指定する。これで、外見の異なる2つの原型セルを作ったことになる。次にソースコードを実装する。以下のコードはUITableViewDataSourceプロトコルを適用し、プロトコルの必須メソッドの「データを返すメソッド」と「データの個数を返すメソッド」の2つを実装した例。データを返すメソッドでは引数で与えられたインデックスをもとに、インデックス番号が偶数の場合は「TestCell1」、奇数の場合は「TestCell2」の原型セルからインスタンスを作って返すようにした。これにより、セルの背景が青、茶色の交互に表示されるようになる。//偶数行と奇数行で原型セルを変更する。cellName:String//偶数行と奇数行で原型セルを変更する。{super.viewDidLoad()}}以下は実際のプレイ動画セルの設定項目にも色々あり、柔軟なカスタマイズが可能である。Detail、Subtitle、Customの5つの中から選ぶ。セルの中にはタイトルと詳細文の2つを表示することができ、各スタイルによって表示される場所やフォントサイズが変わる。下図はBasicのスタイルで、タイトルのみ表示される。今までのサンプルで見てきたスタイルだ。Detailは左にタイトル、右に詳細文を表示するスタイル。以下のコードはセルにタイトルと詳細文を設定する例。データをカンマで分割し、1つ目をタイトル、2つ目を詳細文(detailTextLabel)に設定している。テーブルビューにタイトルと詳細を表示する。//データをカンマで分割する。テーブルビューにタイトルと詳細を表示する。{//セルを取得する。UITableViewCell//データをカンマで分割する。{super.viewDidLoad()}}下図のように表示される。Detailは、左側に詳細文、右側にタイトルが表示されるスタイルと思いきや、左にタイトル、右に詳細文はそのままに2つが中央寄りに表示される。SubTitleは、タイトルと詳細文の両方が左端に表示される。Customはスタイルを自分でカスタムする。連番とタイトルと詳細文の3つを表示して、フォントカラーを赤、青、黒に分けたい場合を見てみよう。Styleを「Custom」に設定したあと、下図のようにセルの中にラベルの部品を格納する。次に、左端のラベルを選択してアトリビュートインスペクタボタン(黄緑枠)を押して設定画面を開き、設定項目のColorに赤、Tagに1を指定する。Tagはソースコードからこのラベルにアクセスするための識別番号である。続いて、2つ目のラベルはColorに青、Tagに2、3つ目のラベルはColorに黒、Tagに3を指定する。3つのラベルに値を設定するソースコードは以下のようになる。Tag番号でセルに含まれるラベルを取得し値を設定する。//Tag番号でセルに含まれるラベルを取得する。//データをカンマで分割する。//ラベルに値を設定する。{//セルを取得する。UITableViewCell//Tag番号でセルに含まれるラベルを取得する。UILabel//データをカンマで分割する。dataList[indexPath.row].componentsSeparatedByString(",")//ラベルに値を設定する。{super.viewDidLoad()}}実行すると下図のようになる。Detail、SubTitleを選択するとImageの入力項目が現れるので、そこに画像を指定すればセルの中に画像を表示させることができる。下図はBasicでImageを設定した場合Identifierセルの識別子。ソースコードから原型セルを取得する場合に利用する。今まで使ってきたので使い方の説明は割愛する。Selectionセルをクリックしたときの背景色を設定する。Noneは色なし、Blueは青、Grayは灰色、Defaultは灰色。Blueを設定してもなぜか灰色になる事象が発生した。プロパティのselectionStyleをコードから設定しても変更できない。今後理由が分かったときに追記する。ちなみに、セルをクリックしたときの背景色を青色や灰色以外の自分好みの色にしたいときは以下のコードのようにする。UIViewインスタンスを作成して背景色を変えてから、セルの選択時背景色のプロパティに設定する。セルを選択したときの色を指定する。//データをカンマで分割する。//セルを選択したときの色を指定する。セルを選択したときの色を指定する。{//セルを取得する。UITableViewCell//データをカンマで分割する。//詳細文//セルを選択したときの色を指定する。{super.viewDidLoad()}}Accessoryセルの右端にマークをつける。Disclosure(詳細マークと>マーク)、Checkmark(チェックマーク)、Detail(詳細マーク)の4つの中から選択する。Acc.編集モードのときにセルの右端にマークをつける。選択肢はAccessoryと同じ。編集モードについては別の記事で説明する。Styleセルが選択されたときのスタイルをDefault、Customの2つから選択する。利用方法が分かったら追記する。Indentationセルに段落を入れる。Levelはインデントの個数、Widthは1つのインデントの幅を表している。Editing編集モードでインデントをするかどうかの設定のようだが、チェック有無で変化が分からなかった。ShouldIndentWhileEditingプロパティを直接設定しても変化無し。理由が分かったら追記する。Controls並び替えマークを表示するかどうかの設定のようだが、チェック有無で変化が分からなかった。ShowsReOrderControlプロパティを直接設定しても変化無し。理由が分かったら追記する。Separatorセル境界線の左右のスペース。Insetsの2つから選択する。Insetsを設定するとleftとrightの入力欄が表示される。Controllerの使い方。格子状に並んだセルをタップして画面遷移する。Controllerの使い方。マスター部とディテール部に画面分割する。Controllerの使い方。Cellを使ってストーリーボードのみでテーブルを作る。...【Swift】テーブルビューにセクションやインデックスを追加する方法。データを目次のように並べて選択できる入れ物。コメントをキャンセルメールアドレスが公開されることはありません。