しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

Shoyuを使ってUITableViewをすっきり記述する

Shoyuというライブラリを使ってUITableViewを扱いやすくしました。

インストール

インストールはCocoaPods経由で行います。

pod "Shoyu"

使い方

普通にUITableViewを使う場合、以下のような書き方になります。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.delegate = self
        tableView.dataSource = self
    }
}

extension DetailViewController: UITableViewDelegate, UITableViewDataSource {
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        return UITableViewCell()
    }
}

Shoyuを使うと以下のように書き換える事ができます。

import Shoyu

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSection { section in
                section.createRow { row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                }
            }
        }
    }
}

Sectionが複数の場合はcreateSectionsの引数に数字を渡します。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSections(2) { index, section in
                section.createRow { row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                }
            }
        }
    }
}

数字の代わりに配列を渡す事もできます。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSections(["Section1", "Section2"]) { element, section in
                section.createRow { row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                }
            }
        }
    }
}

rowもsectionと同じように増やす事ができます。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSection { section in
                section.createRows(5) { indx, row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                }
            }
        }
    }
}

didSelectなどのイベントもセットする事ができます。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSection { section in
                section.createRows(5) { indx, row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                    
                    row.didSelect = { _ in
                        print("didSelect")
                    }
                }
            }
        }
    }
}

Sectionのヘッダーやフッターも簡単に作れます。
全体的にとても分かりやすくて使いやすいです。

class DetailViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tableView.source = Source() { source in
            source.createSection { section in
                section.createRows(5) { indx, row in
                    row.reuseIdentifier = "Cell"
                    row.height = 52
                    row.configureCell = { cell, _ in
                        cell.textLabel?.text = "row 1"
                    }
                    
                    row.didSelect = { _ in
                        print("didSelect")
                    }
                }
                
                section.createHeader { header in
                    header.title = "TITLE"
                }
            }
        }
    }
}