UICollectionView 内容被 TabBar 隐藏
UICollectionView content hidden by TabBar
问题
你好,社区!我以编程方式创建了一个 UICollectionView 并希望它显示占据整个屏幕大小的图像,超过顶部安全区域但尊重底部安全区域,因为在底部我有 TabBar。当前 UI 的问题是我让它忽略了顶部安全区域,但标签栏隐藏了部分内容,因为集合占据了整个屏幕的大小 (Video)。我正在尝试让我的 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)
非常感谢!
您应该使用 auto-layout 而不是手动设置集合视图的框架。 view.addSubview(collectionView!)
后放:
collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
这会将集合视图的底部锚点固定到视图的底部安全区域,该区域应占选项卡栏。
您应该从 viewDidLayoutSubviews
中删除 collectionView?.frame = view.bounds
。
此外,您不应在 viewDidLoad
中设置 itemSize
,因为视图的框架可能会更改。您可以在 viewDidLayoutSubviews
.
中设置
问题
你好,社区!我以编程方式创建了一个 UICollectionView 并希望它显示占据整个屏幕大小的图像,超过顶部安全区域但尊重底部安全区域,因为在底部我有 TabBar。当前 UI 的问题是我让它忽略了顶部安全区域,但标签栏隐藏了部分内容,因为集合占据了整个屏幕的大小 (Video)。我正在尝试让我的 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)
非常感谢!
您应该使用 auto-layout 而不是手动设置集合视图的框架。 view.addSubview(collectionView!)
后放:
collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
这会将集合视图的底部锚点固定到视图的底部安全区域,该区域应占选项卡栏。
您应该从 viewDidLayoutSubviews
中删除 collectionView?.frame = view.bounds
。
此外,您不应在 viewDidLoad
中设置 itemSize
,因为视图的框架可能会更改。您可以在 viewDidLayoutSubviews
.