Contents
UITableView
今回は
UITableViewについてです。
UITableViewを使うには、
アプリ開発の最初の関門である『delegate』『datasource』を使用します。
この辺は本当にわけがわからないので、整理しておこうと思いました。
ではでは、始めていきます。
プロジェクトを立ち上げる
Storyboardを開いてください。
デフォルトで置いてあるViewControllerに
UITableViewをこんな感じに配置してください。
しかしこれでは機能しません。
UITableViewCellを置いてあげましょう。
UITableViewCell
CellはTableViewの中のSectionの中にあります。
cell in section in tableview ですね
つまり行です。
ざっくりいうと、tableViewに表示されるデータはCell（row）で表示されるということです。
それでは、UITableViewCellを置いてあげましょう。
このようになれば大丈夫です。
するとこんな感じの注意が出てくるかと思います。
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 } |
これにて終了！！！
