UICollectionView content hidden by TabBar-CodePudding

The problem

Hello, community! I created a UICollectionView programmatically and want it to display images that take the full size of the screen, surpassing the top safe area but respecting the bottom safe area, since at the bottom I have TabBar. The issue with the current UI is that I got it to ignore the top safe area, but the tab bar hides part of the content since the collection takes the size of the whole screen (Video). I'm trying so that my UI looks like the TikTok home page where the collectionView ends when the tab bar starts.

My Code

In 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!)

In ViewDidLayoutSubviews:

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

What I've tried

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

Substracting height of tabBar to 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)

Many Thanks!

CodePudding user response：

You should use auto-layout instead of setting the frame of your collection view manually. After view.addSubview(collectionView!)

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

This pins the bottom anchor to the bottom safe area of your view, which should account for the tab bar.

You should remove collectionView?.frame = view.bounds from viewDidLayoutSubviews.

Also you should not set your itemSize in viewDidLoad because the view's frame may change. You can set it in viewDidLayoutSubviews.