Custom Xib With Defined Frame Constraints Is Changing At Runtime

Question

I've spent several hours googling and in the debugger and I cannot figure out why my parent view in this xib is changing at runtime.

I have created a simple Xib:

In the container I set the width and height constraints (I tried setting constraints in the top parent but I can't seem to be able to):

At runtime I load the Xib programatically and I add it to a view. However after I add it to the view and set the position, the frame of the parent is smaller and the position is wrong.

Here I am explicitly set the x to 16, and the y to 400. When I look at it in the inspector debug tool however, I get different results than I want because the parent frame has changed and the Container position is wrong as a result. I turned the inspector to the side so you can see the parent (in blue) and the child container (in white) and how the parent is smaller than the child:

The details for the parent (the root xib view 'Item Detail Size Widget') are as follows. Notice the height is now 32 instead of 76:

The details for the top level child (Container) are as follows:

So the constraints I set for the container are being honored but the parent is resizing (I assumed since I couldn't set constraints it would use the frame I set).

I tried turning off and on translatesAutoResizingMaskIntoConstraints and a few other things but I can't seem to get the parent to be the exact same size as the Container.

Do you have any suggestions as to why the root Item Detail Size Widget will not match the size of the Container and is changing at run time?

Update

For reference here is the code where I add the widget:

    let sizer: ItemDetailSizeWidget = .fromNib() 
    sizer.x = 16
    sizer.y = 400
    contentView.addSubview(sizer)

I have UIView extensions that set x and y as follows:

var x: CGFloat {
    set { self.frame = CGRect(x: newValue,
                              y: self.y,
                              width: self.width,
                              height: self.height)
        }
    get { return self.frame.origin.x }
}

var y: CGFloat {
    set { self.frame = CGRect(x: self.x,
                              y: newValue,
                              width: self.width,
                              height: self.height)
        }
    get { return self.frame.origin.y }
}

And here is the fromNib extension

class func fromNib<T: UIView>() -> T {
    return Bundle.main.loadNibNamed(String(describing: T.self), owner: nil, options: nil)![0] as! T
}

Answer 1

• Xcode always uses the autoresizing mask for a top-level view in a xib. You can see that your first screen shot: it has the autoresizing control shown.

• Your top-level view's autoresizingMask is set to flexible width and height.

• You have not set any width or height constraints between your top-level view and the “Container” subview.

You also have this code:

contentView.addSubview(sizer)

I suspect (since you mention contentView) that you're adding sizer to the view hierarchy of a table view cell or a collection view cell. When the cell is first created, it might not yet be at its final size. The collection view (or table view) might resize the cell after you return it from collectionView:cellForRowAtIndexPath:.

Since your sizer view has translatesAutoresizingMaskIntoConstraints set to true when it's loaded from the nib, and since its autoresizingMask is [.flexibleWidth, .flexibleHeight], this means that it will grow or shrink when its superview grows or shrinks.

To fix, try these steps:

1. Change the autoresizing mask to this:

   

2. Constrain the width of “Item Size Detail Widget” to equal the width of “Container”, and constrain the heights to equal also: