はじめに

久しぶりのプログラミング記事です^^; 今回はUITableViewの説明を行います!

UITableViewはUIButton、UILabelやUITextViewと比べて使い方が複雑ですが、よく使うのでじっくり学習してUITableViewの使い方をマスターしましょう!

Xcodeの基本的な使い方は以下を参考にしてください!

Xcodeの基本的な開発の流れ

UITableViewとは

UITableViewとは

UITableViewとはリスト形式で表示させるコントロールです。ほとんどのアプリでUITableViewが使用されていますので、使い方をしっかりマスターする必要がありますね〜

以下の設定アプリはUITableViewでリスト表示されています。

Simulator Screen Shot 2016.08.20 23.55.56

 

CellとSectionについて

UITableVeiwの1つ1つの項目をCellといい、複数をCellをまとめたものをSectionといいます。

Simulator_Screen_Shot_2016_08_21_0_11_44

 

UITableViewを配置する

Table Viewを配置する

まずはMain.storyboardに「Table View」を配置しましょう!ユーティリティエリアから「Table View」をドラッグして画面に配置します。

スクリーンショット_2016-08-20_23_00_35_2

 

常に画面中央に配置して画面フルに表示されるように調整します。

画面の表示位置を決めます。「Horizontally in Container」と「Vertically in Container」の2つにチェックを入れて「Add 2 Constraints」を選択します。

スクリーンショット_2016-08-20_23_00_48

 

次にTable Viewを画面いっぱいに表示させるようにします。上下左右の端からの距離を0に設定して「Add 3 Constraints」を選択します。

スクリーンショット_2016-08-20_23_38_07

これでTable Viewが画面いっぱいに表示されます。

 

Table View Cellを配置する

Table Viewに重ねるようにユーティリティエリアから「Table View Cell」をドラッグして配置します。

スクリーンショット_2016-08-20_23_00_35

 

Table View Cell のプロパティ「identifier」を設定します。「MyCell」と設定しました!

スクリーンショット_2016-08-20_23_03_11

 

Outletの設定を行う

Table Viewをプログラムから操作するために、Outletを設定しましょう!

エディタを表示させTable Viewをcontrolキーを押しながらエディタにドラッグします。Connectionが「Outlet」になっていることを確認して名前を決めます。

スクリーンショット_2016-08-20_23_04_04

 

UITableViewの表示内容を設定する

UITableViewDelegateとUITableViewDataSourceを追加する

エディタを表示させていよいよプログラムを記述していきましょう!

「ViewController.swift」を開いて上部のクラス宣言している部分に「UITableViewDelegate」、「UITableViewDataSource」の記述を追加します。エラーが発生しますが現時点では気にしないでくださいね〜

 

UITableViewに表示する内容を配列で用意する

UITableViewのCellとSectionに表示させる内容を配列で用意します。

Sectionに表示させる内容を以下のように配列「mySection」で宣言しています。

 

各Sectionに表示させるCellの内容を以下のように配列「myManItems」「myWomanItems」で宣言しています。

 

UITableViewを関連付ける

プログラム開始時にUITableViewを関連付けます。以下のようにOutlet「MyUITableView」のdataSourceとdelegateをselfに設定します。

 

Sectionの数を設定する

以下の関数「numberOfSectionsInTableView」を作成してSectionの数を返します。関数の定義はコード補完で簡単に入力できます。

上記のSectionを表示する配列「mySection」の要素数を返しています。

 

Cellの数を設定する

以下のように関数「tableView」を作成してCellの数を返します。引数「section」は選択されたsectionの番号が0からの順番で返ってきます。

sectionは配列「mySection」で設定するのでsectionが0の場合は「男の子の名前」、1の場合は「女の子の名前」という内容になります。

なので〜 sectionが0の場合は男の子の名前の配列「myManItems」、sectionが1の場合は女の子の名前の配列「myWomanItems」の要素数を返しています。

 

Sectionに表示する内容を設定する

以下の関数tableViewでSectionに表示する内容を設定します。引数sectionは上記の引数sectionと同じように0から順番で返ってくるので配列「mySection」の各要素の内容を返します。

 

Cellに表示する内容を設定する

以下のようにCellに表示する内容を返します。

Cellの内容はUITableViewCell型で返さないといけないので「cell」という名前の変数を用意してCellの内容を返しています。

引数indexPathのsectionプロパティで選択されたsection、rowプロパティもsectionと同様に0からの順番で返ってきて、選択されたCellがわかるので、それぞれに対応した変数「myManItems」と「myWomanItems」の各要素の内容を返しています。

以上でUITableViewに表示する内容を設定することができました!

 

UITableViewで選択した時にどう処理するか記述する

以下の関数がUITableViewで選択された時に呼び出されます。UITableViewが選択されたsectionの番号、Cellの番号、Cellの内容をログとして表示するようにしました!

 

上記の記述した「VeiwController.swift」全ての内容は以下のようになります。

 

 

iOSシミュレータで実行してみよう!

上記のプログラムをiOSシミュレータで実行すると以下のようになります!お疲れ様でした!

スクリーンショット_2016-08-23_21_56_53

 

まとめ

  • UITableViewの1つ1つの項目をCell、複数のCellをまとめたものをSectionという
  • Main.storyboardにTable View、Table View Cellを配置する
  • SectionとCellに表示する内容を配列で宣言する
  • プログラムでSectionとCellの数を配列を利用して設定する
  • プログラムでSectionとCellの内容を配列を利用して設定する

これからもがんがんプログラムを解説していきます!

 

参考サイト

UITableViewでテーブルを表示 – Swift Docs

セクション分けしたUITableViewを作る – Swift Docs

 

参考書籍

 

↓ プログラミングを本格的に学びたい方はこちら!