iOS用UICollectionView如何实现这种类型的布局

Question

需求：

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

我尝试过的：

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

Answer 1

最佳方法。

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

StackView

的CollectionView

的TableView

注意：您可以同时使用CollectionView或TableView但我更喜欢这两种不同，因此我不需要在委托和数据源中放置条件，我可以轻松管理。选择是你喜欢的。

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

3. 根据您的要求在CollectionView和TableView中设置数据。
4. 要切换左侧菜单，只需在greenButton操作上使用下面的一行代码即可。

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

5. 对于简单的动画

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

输出：

编辑

您可以在scrollview中使用stackView并关闭colview，tblView滚动。检查如下：

1. UI层次结构

2. 附加代码工作

   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
   
   }

注意：它可能会导致一些意外的输出（可能/不可能），因此您需要处理它。

输出：

Answer 2

您需要的是具有自定义布局的UICollectionView。您可以使用此方法获得所需的效果。

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