iOS 用 UICollectionView 如何实现这种布局

Posted 2023-03-14

【中文标题】iOS 用 UICollectionView 如何实现这种布局

【英文标题】：iOS with UICollectionView how to achieve this type of layout

【发布时间】：2019-03-18 09:53:21

【问题描述】：

要求：

如果左视图可见或不可见，我应该能够滚动整个视图（如果我滚动视图中的任何位置，所有组件都应该一次滚动）。 通过点击

显示/隐藏左视图按钮

按钮，它应该能够隐藏或显示左视图。 在单元格中（只有单元格不是左视图）有展开/折叠功能（我可以增加/减少单元格高度） 如果我在设备设置应用程序中更改字体大小，它也应该在这里生效（所以支持动态字体大小）

我尝试过的：

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

【问题讨论】：

当单元格滚动时，左视图是否应该保持原位？

不，整个视图应该滚动（HeaderView, LeftView, cells）

您能分享一下您计划在左侧使用的视图类型吗？所以也许用一个单一的表格视图就可以实现。

听起来你需要自定义 UICollectionView 布局。

@MuhammadZohaibEhsan: 左视图 - 在这种情况下包含多个选项我打算使用 tableview，因为它包含许多选项但禁用滚动（这样无论我在哪里滚动它都会滚动整个视图）

【参考方案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的问题吗？