TableViewとは
UITableViewは、配列などのデータ構造で格納されたデータを、リスト形式で画面上に表示する場合に使用するツールです。
特に、iPhoneのアプリケーションでは、設定画面や情報の一覧表示など、さまざまな場面でUITableViewが利用されています。例えば、iPhoneの設定アプリケーションを開くと、その中での多くのリスト表示はUITableViewが使用されています。
UITableViewの中で、1つの表示項目を「セル」と呼びます。これらのセルの表示や振る舞いをカスタマイズする際には、UITableViewCellというクラスを使用します。UITableViewCellは、テキスト、画像などのコンテンツを表示するためのさまざまなプロパティやメソッドを提供しています。
そして、UITableViewを適切に機能させるためには、2つの重要な機能、「delegate」と「datasource」を使用する必要があります。これらは、テーブルの表示内容やユーザーのアクションに対する応答を制御するためのものです。delegateは、セルの選択や編集などのアクションに関する処理をハンドリングします。一方、datasourceは、テーブルに表示する具体的なデータ内容やセクション数、セル数などを提供する役割を果たします。
TableViewの使い方
storyboard上の操作
XCodeのプロジェクトを立ち上げたら、Main.storyboardから「Table View」を配置します。
続いて、配置したTableViewを画面いっぱいにします。
ここで、先ほど出てきた「delegate」と「datasource」をstoryboardに繋ぐ設定を行います。
まず、storyboardを選択する。その後、TableViewを選択します。次に、下の写真のTableViewの赤い四角からオレンジ色の円(ViewControllerのボタン)を囲ってる赤い四角にcontrollerを押しながらドラックします。
そうすると、以下のような画面が表示されるので、dataSourceとdelegateを選択しましょう。選択すると以下の画面のようにdataSourceとdelegateの隣に○が現れます。
そして、TableViewCellを画面に配置します。
最後に、storyboard上でTableViewCellのIdentifierに「Cell」と入力します。
これで、storyboard上の操作は以上です。
ViewController上の操作
手始めに、TableViewをViewControllerに追加します。
以下のコードを加えてください。
@IBOutlet weak var TableView: UITableView!
続いて、TableViewのDatasourceとDelegateを使用するため、以下の画面のコードを追加します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource
ただし、このコードを追加しただけでは、以下のようなエラーが出てきます。
Type 'ViewController' does not conform to protocol 'UITableViewDataSource'
Do you want to add protocol stubs?
この時、右下にFixというボタンが現れるので、そのボタンをクリックしてください。
そうすると、以下の写真の赤い四角のようなコードが出現すると思います。
この場所ではおかしいので、override func viewDidLoad()の下に持っていきましょう。
続いて、TableViewにデータを表示するために以下のような配列を用意しましょう。
let country = ["Japan", "Singapore", "USA", "China", "India"]
最後に、埋めていなかった二つの関数の中身を埋めていきましょう。まず、1つ目は以下のコードのように埋めてください。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return country.count
}
以下にこのコードの詳解を書きます。
tableView(_:numberOfRowsInSection:)は、指定されたセクションにいくつの行があるかをTableViewに伝えるためのものです。
tableView: 対象となるテーブルビューです。
section: 行数を知りたいセクションの番号です。
return: このメソッドは、指定されたセクションの行数を整数で返します。
よって、このコードの場合では、country配列の要素数に基づいて行数を返しています。したがって、country配列に5つの国名が含まれているため、テーブルビューには5行のセルが表示されます。
続いて、２つ目のコードは以下のように埋めましょう。
// セルを取得する
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
// セルに表示する値を設定する
cell.textLabel!.text = country[indexPath.row]
return cell
tableView(_:cellForRowAt:)は、テーブルビューの指定された位置に表示するセルを提供する役割を果たしています。
tableView: 対象となるテーブルビュー。
indexPath: 表示するセルの位置を示すIndexPathオブジェクト。
このオブジェクトにはsectionとrowの2つのプロパティがありますが、今回はrowのみが使用されています。
dequeueReusableCell(withIdentifier:for:)は、再利用可能なセルをテーブルビューから取得するものです。withIdentifier: "Cell"は、事前に登録されたセルの識別子です。
再利用可能なセルがキューに存在すれば、そのセルが返されます。存在しない場合、新しいセルが作成されて返されます。
cell.textLabel!.text: セルのテキストラベルのテキストプロパティ。このプロパティを使用して、セルに表示するテキストを設定しています。
country[indexPath.row]: country配列から対応する行のデータ（国名）を取得しています。
return cellでは、設定が完了したセルを返しています。これにより、テーブルビューはこのセルを指定された位置に表示します。
このtableView(_:cellForRowAt:)メソッドは、テーブルビューがセルを表示する際に呼び出されます。指定されたindexPathに対応するデータをセルにセットし、そのセルをテーブルビューに返しています。
以上がTableViewの使い方になります。実行して試してみてください！
最後に全コードを載せます。
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var TableView: UITableView!
let country = ["Japan", "Singapore", "USA", "China", "India"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return country.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// セルを取得する
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
// セルに表示する値を設定する
cell.textLabel!.text = country[indexPath.row]
return cell
}
}