Question

我想在TableViewHeader中添加自定义视图。但是，当我运行以下代码时，它将创建一个Cycle并阻止任何用户交互的应用程序。

import UIKit
class ExpandableView: UIView {

    @IBOutlet weak var userImgView: UIImageView!
    @IBOutlet weak var userNamelbl: UILabel!
    @IBOutlet weak var countLbl: UILabel!
    @IBOutlet weak var rightArrowImgView: UIImageView!
    var isExpanded = false
    var contentView: UIView!
    @IBOutlet weak var checkMarkView: UIImageView!

    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    public override init(frame: CGRect) {
        super.init(frame: frame)
        setUpView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUpView()
    }

    private func setUpView() {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: "ExpandableView", bundle: bundle)
        self.contentView = nib.instantiate(withOwner: self, options: nil).first as? UIView
        addSubview(contentView)
        contentView.center = self.center
        contentView.autoresizingMask = []
        contentView.translatesAutoresizingMaskIntoConstraints = true
    }
}

我正在如下使用它：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let frame = CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 60)
    let expandabelView = ExpandableView(frame: frame)
    return expandabelView
}

它在运行时显示以下错误。

See Errors

Answer 1

创建自定义UIView时，如果要与框架一起使用它，则应遵循此规则。

class CustomView: UIView {
    //This should be contentview of your xib
    @IBOutlet var view: UIView!

    let nibName = "CustomView"

    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }

    private func xibSetup()
    {
        Bundle.main.loadNibNamed(nibName, owner: self, options: nil)
        self.view.autoresizesSubviews = true
        self.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(self.view)
        self.view.frame = self.frame


    }

}

Answer 2

由于您需要从 nib 加载视图，因此只需加载它，然后将子视图添加到您的视图即可。然后设置内容视图的frame并正确设置内容视图的自动调整大小掩码

private func setUpView() {
    Bundle.main.loadNibNamed("ExpandableView", owner: self, options: nil)
    addSubview(contentView)
    contentView.frame = bounds
    contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}

Answer 3

也许还有许多其他方法，但是我建议您使ExpandableView可重用以提高性能。

首先，简化您的ExpandableView类：

import UIKit

class ExpandableView: UITableViewHeaderFooterView {
    @IBOutlet weak var userImgView: UIImageView!
    @IBOutlet weak var userNamelbl: UILabel!
    @IBOutlet weak var countLbl: UILabel!
    @IBOutlet weak var rightArrowImgView: UIImageView!
    var isExpanded = false

    @IBOutlet weak var checkMarkView: UIImageView!
}

请不要忘记超类是UITableViewHeaderFooterView，而不是UIView。

第二，检查ExpandableView.xib的设置：

已定义视图的自定义视图设置必须为ExpandableView。

当您无法从下拉列表中选择ExpandableView时，可能需要手动输入。不要忘记检查从目标继承模块。

文件所有者的自定义视图设置必须为空。

如果已经设置了某个类，请手动将其删除。

确认所有插座已正确连接到您的ExpandableView。

（在修改xib之后，最好将它们重新连接。）

您可能需要重新构建视图层次结构和/或约束。

第三，修改包含表格视图的视图控制器。

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        tableView.delegate = self
        tableView.dataSource = self
        //...
        let nib = UINib(nibName: "ExpandableView", bundle: nil)
        tableView.register(nib, forHeaderFooterViewReuseIdentifier: "ExpandableView")
        tableView.estimatedSectionHeaderHeight = 60
        tableView.sectionHeaderHeight = UITableView.automaticDimension
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let expandabelView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ExpandableView")
        // Frame size should be represented with constraints.
        return expandabelView
    }

如何快速使用自定义视图？

3 个答案: