今回は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
}ここはセクションの数を決めています。今回は１つに設定しました。
実はこのTableView、
セクションとセルという二つの枠で成り立っています。
セクションというのが、大きな枠で、
セクションの中にセルがあります。
numberOfRowsInSection
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 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してみましょう！
このような画面が出てるれば成功です！
