通过单击表格单元格内的按钮时的适当差异来扩

Expand tableview and increase scrollview content size by an appropriate difference on clicking a button inside a table cell(通过单击表格单元格内的按钮时的适当差异来扩展表格视图并增加滚动视图内容大小)

问题描述

我有一个 UITableView，它已作为视图控制器的一部分添加到 UIScrollView 中，该控制器遵循如下所示的模型的一部分:-

I have a UITableView which has been added inside a UIScrollView as part of a view controller which adheres to a part of the mockup shown below:-

正如您在模型中看到的，UITableView 位于标签特色企业"标签和包含绿色和粉红色子视图的视图之间

As you can see in the mockup, the UITableView is situated in between the label 'Featured Businesses' label and a view containing the green and pink colored subviews

此外，如果观察到，表格视图中的每个单元格都有一个按钮，单击该按钮可切换包含详细信息列表的卡片视图.卡片视图的高度取决于详细信息的数量.

Also, if observed, each cell in the table view has a button which on clicking toggles a card view containing a list of particulars. Height of the card view varies depending on the number of particulars.

我可以扩展和收缩单元格以显示卡片视图，它是模型中所示的表格视图单元格的一部分.

I am able to expand and contract the cell to show the card view which is part of the table view cell as shown in the mockup.

问题在于扩展和收缩父表格视图，以便看到该表格视图中的所有单元格(表格视图不应该是可滚动的，并且任何单元格都不应该被隐藏) 并且只有滚动视图是可滚动的.

The problem lies in expanding and contracting the parent table view such that all the cells in that table view are seen (the table view is not supposed to be scrollable and any of the cells should not be hidden) and that only the scroll view is scrollable.

这是我的表格视图单元格的代码，其中涉及单元格的扩展以及更改表格的尺寸(高度)和滚动视图的内容大小:-

Here is my code for the table view cell which involves expansion of the cell as well as changing the dimensions (height) of the table and the content size of the scroll view:-

func toggleBusinessesTable() {
    var businessTableHeight = self.parent!.businessTable.frame.height
    if self.parent!.indexOfCellToExpand > -1 {
        self.parent!.businessTable.snp.remakeConstraints { (make) in
            make.top.equalTo(self.parent!.featuredBusinessesHeading.snp.bottom).offset(3.5)
            make.left.equalTo(self.parent!.scroll.snp.left)
            make.width.equalTo(self.parent!.view.bounds.width)
            make.height.equalTo(CGFloat(businessTableHeight) + CGFloat(self.tableHeight))
        }
        self.parent!.scroll.layoutIfNeeded()
        self.parent!.scroll.contentSize.height = self.parent!.usersCollectionView.frame.maxY + 75
    }
    else if self.parent!.indexOfCellToExpand == -1 {
        self.parent!.businessTable.snp.remakeConstraints { (make) in
            make.top.equalTo(self.parent!.featuredBusinessesHeading.snp.bottom).offset(3.5)
            make.left.equalTo(self.parent!.scroll.snp.left)
            make.width.equalTo(self.parent!.view.bounds.width)
            make.height.equalTo(CGFloat(businessTableHeight) - CGFloat(self.tableHeight))
        }
        self.parent!.scroll.layoutIfNeeded()
        self.parent!.scroll.contentSize.height = self.parent!.usersCollectionView.frame.maxY + 75
    }
}

func expandCell(_ sender: UI.Button) {
    if self.parent!.indexOfCellToExpand != self.tag {
        print("EXPANDING...")
        self.parent!.indexOfCellToExpand = self.tag
        self.parent!.businessTable.reloadRows(at: [IndexPath(row: self.tag, section: 0)], with: .fade)
        self.parent!.businessTable.scrollToRow(at: IndexPath(row: self.tag, section: 0), at: .top, animated: true)
    }
    else if self.parent!.indexOfCellToExpand == self.tag {
        print("CONTRACTING...")
        self.parent!.indexOfCellToExpand = -1
        self.parent!.businessTable.reloadRows(at: [IndexPath(row: self.tag, section: 0)], with: .fade)
        self.parent!.businessTable.scrollToRow(at: IndexPath(row: self.tag, section: 0), at: .top, animated: true)
    }
    //        self.toggleBusinessesTable()
}

parent 是具有滚动视图和表格视图的视图控制器

The parent is the view controller which has the scroll view and the table view

businessTable 是 UITableView 是相关表格，scroll 是保存表格视图的 UIScrollView

The businessTable is the UITableView is the table in question and scroll is the UIScrollView that holds the table view

我正在使用表格视图单元格的标签来跟踪 indexPath

I am using the table view cell's tag to keep track of the indexPath

下面的代码计算表格视图单元格应该扩展的差异:-

The below code calculates the difference by which the table view cell is supposed to expand:-

    // tableHeight is initially 0 at the beginning
    if self.business_service_charges.count <= 4 {
        for each in self.business_service_charges {
            self.tableHeight += 80 + each.sub_service_charges.count*80
        }
    } else if self.business_service_charges.count > 4 {
        for each in self.business_service_charges[0...3] {
            self.tableHeight += 80 + each.sub_service_charges.count*80
        }
    }

表格视图单元格的 tableHeight 变量用于计算表格视图应展开/收缩的程度.

the tableHeight variable of the table view cell is used to calculate by how much the table view should expand/contract.

但是在执行 self.toggleBusinessesTable() 时，表格视图的扩展超过了它应该扩大的范围，在底部视图和表格视图之间增加了多余的间距，并且在收缩时，表格视图变得更小，隐藏了其他单元格，使表格视图可滚动.

But on executing the self.toggleBusinessesTable() the table view expands more than it should expand adding excess spacing between the bottom view and the table view and on contracting, the table view becomes smaller hiding the other cells, making the table view scrollable.

大小的 UITableView 例程:-

The UITableView routine for size:-

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if indexPath.row == indexOfCellToExpand {
        var tableHeight = 0
        if self.featuredBusinesses[indexPath.row].businessServiceCharges.count <= 4 {
            for each in self.featuredBusinesses[indexPath.row].businessServiceCharges {
                tableHeight += 80 + each.sub_service_charges.count*80
            }
        } else if self.featuredBusinesses[indexPath.row].businessServiceCharges.count > 4 {
            for each in self.featuredBusinesses[indexPath.row].businessServiceCharges[0...3] {
                tableHeight += 80 + each.sub_service_charges.count*80
            }
        }
        return CGFloat(250 + tableHeight)
    }
    return 250
}

indexOfCellToExpand 是一个变量，用于跟踪已展开的表格视图单元格

indexOfCellToExpand is a variable which keeps track of the table view cell which has expanded

简而言之，有没有什么办法可以展开和折叠table view，并适当改变scroll view的内容大小，以获得作为mockup的预期效果?

In brief, is there any way to expand and collapse the table view and change the content size of the scroll view appropriately to get the desired effect as the mockup?

任何帮助将不胜感激.

另外，我使用 snapkit 来设置单元格的布局

Also, I have used snapkit to set up the layout of the cell

推荐答案

不用计算高度和修改滚动视图的.contentSize，你可以使用带有子类UITableView<的自动布局/code> 决定自己的高度:

final class ContentSizedTableView: UITableView {

    override var contentSize:CGSize {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }

    override var intrinsicContentSize: CGSize {
        layoutIfNeeded()
        return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
    }

}