如何在swift中使用自定义视图？

Question

我想在TableViewHeader中添加自定义视图。但是，当我运行以下代码时，它会为任何用户交互创建一个Cycle和app。

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
}

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

Answer 1

可能还有很多其他方法，但我建议您使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
    }

Answer 2

当您创建自定义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 3

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

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