Resize subviews in Autolayout visual form

Question

I've failed on migrating my app from Autoresize to Autolayout mechanism. All I need is a view with dynamic size and subviews that will be connected to hte left top corner with the same size as their superview. In IB I've set size for PieView (My superview) as 186x186. And let the IB to generate all needed Constraints (I will create new ones in code): Interface builder. Constraints described only for scroll view

PieView.m -updateConstraints()

- (void)updateConstraints {
[super updateConstraints];
[self removeConstraintsAffectingViewAndSubviews];
[self setTranslatesAutoresizingMaskIntoConstraints:NO];

CGFloat sizeCoef = 0.7f;
CGFloat percent = [self.category getFillinPercent] / 100.0f;
percent = percent > 1.0f ? 1.0f : percent;
sizeCoef += (1.0f - sizeCoef) * percent;

NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:self
                                                         attribute:NSLayoutAttributeWidth
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:nil
                                                         attribute:NSLayoutAttributeNotAnAttribute
                                                        multiplier:1.0f
                                                          constant:100.f];//kDiameter * sizeCoef];

NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:self
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:NSLayoutAttributeNotAnAttribute
                                                         multiplier:1.0f
                                                           constant:100.0f];//kDiameter * sizeCoef];
//_imgEmptyCircle, _imgFullCircle - UIImageViews
NSDictionary *views = NSDictionaryOfVariableBindings(_imgEmptyCircle, _imgFullCircle, self);
NSDictionary *metrics = @{@"height":@100.0};

[self addConstraints:@[width, height]];

NSString *visualForm = @"H:|[_imgEmptyCircle(height)][_imgFullCircle(height)]|";
NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:visualForm
                                                                     options:0
                                                                     metrics:metrics
                                                                       views:views];
visualForm = @"V:|[_imgEmptyCircle(height)][_imgFullCircle(height)]|";
NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:visualForm
                                                                      options:0
                                                                      metrics:metrics
                                                                        views:views];
[self addConstraints:verticalConstraints];
[self addConstraints:horizontalConstraints];

}

The result really surprised me. Blue one displayed correctly as I want, but green one has strange behavior.

Blue is the _imgEmptyCircle, green is the _imgFullCircle

Off course I have error: Unable to simultaneously satisfy constraints.
First imageView:
NSIBPrototypingLayoutConstraint:0xa2795d0 'IB auto generated at build time for view with fixed frame' V:[UIImageView:0x8a37150(186)]>
NSLayoutConstraint:0xa0305c0 V:[UIImageView:0x8a37150(100)]
Second imageView:
the same one
Probable for PieView:
( NSLayoutConstraint:0x8a40750 V:[CEPieView:0x8a36e50(100)], NSLayoutConstraint:0xa030570 V:|-(0)-[UIImageView:0x8a37150] (Names: '|':CEPieView:0x8a36e50 ), NSLayoutConstraint:0xa0305c0 V:[UIImageView:0x8a37150(100)], NSLayoutConstraint:0xa0305f0 V:[UIImageView:0x8a37150]-(0)-[UIImageView:0xa277cf0]> NSLayoutConstraint:0xa030620 V:[UIImageView:0xa277cf0(100)], NSLayoutConstraint:0xa030650 V:[UIImageView:0xa277cf0]-(0)-| (Names: '|':CEPieView:0x8a36e50 ) )

Please, give me an advise how to fix it. How to create and old autoresizing mask(UIViewAutoresizingFlexibleHeight, UIViewAutoresizingFlexibleWidth) with the help of AutoLayout mechanism. Any help will be appreciated.

Can you explain which one is the green view and which one is the blue view? How is your view hierarchy setup? — axelcdv
PieView has 3 subviews. One of them, last one, in not used now and is a redundant in out discussion. First imageView has a blue background, and second (in the middle on IB) has a green background. Thank you, for reply — Aliaksandr B.

axelcdv axelcdv · Accepted Answer · 2013-10-08T08:54:54

The way you're setting the constraints is wrong. Basically you're asking the superview to be 100pts by 100pts, and to contains two subviews that are each 100pts by 100pts and are beside AND on top of each other. So first your superview would have to be 200pts wide and/or tall, and then you can't have two view that are both beside each other and on top. What you really want to do (I think) is having:

NSString *visualForm = @"H:|[_imgFullCircle]|"; // No need to explicitly set the height

Then add the corresponding constraint, then:

visualForm = @"H:|[_imgEmptyCircle(height)]|";

And add another constraint for this, and do the same for vertical constraints.

Basically you'd end up with:

//_imgEmptyCircle, _imgFullCircle - UIImageViews
NSDictionary *views = NSDictionaryOfVariableBindings(_imgEmptyCircle, _imgFullCircle, self);

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_imgEmptyCircle]|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_imgFullCircle]|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:views]];                                                                       
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_imgEmptyCircle]|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_imgFullCircle]|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:views]];

Resize subviews in Autolayout visual form

1 Answers