UIView cropped off even though constraints are set - swift

Question

I've created a custom view in a xib file, in which I've set all simulated Metrics to "Inferred"
In my view I float one stack view x to the left by pinning the left and the top side and stack view to the right by pinning the right and top. Somehow like this (the = sign symbolizes the screen borders)
==========
=x y=
= =
= =
= =
= =
==========
I don't set any constraints for the width and the height, since everything should be inferred.
The corresponding class to my view is quite simple:
class MyView: UIView {
var view:UIView!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
view = UIView.loadFromNibNamed("MyView")
addSubview(view)
}
}
extension UIView {
class func loadFromNibNamed(nibNamed: String, bundle : NSBundle? = nil) -> UIView? {
return UINib(
nibName: nibNamed,
bundle: bundle
).instantiateWithOwner(nil, options: nil)[0] as? UIView
}
}
I use this view in my storyboard by pinning it to the left, right, top and bottom.
.
The thing is that the view is loaded from the nib, but that the width is somehow not dynamic. I would expect to the view to resize itself depending on the size of the parent. However, approximately 1/3 of the right Stack View is cropped off and not visible on screen even though I've set the constraints.
What do I have to do to fix this?

Answer 1

You need to set the translatesAutoresizingMaskIntoConstraints property to false for any view you load from a XIB if you want it to have a dynamic frame size. Otherwise the system will automatically create layout constraints like a fixed width and a fixed height that will keep your view from resizing.
Additionally, you need to add some constraints in code after adding your view to the view hierarchy that pin its top, bottom, left and right edge to the corresponding edges of its superview. After all, you're adding the XIB's contents as a subview to your custom view MyView i.e. the two views are not the same and you need to tell the system how it should position the subview (the constraints you added in your storyboard only relate to your MyView instance, not to its subview). These additions to your code should do the trick:
class MyView: UIView {
var view:UIView!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
view = UIView.loadFromNibNamed("MyView")
view.translatesAutoresizingMaskIntoConstraints = false
addSubview(view)
// Pin view to all four edges of its superview
self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: [], metrics: nil, views: ["view": view]))
self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options: [], metrics: nil, views: ["view": view]))
}
}
Side notes:
Read a more detailed explanation on the translatesAutoresizingMaskIntoConstraints property in the official documentation.
All settings in the "simulated metrics" section in Interface Builder only apply to Interface Builder itself. They won't have any effect on your app when you run it on Simulator or a real device.

Answer 2

We need to identify were the issue is, so let's start by confirming that the stack view's are getting their frame's set. In your view controller where the stack views are we can override the following methods and check the frames of the stack views.
viewWillLayoyutSubviews()
viewDidLayoutSubviews()
Confirm that the frame's are getting set we can now look at the constraints that are being set in the storyboard. It is not clean fro the information you have provided how you want the stack views layout together, is one on top of the other view? Are they supposed to be side-by-side?
You will need to check that the constraints are valid for the layout you you want.
3.Confirm the Size Classes for your view(s) are configured correctly. Apple has a document called 'Size Classes Design Help' here. I believe this is your problem. Your custom class is set to have a size class of Any/Any and the super view of the custom view has a different set of size classes, for example Compact/Regular. So you custom view is not adjusting it's size based on size classes since it is set to be the same for any combination of size classes. Try configuring a different size class combination for your custom class to to see if there are any differences - Compact/Regular for example.