今回は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』にしましょう!!
するとこのようなファイルが作成されたかと思います。
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. } */ }
コメントアウトが長いですねー。。。
でもここが大事なのですよ。
そしてこのように編集してください。
いらない部分は削って
必要な部分はコメントアウトを解除します。
少し数も変えて、
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
override func numberOfSections(in tableView: UITableView) -> Int { return 1 }
ここはセクションの数を決めています。今回は1つに設定しました。
実はこのTableView、
セクションとセルという二つの枠で成り立っています。
セクションというのが、大きな枠で、
セクションの中にセルがあります。

numberOfRowsInSection
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 }
ここで設定しているのが、
セルの数です。
今回は5つに設定しています。
cellForRowAt (超重要)
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) return cell }
ここでは実際に表示されるセルの内容を決める超重要で、一番難しいところです。
デフォルトではコメントアウトされている部分ですが、解除しました。
ここに
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を
このように編集してください、
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 }
新しく二行足しました。
let array = ["天丼","カレー","うな丼","おにぎり","味噌汁"]// 新しく付け足した
これはただの配列です。説明は省きます。
cell.textLabel?.text = array[indexPath.row]// 新しく付け足した
cellのtextLabelのtextを上の配列からとってくる
という処理をしています。
配列は
array[番号]でとってくることができるので、
indexPath.rowという、セル番号をとってくるものをつかって、
セルによって違うものをとってくるように設定しています。
RUNしてみましょう!
このような画面が出てるれば成功です!