单击表单元格内的按钮时，通过适当的差异来扩展tableview并增加scrollview内容大小 [英] 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位于标签"Featured Businesses"和包含绿色和粉红色子视图的视图之间

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

总之，有什么方法可以扩展和折叠表格视图，以及适当地更改滚动视图的内容大小，从而获得所需的模型效果吗?

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?

任何帮助将不胜感激.

Any help would be greatly appreciated.

此外，我已经使用snapkit设置单元格的布局

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

推荐答案

您可以使用自动布局以及确定其自身高度的子类UITableView来代替自动计算高度和修改滚动视图的.contentSize:

Instead of calculating heights and modifying the scroll view's .contentSize, you can use auto-layout with a subclassed UITableView that determines its own height:

final class ContentSizedTableView: UITableView {

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

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

}

当您更改表格视图时-添加/删除行或节或更改行高-表格视图的intrinsicContentSize将自动更新，其高度将像多行.

When you change the table view - either adding / removing rows or sections, or changing the row heights - the table view's intrinsicContentSize will be automatically updated, and its height will grow or shrink just like a multi-line UILabel.

在正确设置约束后，自动布局将为您处理滚动视图的内容大小.

With the constraints setup properly, auto-layout will handle the scroll view's content size for you.

这篇关于单击表单元格内的按钮时，通过适当的差异来扩展tableview并增加scrollview内容大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！