iOS 用 UICollectionView 如何实现这种布局答案

【问题标题】：iOS with UICollectionView how to achieve this type of layoutiOS 用 UICollectionView 如何实现这种布局
【发布时间】：2019-03-18 09:53:21
【问题描述】：

要求：

如果左视图可见或不可见，我应该能够滚动整个视图（如果我滚动视图中的任何位置，所有组件都应该一次滚动）。
通过点击显示/隐藏左视图按钮按钮，它应该能够隐藏或显示左视图。
在单元格中（只有单元格不是左视图）有展开/折叠功能（我可以增加/减少单元格高度）
如果我在设备设置应用程序中更改字体大小，它也应该在这里生效（所以支持动态字体大小）

我尝试过的：

我尝试过使用 tableview、滚动视图但没有运气。最后想尝试使用集合视图，任何人都可以帮我解决如何继续使用集合视图。如果我们将来使用集合视图，我们会遇到任何复杂情况。

【问题讨论】：

当单元格滚动时，左视图是否应该保持原位？
不，整个视图应该滚动（HeaderView, LeftView, cells）
您能分享一下您计划在左侧使用的视图类型吗？所以也许用一个单一的表格视图就可以实现。
听起来你需要自定义 UICollectionView 布局。
@MuhammadZohaibEhsan: 左视图 - 在这种情况下包含多个选项我打算使用 tableview，因为它包含许多选项但禁用滚动（这样无论我在哪里滚动它都会滚动整个视图）

标签： ios uicollectionview uicollectionviewcell uicollectionviewlayout

【解决方案1】：

最佳方法。

您的 UI 层次结构应该是这样的。

堆栈视图

集合视图

表格视图

注意：您可以同时使用CollectionView 或TableView，但我更喜欢两者不同，这样我就不需要在代表和数据源中添加条件，我可以轻松管理。选择是你喜欢的。

现在你的 UI 设计看起来像这样
- 绿色按钮用于显示隐藏您的左侧收藏视图（您在帖子中提到）。

根据您的要求在CollectionView 和TableView 中设置您的数据。

要切换左侧菜单，只需在 greenButton 操作上使用以下一行代码。

@IBAction func btnToggle(_ sender: Any) {
    colView.isHidden = !colView.isHidden 
}

对于简单的动画

@IBAction func btnToggle(_ sender: Any) {
    UIView.animate(withDuration: 0.3) {            
        self.colView.isHidden = !self.colView.isHidden
    }
}

输出：

编辑

你可以在scrollview中取stackView并关闭colview、tblView滚动。检查以下：

UI 层次结构

额外的代码工作

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    colView.isScrollEnabled = false
    tblView.isScrollEnabled = false

    colView.reloadData()
    tblView.reloadData()

    scrollView.contentSize = CGSize(width: self.view.frame.width,
                                    height:  max(colView.contentSize.height, tblView.contentSize.height))
    stackHeight.constant = scrollView.contentSize.height

}

注意：可能会导致一些意想不到的输出（可以/不能），所以需要注意。

输出：

【讨论】：

嗯您的解决方案对我不起作用，因为使用这种方法滚动适用于单个组件。请阅读我上面的评论
感谢您的解决方案，但我认为这不是有效的解决方案，因为如果我们禁用单个组件中的滚动视图并提供所有内容大小（在这种情况下，我们不使用 collectionview/tableview 的功能）。请让我知道您对此的看法。
@AnjaneyuluBattula 两者都是单独的组件，并且都单独工作，要使它们作为一个单元工作，您需要将它们与某些东西绑定。

【解决方案2】：

您需要的是具有自定义布局的 UICollectionView。使用这种方法可以达到你需要的效果。

有如何实现自己的自定义布局的教程的基调。 Here 就是其中之一

【讨论】：

教程中的任何一种都解决了OP的问题吗？