【Swift4.0】初心者向けにTableViewで複数セクションの表示と折りたたみをまとめてみた【iOS】

スポンサーリンク

テーブルビューの実装について、まとまった情報が無かったので、集約的な意図も込めてテーブルビューの基本的な実装をまとめました。

とりあえずサンプルが欲しいって人は下の方にあります。初心者の自分が作成したので、初心者向けです。

この記事でできること

  • テーブルビューの表示
  • 複数セクションでの表示
  • セクション単位のテーブルの折りたたみ
  • セルをスワイプしての削除
  • セルをタップして値を表示



Storyboard

Storyboardの設定は「TableView」を配置しただけです。吹き出しの項目以外は今回は特に気にしてません。配置したTableViewを「myTableView」としてViewControllerに接続しています。

テーブルの表示

まず初めにテーブルの表示のためには、下記のデリゲートの設定が必要となります。

  • UITableViewDelegate
  • UITableViewDataSource
続いてテーブルを表示するために必要なメソッドを実装します。テーブルの表示するためには、メソッドが2つ必要になります。

  • テーブルビューに表示するセルの数を返すメソッド
  • テーブルビューに表示するセルを返すメソッド
セルの数を返す際には、DataSource(items1)の配列の要素数を返しています。

セルの返却では、「withIdentifier」にStoryboard作成時に入力したセルの識別子を指定しセルを取得後、items1の要素をセルの値(text)に設定しています。

ここまで実装した状態だとこうなります。

背景色はStoryboardでセルに設定しています。データが表示されていないところはセルが設定されていないため背景色はデフォルトになります。テーブルビュー全体に背景色を設定したい時には下記のようにすれば、色の指定ができます。

複数セクションの表示

続いて複数セクションの表示です。セクションの表示のためには下記のメソッドを用意します。

  • テーブルビューに表示するセクションの数を返すメソッド
  • テーブルビューに表示するセクションのタイトルを返すメソッド

また、上に書いたセルの数を返すメソッドはセクションごとにセルの数を返すように変更します。

テーブルの折りたたみ

セクションの表示ができたので、今度はセクション単位でセルを折りたたみできるようにします。
テーブルの折りたたみのためには、タップされたセクションを取得する必要があります。下記のような実装をします。

  • セクションのヘッダ部分にView設定する。
  • Viewにタップアクションを設定する。
  • タップされたセクションの表示セルの数を「値を表示してれば0」、「0だったらセルの数」として再読込する。

「セクションのタイトルを返す」メソッドについては、Viewを設定するメソッドが代替となるため不要になります。
サンプルはフラグでセクション毎の折りたたみ状態を制御しています。セクションをタップしたらフラグを変更して、再度セクションを読み込みます。

セルの削除とタップ

セルの表示が完了したので、最後はセルの削除とタップして値を表示します。これらもテーブルビューのメソッドを実装することで実現できます。

  • テーブルビューのセルをスワイプするアクションのメソッド
  • テーブルビューのセルを選択した時のメソッド

スワイプのアクションのメソッドでは、データソースの配列データを削除するとともにテーブルビューの列も削除しています。

セル選択ではセルの値を取得して、アラートで表示しています。


スポンサーリンク

サンプル

GitHub:Mitsuya-Daisa/FoldingTableView

参考にさせて頂きました

 

 

スポンサーリンク

4 件のコメント

  • こんにちは!
    cellForRowAtのコードですが、最初のコードでは
    cell.textLabel?.text = items1[indexPath.row] as? String
    になっているかと思いますが、複数セクションではどのように設定されていますか?

    • こんにちは!
      コメントありがとうございます!

      cellForRowAtについて複数セクションの対応がされていませんでした、、、すみません。
      sectionが複数になっているので、下記のようにループして一つずつ設定する形としています。

      for (value) in sections[indexPath.section].values
      {
      cell.textLabel?.text = value[indexPath.row] as? String
      }

      記事の方のコードも修正していますので、参考にしてください!

  • ありがとうございます!
    とりあえず、indexPath.section をifで対応していたのですが、数が固定されてしまうため困ってました!
    早速試してみます!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です