iOS與UICollectionView如何實現這種類型的布局

Question

需求：

• 如果左視圖是否可見，我應該能夠滾動整個視圖（如果我在視圖中的任何位置滾動，所有組件一次都應該滾動）。
• 通過單擊顯示/隱藏左視圖按鈕，它應該能夠隱藏或顯示左視圖。
• 在單元格中（只有單元格沒有左視圖），具有展開/折疊功能（我可以增加/減小單元格高度）
• 而且如果我在設備設置應用中更改字體大小，那么它在這里也應該生效（因此支持動態字體大小）

我嘗試過的

我曾嘗試使用tableview，scroll view但沒有運氣。 最后要嘗試使用集合視圖，請問有人可以幫助我如何進行集合視圖。 如果使用集合視圖，將來還會遇到任何麻煩。

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。 使用這種方法可以達到所需的效果。

教程的語氣是如何實現自己的自定義布局。 這是其中之一