Custom xib not sized correctly inside superview - ios

Question

I have a bit of a complicated UI structure.
I have a collection view. For the collection view's cells, I have a custom xib. Inside that custom xib, I load another custom xib into a UIView.
Here is a picture of my collection view cell's custom xib:
https://i.stack.imgur.com/GQLpj.png
I have also highlighted the UIView (Video Container View) that I load another xib into. Here is what that xib looks like:
https://i.stack.imgur.com/jpSi0.png
With the collection view, I do some custom resizing of the cells by making the view 16:9 ratio:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// Get the width of the screen
let width = UIScreen.main.bounds.width
let imageWidth = width
let imageHeight = imageWidth / (16 / 9)
self.postMediaHeight = imageHeight
return CGSize(width: imageWidth, height: imageHeight)
}
My PostMediaCollectionViewCell class looks like this:
class PostMediaCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var container: UIView!
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var moreView: UIView!
#IBOutlet weak var moreViewLabel: UILabel!
#IBOutlet weak var videoContainerView: VideoContainerView!
override func awakeFromNib() {
super.awakeFromNib()
}
func initialize() {
//
}
}
And my VideoContainerView class looks like this:
class VideoContainerView: UIView {
#IBOutlet var rootView: UIView!
#IBOutlet weak var videoView: VideoView!
#IBOutlet weak var playIconContainer: UIView!
#IBOutlet weak var timeContainer: UIView!
#IBOutlet weak var timeLabel: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialize()
}
func initialize() {
Bundle.main.loadNibNamed("VideoContainerView", owner: self, options: nil)
rootView.translatesAutoresizingMaskIntoConstraints = false
addSubview(rootView)
rootView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
rootView.topAnchor.constraint(equalTo: topAnchor).isActive = true
rootView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
rootView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
}
}
But when I run the simulator, the VideoContainerView doesn't seem to fit the superview's (the cell's) constraints/frame, as you can see in the screenshot below. First, there's a white space above the video, and second, the video's resolution is stretch past the container.
One interesting thing I noticed is that if I scroll down past the cell and then scroll back up, it shows the video perfectly.
What am I doing wrong, and what am I missing here?
Update
I just printed out the bounds of a number of views and noticed that the videoView bounds are different from its parents bounds:
rootview bounds: (0.0, 0.0, 661.0, 410.0)
videoview bounds: (0.0, 0.0, 654.0, 593.0)
What should I do here?

Answer 1

You are missing constraints while adding rootView as subview of VideoContainerView. In initialize add following constraints.
func initialize() {
Bundle.main.loadNibNamed("VideoContainerView", owner: self, options: nil)
rootView.translatesAutoresizingMaskIntoConstraints = false
addSubview(rootView)
rootView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
rootView.topAnchor.constraint(equalTo: topAnchor).isActive = true
rootView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
rootView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
}

Answer 2

container is the main view of VideoContainerView
Change initialize method code as below and try to run your code
func initialize() {
let view = Bundle.main.loadNibNamed("VideoContainerView", owner: self, options: nil)?.first as! UIView
addSubview(view)
container.frame = self.bounds
container.autoresizingMask = [.flexibleWidth,.flexibleHeight]
}