Autolayout issue in iOS

Question

I have a label,image and button in a container view of type UIView . The container view is subview of supercontainerview of type UIView again. All the layout is done in code using autlayout visual format language. What i want to achieve is remove the label when a button is pressed and expecting the super container to resize its contents. but what currently happens is the whole super container disappears from the screen. Can someone tell me why this is happening? Attached is my code sample.

- (void)viewDidLoad {
    [super viewDidLoad];


    superContainer = [[UIView alloc] initWithFrame:CGRectZero];
    superContainer.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:superContainer];


    Container = [[UIView alloc] initWithFrame:CGRectZero];
    Container.backgroundColor = [UIColor redColor];

    [superContainer addSubview:Container];

    NSDictionary *sViews = NSDictionaryOfVariableBindings(Container);

    [superContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10.0-[Container]-10.0-|" options:0 metrics:nil views:sViews]];

    [superContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10.0-[Container]-10.0-|" options:0 metrics:nil views:sViews]];


    CGSize temp1 = [superContainer systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];


    superContainer.frame = CGRectMake(superContainer.frame.origin.x, superContainer.frame.origin.y, temp1.width, temp1.height);


    closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
    //[closeButton setImage: forState:UIControlStateNormal];
    [closeButton setBackgroundImage:[UIImage imageNamed:@"closebox.png"] forState:UIControlStateNormal];
    [closeButton addTarget:self action:@selector(hide:) forControlEvents:UIControlEventTouchUpInside];
    NSLog(@"Close button frame is %@",NSStringFromCGRect(closeButton.frame));
    //closeButton.frame = CGRectMake(0, 10, 32, 32);
    [Container addSubview:closeButton];


    helpLabel = [[UILabel alloc] init];
    NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:@"This is sample Text. This is sample Text.This is sample Text. This is sample Text.This is sample Text. This is sample Text.This is sample Text. This is sample Text.This is sample Text. This is sample Text. "];
    helpLabel.attributedText = attrString;


    helpLabel.numberOfLines = 0;
    helpLabel.backgroundColor = [UIColor greenColor];
    [Container addSubview:helpLabel];


    helpImageView = [[UIImageView alloc] init];
    helpImageView.image = [UIImage imageNamed:@"testimage.png"];
    NSLog(@"frame of imageview is %@",NSStringFromCGRect(helpImageView.frame));
    [Container addSubview:helpImageView];

    dismissButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [dismissButton setTitle:@"Dismiss" forState:UIControlStateNormal];
    [[dismissButton titleLabel] setLineBreakMode:NSLineBreakByWordWrapping];
    dismissButton.backgroundColor = [UIColor blueColor];
    [Container addSubview:dismissButton];

    [Container setClipsToBounds:YES];

    [self addAutoLayoutProperties];

    NSDictionary *views = NSDictionaryOfVariableBindings(helpLabel,helpImageView,dismissButton,closeButton);

    NSDictionary *metrics = @{@"buttonHeight":@32.0};

    // Horizontal layout - for helplabel
    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5.0-[helpLabel(400)]-5.0-|" options:NSLayoutFormatAlignAllLeft|NSLayoutFormatAlignAllRight metrics:metrics views:views]];
    // Horizontal layout - for helpImageView
    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[helpImageView]|" options:NSLayoutFormatAlignAllLeft|NSLayoutFormatAlignAllRight metrics:metrics views:views]];
    // Horizontal layout - for dismissButton
    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[dismissButton]-|" options:NSLayoutFormatAlignAllCenterX|NSLayoutFormatAlignAllCenterY metrics:metrics views:views]];
    // Horizontal layout - for dismissButton
    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[closeButton]-1.0-|" options:0 metrics:metrics views:views]];

    // Vertical layout

    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-1.0-[closeButton]" options:0 metrics:metrics views:views]];

    [Container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-buttonHeight-[helpLabel]-5.0-[helpImageView]-5.0-[dismissButton]-5.0-|" options:0 metrics:metrics views:views]];

    CGSize temp = [Container systemLayoutSizeFittingSize:UILayoutFittingExpandedSize];


    Container.frame = CGRectMake(Container.frame.origin.x, Container.frame.origin.y, temp.width, temp.height);

    superContainer.center = self.view.center;

}

My method to add autolayout properties

-(void)addAutoLayoutProperties {
    helpLabel.translatesAutoresizingMaskIntoConstraints = NO;
    helpImageView.translatesAutoresizingMaskIntoConstraints = NO;
    dismissButton.translatesAutoresizingMaskIntoConstraints = NO;
    closeButton.translatesAutoresizingMaskIntoConstraints = NO;

    superContainer.translatesAutoresizingMaskIntoConstraints = NO;
    Container.translatesAutoresizingMaskIntoConstraints = NO;
}

my methods to remove label.

- (IBAction)removeASubview:(id)sender {

    [helpLabel removeFromSuperview];

}

Also one more question. What happens to the constraint objects when the related view is removed from its superview. Do they exists there or get deleted??

Answer 1

You can add another constraint that should be applied in the absence of the helpLabel and its constraints, but give this new one a lower priority, so that when helpLabel is present, its constraints will govern the view, but when helpLabel is removed, the new constraint will come into play. e.g.:

[container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-buttonHeight@500-[helpImageView]" options:0 metrics:metrics views:views]];

---

By the way, if you want to see what happened to your views after helpLabel was removed, run the app with the debugger, tap the pause button () to pause the app, and at the (lldb) debugger prompt, type the following command:

po [[UIWindow keyWindow] recursiveDescription]

Note, it can sometimes be hard to identify which window is which, so I will frequently give the various views unique numeric tag properties to make it easier.

Also, at the same command line, you can use the following command to identify ambiguous layouts in your constraints:

po [[UIWindow keyWindow] _autolayoutTrace]