iOS Autolayout relative to the sibling UIViews programatically - ios

Question

I am trying to add 3 custom views (redView, greenView, yellowView) inside a container view (C1) such that all the custom views (redView, greenView, yellowView) are below each other using Auto layout constraints programatically. I want the container view (C1) to get the same size as the size of it subview, so the output should be like this.
The red, green and yellow views are just to show the expected result. Actually the custom view i have is like this.
I am using Auto Layout to do this. Here is my code to do this. RatingsSingleView is my custom view which are shown in the above image.
#interface ViewController ()
#property (weak, nonatomic) IBOutlet UIView *ratingsContainerView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *previousTopView = self.ratingsContainerView;
for(int i = 0; i < 3; ++i) {
RatingsSingleView *view = [[RatingsSingleView alloc] init];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.ratingsContainerView addSubview:view];
NSLayoutConstraint *topConstraint = nil;
if(i == 0) {
// Making the first subview top aligned to the container View top
topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousTopView attribute:NSLayoutAttributeTop multiplier:1.0 constant:10.0];
} else{
// Making the second and third subview top aligned to the view above it
topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousTopView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10.0];
}
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.ratingsContainerView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:10.0];
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.ratingsContainerView attribute:NSLayoutAttributeRight multiplier:1.0 constant:10.0];
[self.ratingsContainerView addConstraint:topConstraint];
[self.ratingsContainerView addConstraint:leftConstraint];
[self.ratingsContainerView addConstraint:rightConstraint];
if(i == 2) {
// Adding last subview bottom to the container View bottom
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.ratingsContainerView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10.0];
[self.ratingsContainerView addConstraint:bottomConstraint];
}
previousTopView = view;
}
}
#end
So the issue is i am not getting the expected result. I am pinned the container view to the left and right edges and set its height to 0 in the storyboard. once i run the above code i am getting the following result.
Can some body could guide me what i am doing wrong here. thanks

Answer 1

You have given some wrong constraints and I've corrected it try this...
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *previousTopView = self.ratingsContainerView;
for(int i = 0; i < 3; ++i) {
RatingsSingleView *view = [[RatingsSingleView alloc] init];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.ratingsContainerView addSubview:view];
NSLayoutConstraint *topConstraint = nil;
if(i == 0) {
// Making the first subview top aligned to the container View top
topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousTopView attribute:NSLayoutAttributeTop multiplier:1.0 constant:10.0];
} else{
// Making the second and third subview top aligned to the view above it
topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousTopView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10.0];
}
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.ratingsContainerView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:10.0];
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:self.ratingsContainerView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:10.0];
[self.ratingsContainerView addConstraint:topConstraint];
[self.ratingsContainerView addConstraint:leftConstraint];
[self.ratingsContainerView addConstraint:rightConstraint];
if(i == 2) {
// Adding last subview bottom to the container View bottom
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:self.ratingsContainerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10.0];
[self.ratingsContainerView addConstraint:bottomConstraint];
}
previousTopView = view;
}