use constraints to automatically adjust the spacing ios - ios

Question

hello i am using constraints to show the view as desired horizontally and vertically an it is working well,
But now according to my requirement i have to use constraints in a seance that if i hide(set hidden) any of the placed button or label then remaining buttons or labels have to adjsut automatially.
for ex :- i am using four button in a series with equal spacing(filling the view). Now if i hide one of the button from the code then remaining three buttons should adjust themseleves according to space
I want this:
to convert to:
if i hide one of the four buttons.

Answer 1

Instead of hiding the button, you can animate and change it's width constraint to 0. This will probably look better also
i.e something like this:
button2WidthConstraint.constant = 0
UIView.animateWithDuration(0.3) { () -> Void in
self.view.setNeedsLayout()
}

Answer 2

This is kinda difficult using autolayout only. Even if you just change the width constraint to 0 you're gonna have to deal with the spacings. You will need to adjust spacing for edge buttons differently then for buttons in middle - when you change width to 0, there's still left and right constraint and you need to determine which one to zero out as well.
One approach is to use UIStackView which handles this case automatically for you. You can set spacing and distribution of buttons in storyboard, made little sample app so you can see the settings yourself.
After that you just call: removeFromSuperview and the UIStackView distributes other buttons for you. You can animate the transition as well.

Answer 3

i have tried to solve the problem this way, you can change it as per your requiremne. I have taken UIView(you can take UIButton here) and UIStackView(horizontal axis).
-(void)createOrUpdateUI
{
//View 1
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor blueColor];
[view1.heightAnchor constraintEqualToConstant:40].active = true;
[view1.widthAnchor constraintEqualToConstant:60].active = true;
//View 2
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor greenColor];
[view2.heightAnchor constraintEqualToConstant:40].active = true;
[view2.widthAnchor constraintEqualToConstant:60].active = true;
//View 3
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor magentaColor];
[view3.heightAnchor constraintEqualToConstant:40].active = true;
[view3.widthAnchor constraintEqualToConstant:60].active = true;
//View 4
UIView *view4 = [[UIView alloc] init];
view4.backgroundColor = [UIColor magentaColor];
[view4.heightAnchor constraintEqualToConstant:40].active = true;
[view4.widthAnchor constraintEqualToConstant:60].active = true;
//Stack View
UIStackView *stackView = [[UIStackView alloc] init];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionEqualSpacing;
stackView.alignment = UIStackViewAlignmentCenter;
stackView.spacing = 30;
NSArray *viewArray = [[NSArray alloc] initWithObjects:view1, view2, view3, nil];
for (UIView *view in viewArray) {
[stackView addArrangedSubview:view];
}
stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];
//Layout for Stack View
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
}
and it outpit's as :
in above code just change line :
NSArray *viewArray = [[NSArray alloc] initWithObjects:view1, view2, view3, nil];
to
NSArray *viewArray = [[NSArray alloc] initWithObjects:view1, view2, view3, view4, nil];
and output is :
Hope it helps.