Contents
UITableView
今回は
UITableViewについてです。
UITableViewを使うには、
アプリ開発の最初の関門である『delegate』『datasource』を使用します。
この辺は本当にわけがわからないので、整理しておこうと思いました。
ではでは、始めていきます。
プロジェクトを立ち上げてください
Storyboardを開いてください。
デフォルトで置いてあるViewControllerに
UITableViewをこんな感じに配置してください。
しかしこれでは機能しません。
UITableViewCellを置いてあげましょう。
UITableViewCell
CellはTableViewの中のSectionの中にあります。
cell in section in tableview ですね
つまり行です。
ざっくりいうと、tableViewに表示されるデータはCell（row）で表示されるということです。
それでは、UITableViewCellを置いてあげましょう。
このようになれば大丈夫です。
するとこんな感じの注意が出てくるかと思います。
[Prototype table cells must have reuse identifiers]
これは『CellにはIdentifierが必要だよ！』という意味です。
Identifierとは
Identifierとは『識別子』の意味です。
swift限定のものではなく、プログラミングをしているとよく見る単語です。
識別子とは
識別子とは、オブジェクトに固有の番号や文字列をつけて、
他のものと区別するためのものです。
要は名前です。
では、CellにIdentifierを入れていきます。
TableViewCellを選択すると、
attributes inspectorで
Identifierの入力ができます。
『beginnerCell』にします。
すると今まで出ていた注意が消えるはずです。
次にTableViewをコードと紐付けましょう。
場所はviewDidLoadの上あたり、
名前は『tableView』。ひねりがないですね。。。
そろそろdatasource delegateのところです。
TableViewのDelegate・Datasourceについて
このようにViewControlllerを編集してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{ // UITableViewDelegate を追加 // UITableViewDatasource を追加 @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self //追加 tableView.delegate = self // 追加 } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } |
ようやくここまできました。
なぜこれらが必要なのか、
それは、デフォルトのViewControllerには、tableViewCellの高さや、内容を決めることができないからです。
そこで
|
1 |
UITableViewDelegate, UITableViewDataSource |
や
|
1 2 |
tableView.dataSource = self //追加 tableView.delegate = self // 追加 |
を追加することで
ViewControllerをカスタムし、
TableViewCellの高さや内容を決めることができるようにしたのです。
こういった記述はTableViewControllerには必要ありません。
今回、ViewControllerを使用したためにdelegateやdatasourceを追加する必要があったのです。
それでは、その高さや内容を決めていきましょう。
ViewControllerをこのように編集してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{ @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self tableView.delegate = self } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // 一つのsectionの中に入れるCellの数を決める。 return 10 } func numberOfSections(in tableView: UITableView) -> Int { // sectionの数を決める return 1 } func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { // Cellの高さを決める return 50 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Cellの内容を決める（超重要） let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath) //ここで先ほど指定した『beginnerCell』を呼んでる。 cell.textLabel?.text = "swift" return cell } } |
numberOfRowsInSection
このメソッドでセクションの中にあるセル(行)の数を指定します。
とりあえず、１０としていますが、後でまた変えます。
numberOfSections
このメソッドでセクションの数を決めます。
これは後で変えたりしません。
heightForRowAt
このメソッドでセルの高さを指定してます。
見ての通りですね。
50にした理由はなんとなくです。
cellForRowAt
このメソッドでセルの内容を決めます。
ちょっと難しいです。
特にこの
|
1 |
let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath) |
が難しいです。
ここでは先ほど指定した『beginnerCell』を引っ張ってきています。
そして、
そのbeginnerCellに”swift”という文字を表示させるようにしています。
|
1 |
cell.textLabel?.text = "swift" |
runしてみましょう。
このようになれば成功です！
もう少し、
深く掘り下げます。
このままでは、どのセルにも同じ文字しか表示できません。
ViewControllerをこのように編集しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{ @IBOutlet weak var tableView: UITableView! let array:[String] = ["swift","Ruby","Rails","PHP","HTML.CSS","JS","Java"] override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self tableView.delegate = self } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // 一つのsectionの中に入れるCellの数を決める。 return array.count // 上に定義した配列arrayの要素数 } func numberOfSections(in tableView: UITableView) -> Int { // sectionの数を決める return 1 } func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { // Cellの高さを決める return 50 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Cellの内容を決める（超重要） let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath) //ここで先ほど指定した『beginnerCell』を呼んでる。 cell.textLabel?.text = array[indexPath.row] // indexPath.rowはセルの番号 return cell } } |
これで完成です！
が
加えたコードの解説をします！
これはただの配列です。
|
1 |
let array:[String] = ["swift","Ruby","Rails","PHP","HTML.CSS","JS","Java"] |
セルの数を配列の数と同じにしました。
|
1 2 3 4 5 |
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // 一つのsectionの中に入れるCellの数を決める。 return array.count // 上に定義した配列arrayの要素数 } |
配列arrayの内容をセルに表示させます。
indexPath.rowによってセル番号を取得し、
セル番号とarrayの番号と同じものを表示できるようにしました。
|
1 2 3 4 5 6 7 8 9 10 11 |
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Cellの内容を決める（超重要） let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath) //ここで先ほど指定した『beginnerCell』を呼んでる。 cell.textLabel?.text = array[indexPath.row] // indexPath.rowはセルの番号 return cell } |
これにて終了！！！
コメント