Why is only half of a collection view getting displayed? - ios

Question

I have used MMPlayerView (GitHub link here) to add videos into a collection view, in the collection view the image gets replaced by a video in the code (from the demo). I took the MMPlayerView's demo project and changed stuff to fit my needs and then implemented it into my project to get something like this show in this video.
Now I'd like to obviously move the collection view up towards the buttons at the top of the screen, and later on I will use multiple collection views like that to get the style of the app store more like, just showing videos. Since I took the code from the demo I'm not too sure on some things, when I copied the project's demo the collection view was made for scrolling through it vertically, so it takes up the whole screen, so the collection view was constrained to the bottom of the view:
Which causes this to show in the app (I don't understand why it's so far away from the top when its constrained by 10 points):
Now I want to obviously want to remove the bottom constraint and constrain it by it's height instead so I can have multiple collection views, (probably through the use of table views), so I removed the constraint to the bottom of the view and added a height constraint for 250 points:
Which caused the app to look like this:
Why?? I'm guessing it has something to do with this part of the view controller code:
extension HomeViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let m = min(UIScreen.main.bounds.size.width, UIScreen.main.bounds.size.height)
return CGSize(width: m, height: m*0.75)
}
I want to keep the collection view's width the same width of the view, so the width is fine, it's just the height here. When I try and set the height to a constant value of 250 (the same as the height constraint) it does the same thing (only shows half of it) but shrinks the video a little bit. What can I change?

Answer 1

Taking a quick look at the Example app from MMPlayerView...
Change the height value in sizeForItemAt to the height of your collection view (250 per your question):
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let m = min(UIScreen.main.bounds.size.width, UIScreen.main.bounds.size.height)
return CGSize(width: m, height: 250.0)
//return CGSize(width: m, height: m*0.75)
}
I'm assuming you were getting the same error messages in debug console as I got:
The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
and it should also have printed the Collection View properties, including:
adjustedContentInset: {0, 0, 200, 0};
So the collection view has a Bottom inset of 200.
If you search that example project for contentInset you'll find this line in the view controller's viewDidLoad() function:
playerCollect.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 200, right:0)
If you comment-out / remove that line, you should now see the full cell.
Might be a good idea to get a handle on collection views to begin with and then review that example project for the video implementations in your app.