iOS用UICollectionView如何实现这种布局

Question

要求:

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

我尝试过的:

我尝试过使用表格 View 、 ScrollView ，但没有成功。最后想尝试使用 Collection View ，任何人都可以帮助我了解如何继续使用 Collection View 。将来如果我们使用 Collection View ，我们会遇到任何麻烦吗？

Answer 1

最佳方法。

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

StackView

CollectionView

TableView

注意:您可以同时使用 CollectionView 或 TableView，但我更喜欢两者不同，这样我就不需要在委托(delegate)中添加条件& 数据源，我可以轻松管理。选择是您喜欢的。

1. 现在您的 UI 设计如下所示

   • 绿色按钮用于显示隐藏您的左侧收藏 View (您在帖子中提到)。

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

2. 要切换左侧菜单，只需在 greenButton 操作上使用下面一行代码即可。

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

3. 对于简单的动画

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

输出:

Edit

可以在scrollview中取stackView，关闭colview，tblView的滚动。检查以下内容:

1. 用户界面层次结构

1. 额外的代码工作

   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
   
   }
   

注意:它可能会导致一些意外的输出(可以是/不能)，所以你需要照顾它。

输出: