UITableViewのスタイルを使い分ける

UITableViewの2つのスタイル「Plain」と「Groupd」の違いを説明します。

iOS 7より前のバージョンでは、Groupdでセルの囲みが丸くなるはっきした違いがありましたが、iOS 7以降では違いが分かりづらくなっています。

とはいえ違いが存在していることは確かなため、細かい違いを意識してスタイルを正しく使い分けることが重要となっています。

Plainスタイル

PlainとGroupdのテーブルビューの違いを確認するため、2つのセクションを持つテーブルビューの簡単なサンプルプログラムを作成します。

なおUITableViewをソースコードから生成する場合は、UITableView生成時にスタイルとして、UITableViewStylePlainまたはUITableViewStyleGroupedを指定できますが、今回はInterface Builderを使用する方法を解説します。

Main.storyboardをクリックし、Interface BuilderでView Controllerの上にTable Viewを設置します。Table ViewのスタイルをPlainに変更し、Table ViewのdataSourceをView Controllerに設定しておきます。

ソースコードを以下の様に実装します。

class FirstViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    
    var sections = ["国名", "都道府県"]
    
    var countries = ["日本", "アメリカ", "中国", "ロシア", "ドイツ", "フランス"]

    var prefectures = ["東京", "千葉", "神奈川", "埼玉", "大阪", "名古屋", "北海道"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "myCell")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return sections.count
    }
    
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sections[section]
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        var rows = 0
        if section == 0 {
            rows = countries.count
        } else if section == 1 {
            rows = prefectures.count
        }
        return rows
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("myCell", forIndexPath: indexPath)
        var text = ""
        var color = UIColor.whiteColor()
        if indexPath.section == 0 {
            text = countries[indexPath.row]
            color = UIColor.grayColor()
        } else if indexPath.section == 1 {
            text = prefectures[indexPath.row]
            color = UIColor.orangeColor()
        }
        cell.textLabel?.text = text
        cell.backgroundColor = color
        return cell
    }
}