UICollectionView 內容被 TabBar 隱藏

Question

問題

你好，社區，我以編程方式創建了一個 UICollectionView 並希望它顯示占據整個屏幕大小的圖像，超過頂部安全區域但尊重底部安全區域。 因為在底部我有 TabBar，當前 UI 的問題是我忽略了頂部的安全區域，但是標簽欄隱藏了部分內容，因為集合占據了整個屏幕的大小（視頻）。 我正在嘗試讓我的 UI 看起來像 TikTok 主頁，其中 collectionView 在標簽欄開始時結束。

我的代碼

在 ViewDidLoad 中：

let layout = UICollectionViewFlowLayout()
self.edgesForExtendedLayout = UIRectEdge.bottom
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: view.frame.size.width, height: view.frame.size.height)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView?.register(PostCollectionViewCell.self, forCellWithReuseIdentifier: PostCollectionViewCell.identifier)
collectionView?.isPagingEnabled = true
collectionView?.dataSource = self
collectionView?.showsVerticalScrollIndicator = false
collectionView?.showsHorizontalScrollIndicator = false
view.addSubview(collectionView!)

在 ViewDidLayoutSubviews 中：

collectionView?.contentInsetAdjustmentBehavior = .never
collectionView?.frame = view.bounds

我試過的

layout.itemSize = CGSize(width: view.frame.size.width, height: view.frame.size.height - (self.tabBarController?.tabBar.frame.height)!)

將 tabBar 的高度減去 CollectionViewFlowLayout

collectionView?.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: self.tabBarController!.tabBar.frame.height, right: 0)
collectionView?.contentSize = CGSize(width: view.frame.size.width, height: view.frame.size.height - self.tabBarController!.tabBar.frame.height)

非常感謝！

Answer 1

您應該使用自動布局而不是手動設置集合視圖的框架。 在view.addSubview(collectionView!)之后：

collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

這會將集合視圖的底部錨點固定到視圖的底部安全區域，該區域應占選項卡欄。

您應該從viewDidLayoutSubviews中刪除collectionView?.frame = view.bounds 。

此外，您不應在viewDidLoad中設置itemSize ，因為視圖的框架可能會更改。 您可以在viewDidLayoutSubviews中設置它。