UITableView中的UIView添加自定义class

Question

我用paint code app做了一些图标：

class addIconView: UIView {
    override func draw(_ rect: CGRect) {
      TodayIcon.draw(frame: rect)
    }
 }

我还在另一个class中添加了单元格的配置：

class OptionsTableCell {
    var icon: UIView
    var label: String

    init(icon: UIView, label: String) {
        self.icon = icon
        self.label = label
    }
}

然后我在 TableView 的原型单元格中添加了一个 UIView。我使用这个数组来更新单元格的图标：

var optionsArray: [OptionsTableCell] = []

func createOptionsArray() -> [OptionsTableCell] {

    var cell: [OptionsTableCell] = []

    let addIcon = OptionsTableCell(icon: addIconView(), label: "Add")

    cell.append(addIcon)

    return cell
}

我刚刚添加了 addIconView() 来更新单元格的图标。我觉得不对。

如何更新 UIView 的自定义 class 以更改其中的图标？

Answer 1

不是在单元格中使用通用的 UIView，而是将其子class 为一个新的 class，它封装了要显示的图标类型。考虑这个例子：

UIView subclass 围绕 PaintCode 封装了图标逻辑。注意 Option 枚举和 @IBDesignable 属性（允许在 Interface Builder 中实时渲染）：

import UIKit

@IBDesignable class OptionsView: UIView {

    // MARK: - Properties

    // Allowed options.
    enum Option {
        case star, tree
    }

    // Option that should currently be displayed. Default is .star (for no particular reason).
    var currentOption: Option = .star {
        didSet {
            setNeedsDisplay() // Force redrawing.
        }
    }

    // MARK: - Lifecycle

    override func draw(_ rect: CGRect) {
        drawIcon(rect)
    }
}

// MARK: - Private

private extension OptionsView {

    /// Logic to decide which icon to display.
    func drawIcon(_ rect: CGRect) {
        switch currentOption {
        case .star:
            StyleKit.drawStarIcon(frame: rect)
        case .tree:
            StyleKit.drawTreeIcon(frame: rect)
        }
    }
}

故事板配置：自定义 UITableViewController + 自定义 UITableViewCell 和自定义 UIView（注意类型 OptionsView 的 class 属性）：

将 UILabel 和 OptionsView 连接到您的 CustomCell。实现示例（注意var option）：

import UIKit

class CustomCell: UITableViewCell {

    // MARK: - Public  Properties

    // Option that should currently be displayed. Default is .star (for no particular reason).
    var option: OptionsView.Option = .star {
        didSet {
            iconView.currentOption = option
            updateLabelText()
        }
    }

    // MARK: - Private Properties

    @IBOutlet private weak var iconView: OptionsView!
    @IBOutlet private weak var label: UILabel!
}

// MARK: - Private

private extension CustomCell {

    func updateLabelText() {
        switch option {
        case .star:
            label.text = "Star"
        case .tree:
            label.text = "Tree"
        }
    }
}

最后，在您的自定义 UITableViewController:

import UIKit

class TableViewController: UITableViewController {

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1 // Hardcoded in this example.
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 40 // Hardcoded in this example.
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        if let customCell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as? CustomCell {

            // Logic around which option to display
            if indexPath.row < 20 {
                customCell.option = .star
            } else {
                customCell.option = .tree
            }

            return customCell
        }

        // Fallback.
        return UITableViewCell()
    }
}

最终结果：

整个代码参考本项目（第六次测试）：
https://github.com/backslash-f/paintcode-tests

UITableView中的UIView添加自定义class

Add custom class to UIView in the UITableView

ios

uitableview

paintcode