Auto-drop height changes when I click the new view controller

Question

Edit: I fixed my problem, but I would be interested to understand why my fix works. See below.

I am using autolayout to build my UITableViewCell s.

The cell is pretty simple with two labels (purple and yellow) and a text box (green).

This works great when displaying for the first time. But when I click on the new view controller, the view instantly rebuilds. The purple label is getting bigger for any reason.

Here is an example when I click on the “Parent Account ID” cell to click on the new view controller. Please note that as soon as the transition begins, the layout will change. When I return, he is still changed.

Elements are created using [UILabel new] without a frame.

 [self.contentView addSubview:self.textLabel]; [self.contentView addSubview:self.errorLabel]; [self.contentView addSubview:self.textField]; 

Then autorun is created using Masonry .

 UIEdgeInsets insets = UIEdgeInsetsMake(3, 15, 3, 15); [self.textLabel makeConstraints:^(MASConstraintMaker *make) { make.left.top.equalTo(self.contentView).insets(insets); make.width.priorityLow(); }]; [self.errorLabel makeConstraints:^(MASConstraintMaker *make) { make.top.right.equalTo(self.contentView).insets(insets); make.left.equalTo(self.textLabel.right).offset(5); }]; [self.textField makeConstraints:^(MASConstraintMaker *make) { make.left.bottom.right.equalTo(self.contentView).insets(insets); make.top.equalTo(self.textLabel.bottom).insets(insets); }]; 

Notice that I never indicate height because I don't care about height. (as long as it is consistent!)

Any idea why this might change? Thanks

Edit: I found a fix.

Now I also set the contentView auto-detection contentView .

 [self.contentView makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self); }]; 

I'm still curious to understand why the contentView !

Answer 1

Your fix works because it provides no limitation.

First, let's start by recording the restrictions created by Freemasonry:

• The purple view should be aligned to the left.
• The purple look should be aligned at the top.
• The width of the magenta image may vary, but the minimum and max are not so important.
• The yellow view should be aligned correctly.
• The yellow view should be aligned at the top.
• The left edge of the yellow view should be 5 pixels from the right edge of the magenta image.
• The green view should be aligned to the left.
• The green view should be aligned at the bottom.
• The green view should be aligned correctly.
• The top edge of the green view should be 0px from the bottom edge of the purple image.

It may seem complete, but it allows autorun to paint your views in many ways.

Consider the following:

According to the rules you created above, all three possibilities are correct. When you click on a cell, the layout is invalid and redraws. Given that your cell can be drawn in several different ways, it will simply draw itself and satisfy all your limitations ... and that will happen.

I will be honest, I am not 100% sure that make.edges.equalTo(self); does just that, because it's a bit ambiguous. However, one thing is certain that it adds the missing restrictions that you were looking for.

Possible missing restrictions:

• The purple height of the view should be equal to the height of the green view.
• The height of the yellow image should be equal to the purple height of the view.
• The height of the green image should be equal to the height of the yellow view.

Hope this clarifies this for you.