通过单击表格单元格内的按钮,以适当的差异扩展表格视图并增加滚动视图内容的大小

时间:2019-06-21 10:07:47

标签: ios swift uitableview uiscrollview snapkit

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

Part of the mockup

您可以在模型中看到,UITableView位于标签“ Featured Businesses”标签和包含绿色和粉红色子视图的视图之间

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

我能够展开和收缩单元格以显示卡片视图,该视图是模型视图中表格视图单元格的一部分。

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

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

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是具有滚动视图和表格视图的视图控制器

businessTable是UITableView是有问题的表,而scroll是拥有表视图的UIScrollView

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

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

    // 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变量用于计算表格视图应扩展/收缩的程度。

但是执行self.toggleBusinessesTable()时,表格视图的扩展程度超过了其应扩大的程度,从而在底部视图和表格视图之间增加了多余的间距,并且在收缩时,表格视图变小了,隐藏了其他单元格,从而使表格视图可滚动。

UITableView例程的大小:-

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是一个变量,用于跟踪已展开的表格视图单元格

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

任何帮助将不胜感激。

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

2 个答案:

答案 0 :(得分:0)

尝试一下

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()
    yourTableView.reloadData()
}

答案 1 :(得分:0)

您可以将自动布局与确定其自身高度的子类.contentSize结合使用,而无需计算高度并修改滚动视图的UITableView

final class ContentSizedTableView: UITableView {

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

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

}

更改表格视图时-添加/删除行或节或更改行高-表格视图的intrinsicContentSize将自动更新,并且其高度会像多行一样增加或缩小UILabel

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