LoginSignup
17

More than 5 years have passed since last update.

[Swift] Custom Cell を使って TableView をいい感じに実装する - 最初の一歩

Posted at

はじめに

TableViewをいい感じに作りたいので、いい感じにカスタムしたいと思い、Custom Cellを扱ってみることにしました。

Swift幼稚園児の備忘録です。

手順

1. StoryboardでTableViewを設置

2. Prototype CellsにTitleとSubTitleのlabelを設置

ここで好きなようにレイアウトする

Screen Shot 2015-08-17 at 13.52.33.png

3. Tableに表示するDataModelを作成

ここでデータを管理します。
DBから読んでもいいし、直書きでもいいし、ここにまとめるとスッキリしていいかもしれないです。

FooTableDataModel.swift
import Foundation

class FooTableData {
    class FooTableDataModel : NSObject {
        var title: String
        var subTitle: String

        init(title: String, subTitle: String){
            self.title = title
            self.subTitle = subTitle
        }
    }
    let items = [
        FooTableDataModel(title: "title 1", subTitle: "subTitle 1"),
        FooTableDataModel(title: "title 2", subTitle: "subTitle 2"),
        FooTableDataModel(title: "title 3", subTitle: "subTitle 3"),
        FooTableDataModel(title: "title 4", subTitle: "subTitle 4")
    ]    
}

4. Custom Cellの作成

UITableViewCellのサブクラスを作成。

FooTableViewCell.swift
import UIKit

class FooTableViewCell: UITableViewCell {

    // これは後からStoryboardでOutlet接続するので、実際にはこのタイミングでこれらのコードは記載しません。
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var subTitle: UILabel!
    // ここまで

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

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

}

5. TableViewControllerの作成

UITableViewControllerのサブクラス。

import UIKit

class FooTableViewController: UITableViewController {

    let ftd = FooTableData()

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

    override func numberOfSectionsInTableView(tableView: UITableView) -> {
        return 1
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) ->; Int {
        return ftd.items.count
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) ->; UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as FooTableViewCell // ここを忘れないように
        let item = ftd.places[indexPath.row]
        let title.text = item.title
        let subTitle.text = item.subTitle
        return cell
    }
}

6. cellのcustom classとidentifierを設定

custom class

  1. Storyboardで対象のTableViewの中のセルを選択。
  2. custom class欄から、classをFooTableViewCellを選択

identifier

  1. Table View Cell欄から、identifierをcellに設定。

7. titleとsubTitleのラベルからFooTableViewCellにOutlet接続して、IBOutletを作成。

8. ViewControllerのクラスを設定

  1. Storyboardで対象のTableViewのViewControllerを選択
  2. CustomClass欄から、classをFooTableViewControllerに設定。

References

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17