UItable ViewCell 사용자 정의

Playground에서 UItableView의 Cell 사용자 정의를 시도했습니다.
실제 시스템 및 에뮬레이터를 통해 UI를 확인하면서 손쉽게 조정할 수 있습니다.
단계는 다음과 같습니다.

1. Play ground를 엽니다.

Playground에서 Playground를 엽니다.

2. 소스 코드를 붙여넣습니다.

Playground에 다음 코드를 붙여넣습니다.코드의 내용은 ViewController에 UItableView와 같은 간단한 코드를 표시하는 것입니다.
표시된 셀의 내용은 Custom TableViewCell에 기술되어 있습니다.

import UIKit
import XCPlayground

class CustomTableViewCell: UITableViewCell{
    override func setNeedsLayout() {
        super.setNeedsLayout()

        // ここを書き換えることで UI の調整をする
        var label = UILabel(frame: CGRectMake(100, 10, 200, 50))
        label.text = "test label"
        self.addSubview(label)
    }
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var tableView: UITableView!
    let items = ["Item 1", "Item 2", "Item 3"]

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
        self.tableView = UITableView(frame:self.view.frame)
        self.tableView!.dataSource = self
        self.tableView!.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
        self.view.addSubview(self.tableView)
    }

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

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        var cell = CustomTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
        let text = self.items[indexPath.row]
        cell.textLabel?.text = text
        return cell
    }
}

var ctrl = ViewController()
XCPShowView("Playground tableview", ctrl.view)

3. Playground에 UI 표시

플레이그라운드의 평가 결과 옆에 나타난 원형 아이콘을 클릭하면 UI가 표시됩니다.

4. 코드를 다시 써서 미세하게 조정한다

Custom의 UItable ViewCell 컨텐트를 변경하여 UI를 변경하려는 UI로 만듭니다.
예를 들어 label의 배경을 녹색으로 바꾸는 코드를 추가합니다.

        label.backgroundColor = UIColor.greenColor()

따라서 다음과 같은 변경 사항이 자동으로 반영됩니다.

Playground에서 Custom Cell을 조정하면 완료 후 프로젝트에 복사하기 쉽습니다.
UICollectionView의 셀 조정 샘플은 여기.입니다.