如何在tableView swift的Xib单元中创建内部视图动态

Question

我已经为tableView创建了自定义Cell Xib，并且它可以动态地正常工作。如果设置numberofRowsInSection返回2，它将在tableView中显示两个单元格。实际上我要实现列表应附加在相同单元格类型的树状视图内。屏幕截图已附上。

ViewController：

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, URLSessionDelegate {


    @IBOutlet weak var tableView: UITableView!
    let urlList = [
    ["The Swift Programming Language", "https://swift.org/documentation/"],
    ["Crossdomain.xml", "https://crossdomain.xml"]]

    var downloadTaskList: [DownloadTaskInfo]?


    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        let nib = UINib.init(nibName: "DownloadEntryViewCell", bundle: nil)
        self.tableView.register(nib, forCellReuseIdentifier: "DownloadEntryViewCell")
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 140

    }

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "DownloadEntryViewCell", for: indexPath) as! DownloadEntryViewCell        
        cell.footerLbl1.text = urlList[indexPath.row][0]
        cell.footerPrg1.progress = 0.0
        return cell
    }

}

Xib代码：

class DownloadEntryViewCell: UITableViewCell {
    @IBOutlet weak var rightView: UIView!
    @IBOutlet weak var leftView: UIView!


    @IBOutlet weak var fileNameLabel: UILabel!
    @IBOutlet weak var downloadURLLabel: UILabel!
    @IBOutlet weak var progressLabel: UILabel!
    @IBOutlet weak var individualProgress: UIProgressView!
    @IBOutlet weak var imgView: UIImageView!



    @IBOutlet weak var footerView: UIView!
    @IBOutlet weak var h1View: UIView!
    @IBOutlet weak var v1View: UIView!
    @IBOutlet weak var footerLbl1: UILabel!
    @IBOutlet weak var footerProgressLabel: UILabel!
    @IBOutlet weak var footerPrg1: UIProgressView!
    @IBOutlet weak var PinView1: UIView!


    override func awakeFromNib() {
        super.awakeFromNib()

    }

}

Answer 1

在您的xib单元格中添加垂直stackView。现在在另一个.xib文件中为页脚列表创建自定义UiView。

在tableview cellForRowAt方法中执行以下操作

var stackHeight:CGFloat = 0.0
    for i in 1...ChildView.count
    {
        let child_view = Bundle.main.loadNibNamed("ChildView", owner: self, options: nil)?.first as! ChildView
        child_view.lblProgress.text = "Swift_programimg"
        cell.stackviewOption.addArrangedSubview(child_view)
         stackHeight = stackHeight + 60.0
    }
    cell.stackviewOption.heightAnchor.constraint(equalToConstant: stackHeight).isActive = true

这里ChildView是footerview .xib，stackviewOption是垂直stackview。for循环以获取您想要的数量。

此处是行cell.stackviewOption.heightAnchor.constraint(equalToConstant: stackHeight).isActive = true for set stackview height. 第stackHeight = stackHeight + 33.0行用于将每次子视图的高度添加到堆栈视图的总高度中。

对应该工作的单元格执行相同的逻辑。

Answer 2

将tableview中的heightforrowAt高度设置为UITableView.automaticDimension。

将您的顶视图放在UIView内（可将其称为view1）。将其高度设置为0，优先级为750，现在view1中的子级将其高度设置为view1。在view1内设置最后一个孩子的底部约束的出口。

禁用底部约束将帮助您隐藏view1，因为我们首先将height设置为0并期望子项提供height。当我们禁用底部约束时，子项将无法提供。因此view1将折叠以定义高度0。

现在每个cellforrowatIndexpath方法调用都传递一些参数以隐藏或显示顶视图。

func configureUI(cellData:String? , showTopView:Bool){
    mBtmCnst.isActive = showTopView
}
确保将顶视图view1标记为cliptobounds，将mBtmCnst标记为strong出口。

希望对您有帮助！