本項目ではUITableViewの入門部分を書いていきます。
実装していく上でのステップは以下の通りです。
StoryBoardの設定
StoryBoardを使って
ソースコードのオブジェクトと紐付ける
StoryBoardで設置したオブジェクトをソースコード上で編集できるようにするには「
@IBOutlet」を使います。
IBOutletについては
こちら
どのように実装するかというととってもシンブルです。
以下のように、クラス変数としてUITableView!型の変数を定義してあげます。
class CalculationViewController: UIViewController {
@IBOutlet var tableView : UITableView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
そしたら次は、StoryBoardファイルを開きます。
今回追加したUITalbeViewにカーソルを合わせてメニューを表示します。
Reference Outletsの右にある丸いところからStoryboardへドラッグすると、
Storyboardと紐づいているソースコードで定義されたオブジェクトが表示されます。
デリゲートメソッドの実装
次にデリゲートメソッドを実装します。
デリゲートメソッドに関しては
こちらで説明します。
まずはデリゲートメソッドを使える状態にしましょう。
手順は二つです。
- UITableViewDelegateとUITableViewDataSourceを継承する。
- UITableViewのオブジェクトのdelegateとdataSourceを設定する。
これでUITableViewのデリゲートメソッドを使えるようになります。
class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet var tableView : UITableView!
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.delegate = self
self.tableView.dataSource = self
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
UITableViewのデリゲートメソッドはいくつかあります。
tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? |
セクションのヘッダーのビューを設定する |
numberOfSections(in tableView: UITableView) -> Int |
セクションの数を設定する |
tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int? |
指定したセクションのセルの数を設定する |
tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat |
セクションのヘッダーの高さを設定する |
tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell |
各セルを設定する |
詳しくは
こちら
今回、デリゲートメソッドを使って以下のように実装しています。
//MARK : UITableViewDelegate
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return self.headerView
}
// セクションの数
func numberOfSections(in tableView: UITableView) -> Int {
return //セクションの数
}
// 1セクション毎のセルの数
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return //セルの数
}
// ヘッダーの高さを設定する
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return //ヘッダーの高さの値
}
// セルの高さを設定する
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return //セルの高さの値
}
// MARK: UITableViewDataSource
// セルの内容を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
return //表示したいTableViewCell型のオブジェクト
}
xibファイルでカスタムセルを作成
カスタムビューを作成する手順は以下の通りです。
- 「File -> New -> File」(command + N)から新しくファイルを作成
- 「Cocoa Touch Class」を選択
- 「Subclass of」はUITableViewCellを選択
- 「Also create XIB file」にチェックを入れる
あとは保存先を選択してファイルを作成します。
余談ですが、今回はUITableViewCellでファイルを作ったので「Also create XIB file」にチェックを入れることができましたが、UIViewなどではそうはいきません。
その辺りは
こちらに書きます。
カスタムセルを表示する
では、カスタムセルを実際に表示してみましょう。
手順は以下のような感じです。
- xibファイルを好きなように構成する
- xibファイルを読み込む
- デリゲートメソッドで読み込んだxibファイルを表示する
xibファイルを好きなように構成する
ここは自由です。
まずは、Xibファイルから簡単に作成してみましょう。
ドラッグアンドドロップをしてUIを配置してみてください。
xibファイルを読み込む
では、作ったxibファイルを読み込んで、ソースコードで呼び出せるようにしましょう。
以下のように書くとできます。詳しく知りたい人は
こちら
class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// 読み込むNIBファイルのクラス名
let QUESTION_CELL_NIB = "QuestionCell"
let CHECK_POINT_CELL_NIB = "CheckPointCell"
// TableViewCellの識別子
let QUESTION_CELL_IDENTIFIER = "QuestionCell"
let CHECK_POINT_CELL_IDENTIFIER = "CheckPointCell"
override func viewDidLoad() {
super.viewDidLoad()
let questionNib = UINib(nibName: QUESTION_CELL_NIB, bundle: nil)
self.tableView.register(questionNib, forCellReuseIdentifier: QUESTION_CELL_IDENTIFIER)
}
// 1セクション毎のセルの数
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 100
}
// セルの高さを設定する
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row % 11 == 10 {
return CheckPointCell.cellHeight()
}
return QuestionCell.cellHeight()
}
// MARK: UITableViewDataSource
// セルの内容を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier:
QUESTION_CELL_IDENTIFIER, for: indexPath)
return cell
}
}
最終的なコード
最終的に、以下のようなコードが出来上がります。
UItableViewの初歩はこんな感じです。
お疲れ様です!
import UIKit
class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// 読み込むNIBファイルのクラス名
let QUESTION_CELL_NIB = "QuestionCell"
let CHECK_POINT_CELL_NIB = "CheckPointCell"
// TableViewCellの識別子
let QUESTION_CELL_IDENTIFIER = "QuestionCell"
let CHECK_POINT_CELL_IDENTIFIER = "CheckPointCell"
@IBOutlet var tableView : UITableView!
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.delegate = self
self.tableView.dataSource = self
}
// セクションの数
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
// 1セクション毎のセルの数
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 100
}
// ヘッダーの高さを設定する
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return CalcStatusView.viewHeight()
}
// セルの高さを設定する
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row % 11 == 10 {
return CheckPointCell.cellHeight()
}
return QuestionCell.cellHeight()
}
}