Resize superview while adding subviews dynamically with autolayout

Question

I have to show a popover on iPhone screen with multiple "Switch" controls. And to add and remove subviews on/from popover view with switch on/off actions respectively. For better illustration of the situation see below

images.

The above popover view first appears when user taps on a button. The popover has to stay always at the center of the screen and initially add contact switch will be in off condition. When turned on the below subviews has to be added on popover while keeping the popover in center of the screen and increasing the height of popover as per subviews.

And just like the above the popover view has to grow again in height with adding two more subviews when "Add mail" switch will be "ON". And finally look like this,

That's it. I am using auto-layout through out my application and this is where I am perplexed. I know I can remove the popovers and one more new each time but that seems to be kind of novice option. So is there any simple way to add subviews and expand its superview dynamically with auto-layout ? I've seen many questions with UILabel and working with respect to it's intrinsic content size but still unable to get any idea with this particular situation. Any help will be appreciated. Happy coding.

Answer 1

This can be accomplished with plain layout constraints without having to manually constrain the height of the container view, and then update the constant of that constraint.

The way to do this, is to constrain the container view's height based on the bottom of the bottom most subview.

Then put a reference to this constraint within your view controller.

now you can write something like the following view controller, which will add a new subview at the bottom of the container view, and automatically update the container view's height.

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *bottomConstraint;
@property (weak, nonatomic) IBOutlet UIButton *addButton;
@property (weak, nonatomic) IBOutlet UIView *containerView;
@property (nonatomic, weak) UIView *lastView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.lastView = self.addButton;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)addButtonTapped:(id)sender {
    UIView *newView = [[UIView alloc] initWithFrame:CGRectZero];
    newView.translatesAutoresizingMaskIntoConstraints = NO;
    newView.backgroundColor = [UIColor redColor];
    [newView addConstraint:[NSLayoutConstraint constraintWithItem:newView
                                                       attribute:NSLayoutAttributeHeight
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:nil
                                                       attribute:NSLayoutAttributeNotAnAttribute
                                                      multiplier:1.0
                                                         constant:35]];

    [self.containerView addSubview:newView];
    [self.containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[lastView]-(14)-[newView]"
                                                                     options:NSLayoutFormatAlignAllCenterX
                                                                     metrics:nil
                                                                        views:@{@"lastView" : self.lastView, @"newView" : newView}]];
    [self.containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[newView]-(10)-|"
                                                                     options:NSLayoutFormatAlignmentMask
                                                                     metrics:nil
                                                                        views:@{@"newView":newView}]];

    [self.containerView removeConstraint:self.bottomConstraint];
    self.bottomConstraint = [NSLayoutConstraint constraintWithItem:self.containerView
                                                         attribute:NSLayoutAttributeBottom
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:newView
                                                         attribute:NSLayoutAttributeBottom
                                                        multiplier:1.0
                                                          constant:14];
    [self.containerView addConstraint:self.bottomConstraint];

    self.lastView = newView;
}
@end

Add this all together, and you should get the following behavior.

Answer 2

You can outlet height constraint of the view, and then set value accordingly to elements.