如何在快速游乐场制作自定义tableview单元格?

时间:2017-03-30 19:26:23

标签: ios swift xcode

在swift playground (不在项目中) 能否请你给我一个关于如何做到这一点的提示?enter image description here

2 个答案:

答案 0 :(得分:3)

您必须在自定义类中实现init(style:reuseIdentifier:)以编程方式定义子视图和约束。

因此:

import UIKit
import PlaygroundSupport

class CustomCell: UITableViewCell {
    weak var label1: UILabel!
    weak var label2: UILabel!

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        let label1 = UILabel()
        label1.translatesAutoresizingMaskIntoConstraints = false
        label1.font = .preferredFont(forTextStyle: .title1)
        label1.backgroundColor = #colorLiteral(red: 0.572549045085907, green: 0.0, blue: 0.23137255012989, alpha: 1.0)
        label1.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        contentView.addSubview(label1)
        self.label1 = label1

        let label2 = UILabel()
        label2.translatesAutoresizingMaskIntoConstraints = false
        label2.font = .preferredFont(forTextStyle: .title1)
        label2.backgroundColor = #colorLiteral(red: 0.0901960805058479, green: 0.0, blue: 0.301960796117783, alpha: 1.0)
        label2.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        contentView.addSubview(label2)
        self.label2 = label2

        NSLayoutConstraint.activate([
            label1.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            label2.leadingAnchor.constraint(equalTo: label1.trailingAnchor, constant: 10),
            contentView.trailingAnchor.constraint(equalTo: label2.trailingAnchor, constant: 10),
            label1.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            label2.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            contentView.bottomAnchor.constraint(equalTo: label1.bottomAnchor, constant: 10),
            contentView.bottomAnchor.constraint(equalTo: label2.bottomAnchor, constant: 10),
            label1.widthAnchor.constraint(equalTo: label2.widthAnchor)
            ])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

然后你会有一个标准的UITableViewController注册这个类并使用它:

class ViewController: UITableViewController {
    var objects: [String] = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .spellOut
        return Array(0 ..< 1000).flatMap { formatter.string(from: NSNumber(value: $0)) }
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(CustomCell.self, forCellReuseIdentifier: "CustomCell")

        // set it up to let auto-layout resize the cell

        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 44
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return objects.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

        cell.label1.text = objects[indexPath.row]
        cell.label2.text = "Row \(indexPath.row)"

        return cell
    }
}

PlaygroundPage.current.liveView = ViewController()

现在只需创建一个这样的简单视图:

enter image description here

那不是很漂亮,但我像我一样设置背景颜色,这样你就可以看到框架设置得恰到好处。您显然需要调整init(style:reuseIdentifier:)以根据自己的喜好创建子视图。

如果您需要标准单元格,则不需要自定义单元格子类,但只能使用UITableViewCell

import UIKit
import PlaygroundSupport

class ViewController: UITableViewController {
    var objects: [String] = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .spellOut
        return Array(0 ..< 1000).flatMap { formatter.string(from: NSNumber(value: $0)) }
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 44
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return objects.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

        cell.textLabel?.text = objects[indexPath.row]

        return cell
    }
}

PlaygroundPage.current.liveView = ViewController()

在iPad上,产生:

enter image description here

在Xcode的Playground上,它产生:

enter image description here

答案 1 :(得分:0)

完全归功于@Rob,这是他的答案的调整,但在尝试直接将单元格添加到表格视图无效(单元格似乎忽略显式大小调整)后,我将其视图控制器缩减为通用的为了便于重复使用。

    class DashboardViewController<T: UITableViewCell>: UITableViewController {

        override func viewDidLoad() {
            super.viewDidLoad()

            tableView.register(T.self, forCellReuseIdentifier: "Cell")

            // set it up to let auto-layout resize the cell
            tableView.rowHeight = UITableViewAutomaticDimension
            tableView.estimatedRowHeight = 44
        }

        override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 1
        }

        override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! T
            configure(cell)
            return cell
        }

        var configure: ((T) -> ())!

        static func with(configuration: ((T) -> ())!) {
            let controller = DashboardViewController<T>()
            controller.configure = configuration
            PlaygroundPage.current.liveView = controller
        }
    }

    // usage:
    DashboardViewController<MyCustomCell>.with() { cell in
        let model = MyCellModel()
        cell.model = model }