今回はUITableViewControllerの使い方についてメモして行きます。
Contents
UITableViewControllerとは
twitterのツイートが並んでいる画面や
LINEの友達一覧、
Facebookの近況など
どんなアプリにもリストってありますよね。
こんな感じに線で区切られたものです。
これをカスタマイズすると
有名アプリのようなおしゃれな感じなります。
作成タイム
まずは、新しいプロジェクト立ち上げ
storyboardを開いてください。
①おそらく、デフォルトのUIViewControllerが置いてあると思います、それを消しましょう！deleteです！
②そしてその真っさらなstoryboardにUITableViewControllerを配置してください
③attributes inspectorボタンをクリックしてください。
④UIViewControllerを消してしまったので、RUN直後に表示されるViewControllerがない状態なので、『is initial view controller』にチェックを入れましょう。
次に 配置したUITableViewControllerに対応したファイルを作成します。
『New File…』をクリックしてください。
そして、左上の『Cocoa Touch Class』を選択してNextをクリック！
ここでsubClassにUITableViewControllerを選択して、
classは『TableViewController』にしましょう！！
するとこのようなファイルが作成されたかと思います。
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import UIKit class TableViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } override func numberOfSections(in tableView: UITableView) -> Int { return 0 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 0 } /* override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) // Configure the cell... return cell } */ /* // Override to support conditional editing of the table view. override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the specified item to be editable. return true } */ /* // Override to support editing the table view. override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) { if editingStyle == .delete { // Delete the row from the data source tableView.deleteRows(at: [indexPath], with: .fade) } else if editingStyle == .insert { // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view } } */ /* // Override to support rearranging the table view. override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) { } */ /* // Override to support conditional rearranging of the table view. override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the item to be re-orderable. return true } */ /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destinationViewController. // Pass the selected object to the new view controller. } */ } |
コメントアウトが長いですねー。。。
でもここが大事なのですよ。
そしてこのように編集してください。
いらない部分は削って
必要な部分はコメントアウトを解除します。
少し数も変えて、
|
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 |
import UIKit class TableViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } override func numberOfSections(in tableView: UITableView) -> Int { return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) return cell } } |
このようにしましょう。
コードの解説！
コードを解説していきます！
numberOfSections
|
1 2 3 4 |
override func numberOfSections(in tableView: UITableView) -> Int { return 1 } |
ここはセクションの数を決めています。今回は１つに設定しました。
実はこのTableView、
セクションとセルという二つの枠で成り立っています。
セクションというのが、大きな枠で、
セクションの中にセルがあります。
numberOfRowsInSection
|
1 2 3 |
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 } |
ここで設定しているのが、
セルの数です。
今回は５つに設定しています。
cellForRowAt （超重要）
|
1 2 3 4 5 6 |
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) return cell } |
ここでは実際に表示されるセルの内容を決める超重要で、一番難しいところです。
デフォルトではコメントアウトされている部分ですが、解除しました。
ここに
|
1 |
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) |
『reuseIdentifier』という名前のセルの内容を決めるよ！
ということが書いてあります。
でもreuseIdentifierなんて名前をセルにつけたおぼえはありませんよね。
今からつけます！！
CellのIdentifier！！！
storyboardをひらいて
①『Table View Cell』をクリック
②毎度のことながらattributes inspectorのボタンをクリック
③Table View CellのIdentifierを『reuseIdentifier』に設定！
これでセルの設定は完了！
次はコードファイルとstoryboardを紐付け！
まずは
①Storyboard上のTableViewControllerの黄色いマークをクリック！
②謎の新聞紙のようなマークをクリック！
③Classを『TableViewController』に設定！
これであらかた終わりです！！
RUNしてみましょう！
おそらく
真っさらさらです！
なぜなら
まだ、セルの内容を書いていないからです。
TableViewController.swiftを
このように編集してください、
|
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 |
import UIKit class TableViewController: UITableViewController { let array = ["天丼","カレー","うな丼","おにぎり","味噌汁"]// 新しく付け足した override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } override func numberOfSections(in tableView: UITableView) -> Int { return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) cell.textLabel?.text = array[indexPath.row]// 新しく付け足した return cell } |
新しく二行足しました。
|
1 |
let array = ["天丼","カレー","うな丼","おにぎり","味噌汁"]// 新しく付け足した |
これはただの配列です。説明は省きます。
|
1 |
cell.textLabel?.text = array[indexPath.row]// 新しく付け足した |
cellのtextLabelのtextを上の配列からとってくる
という処理をしています。
配列は
array[番号]でとってくることができるので、
indexPath.rowという、セル番号をとってくるものをつかって、
セルによって違うものをとってくるように設定しています。
RUNしてみましょう！
このような画面が出てるれば成功です！
こちらのブログのお陰で色々助かりました。
ありがとうございます