Resizing UIView based on the subview loaded from xib file

Question

I have xib file whose height can dynamically change as it contains labels of multiple lines. I need add this view as a subview of uiview that is defined in my view controller.

let settlementDetailsContentView = SettlementDetailsView.instanceFromNib(nibNamed: NibConstants.SettlementDetailsViewNib)
settlementDetailsContentView.frame = settlementDetailsView.bounds
settlementDetailsView.addSubview(settlementDetailsContentView)

Here settlementDetailsContentView contains the view that is designed in Interface builder. settlementDetailsView is the view defined in my view controller whose height constraint is greater or equal to zero.

Code below is the function that returns the view based on the nib name

 class func instanceFromNib(nibNamed : String) -> SettlementDetailsView
 {
     return UINib(nibName: nibNamed, bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! SettlementDetailsView
 }

The problem with what I did is that view below the settlementdetailsview overlaps on this since the view height is not resizing based on the subview.

This is how the UI looks.Claim documents overlapping on settlementDetails view.

This is how the uiview should look like

Try adding settlementDetailsView.setNeedsLayout() after adding settlementDetailsContentView as subview. — laxman khanal
You could add the height constraint programmatically when subview is added — chirag90
@chirag90 how could I find the height of the view since it's dynamic and some view sinside xib file may be hidden based on some condition — Prabu Raj
Try setting the maskToBound property of settlementDetailsView to true. Also verify if the frame of settlementDetailsView changes — hfehrmann

hfehrmann hfehrmann · Accepted Answer · 2017-09-12T13:31:29

The problem is that you are not changing the frame of settlementDetailsView. In the following code

let settlementDetailsContentView = SettlementDetailsView.instanceFromNib(nibNamed: NibConstants.SettlementDetailsViewNib)
settlementDetailsView.addSubview(settlementDetailsContentView)
settlementDetailsContentView.translatesAutoresizingMaskIntoConstraints = false
settlementDetailsContentView.topAnchor.constraint(equalTo: settlementDetailsView.topAnchor).isActive = true
settlementDetailsContentView.bottomAnchor.constraint(equalTo: settlementDetailsView.bottomAnchor).isActive = true
settlementDetailsContentView.trailingAnchor.constraint(equalTo: settlementDetailsView.trailingAnchor).isActive = true
settlementDetailsContentView.leadingAnchor.constraint(equalTo: settlementDetailsView.leadingAnchor).isActive = true

You constraint that the subview grow to the full size of the superView or that the superView shrink to the size of the subview (this depend on the constraints of the superview and the hugging/compression of boths, but should give you the desire effect).

See the autolayout reference

EDIT

Now that you posted how it should look like this, the following code accomplish that:

let superView = settlementDetailsView.superview!
let settlementDetailsContentView = SettlementDetailsView.instanceFromNib(nibNamed: NibConstants.SettlementDetailsViewNib)
superview.addSubview(settlementDetailsContentView)
settlementDetailsContentView.translatesAutoresizingMaskIntoConstraints = false
settlementDetailsContentView.topAnchor.constraint(equalTo: settlementDetailsView.bottomAnchor).isActive = true
settlementDetailsContentView.bottomAnchor.constraint(equalTo: superview.bottomAnchor).isActive = true
settlementDetailsContentView.trailingAnchor.constraint(equalTo: superview.trailingAnchor).isActive = true
settlementDetailsContentView.leadingAnchor.constraint(equalTo: superview.leadingAnchor).isActive = true

Note that if settlementDetailsView have a bottom constraint to its superView, you should deactivate it.

Resizing UIView based on the subview loaded from xib file

1 Answers