今回はTable Viewの使用方法についてみていきます。
Xcode：9.2
Swift：4.0.3
Table Viewを使用すると、データをリスト形式で表示することができます。例えば、リマインダーアプリではTable Viewが使用されていることがわかります。
1.TableViewを配置する
はじめにSingle View Applicationのプロジェクトを作成して、Table Viewを貼り付けます。配置したら、サイズを任意の大きさに変更してください。
2.Table View Cellを配置する
Table Viewに項目を表示する為にはセルが必要です。先ほど配置したTable Viewの上にTable View Cellを1つ配置します。もしくは左側のView Controller SceneのTable Viewの下にTable View Cellをドラッグして配置してもOKです。
3.dataSourceとdelegateの設定
Table Viewのにデータを表示したり操作する為にはdataSourceとdelegateの設定が必要です。
View Controller Sceneの下にあるTable Viewを[control]キーを押しながらドラッグして、View Controllerの上で離します。
すると、メニューが表示されるのでdataSourceを選択します。同様にしてdelegateも選択します。
3.Table View CellをViewController.swiftから操作するための設定
今度はTable View CellをViewController.swiftから操作できるようにします。
はじめにView Controller SceneにあるTable View Cellを選択します。続いて、Show the Attributes inspectorを選択し、最後にIdentifierに「myCell」よ入力します。ここに入力する名前は「myCell」でなくても構いません。
4.ViewController.swiftへの実装
デザインは以上で完了ですので、ViewController.swiftへのコードの実装をしていきます。
はじめに、セルに表示するデータを準備します。ここでは、ライオン、シマウマ、キリンの3つの文字列を表示するようにするため、override func viewDidLoad()の上あたりに、以下のコードを挿入してください。
let animals = ["ライオン","シマウマ","キリン"]
次に、ViewControllerクラスにdataSourceとdelegateを実装します。以下のようにUIViewControllerの右側に、UITableViewDelegateとUITableViewDataSourceを記述します。
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
すると、エラーが表示されるので[Fix]を押して解決させます。
[Fix]を押すと、以下のように2つのメソッドが実装されます。この2つは必須のメソッドなので、「実装されていないよ」という意味でエラーが表示されていたわけです。
上のメソッドはTable Viewに何個のセルを表示するかを指定するためのものです。animalsのデータ全てが表示できるようにする為に、以下のように編集します。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return animals.count
}
もう1つのメソッドは、セルに表示する値を設定するためのものです。
// セルに表示する値を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// データを表示するセルを取得する
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
// セルに表示する値を設定する
cell.textLabel!.text = animals[indexPath.row]
// データを設定したセルを返却する
return cell
}
以上で実装は完了です。実行をしてみると、以下のようにanimalsに設定したデータが一覧となって表示されます。
最後にViewController.swiftの全ソースを以下に示します。
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
let animals = ["ライオン","シマウマ","キリン"]
// Table Viewにいくつのセルを表示するかを指定する
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return animals.count
}
// セルに表示する値を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// データを表示するセルを取得する
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
// セルに表示する値を設定する
cell.textLabel!.text = animals[indexPath.row]
// データを設定したセルを返却する
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
コードはGithubに置いておきます
コメント