Work with Autolayout programmatically - ios

Question

i try to achieve the following Design with UIView´s, it should be all done with Autolayout and no hard coded Frames:
I do it with an "for loop" like this:
CGFloat y_coordinate = 0;
for(int i = 0;i < 3;i++)
{
UIView * testView = [UIView new];
testView.frame = CGRectMake(testView.frame.origin.x, y_coordinate, testView.frame.size.width, testView.frame.size.height);
testView.translatesAutoresizingMaskIntoConstraints = NO;
NSDictionary *viewsDictionary = #{#"testView":testView};
testView.backgroundColor = [UIColor redColor];
[self.view addSubview:testView];
//View should have the same Width and Height and a little Padding between them!
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:testView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:-4]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:testView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:testView
attribute:NSLayoutAttributeHeight
multiplier:1
constant:-4]];
if(i % 2) {
//odd
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:[testView]-0-|"
options:0
metrics:nil
views:viewsDictionary]];
//Here i need the Height of the View and not hard coded like here...but how?
y_coordinate += 200;
} else {
//even
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[testView]"
options:0
metrics:nil
views:viewsDictionary]];
}
}
My Problem is that i don´t know how to place the Views correctly under each other with Autolayout?

Answer 1

My Suggestion to you will be go through the auto layout tutorials online, and have a clear understanding of how the views layout themselves under "Autolayout".
One such example would be Ray Wenderlich's tutorial. Although this tutorial has not been dedicated for doing autolayout programmatically, but it does give a clear understanding of how the views are placed with the help of autolayout feature.
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1

Answer 2

#deathhorse answer may work but the metrics argument is designed for this...
NSDictionary *metrics = #{#"margin": #(y_coordinate)};
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-(margin)-[testView]"
options:0
metrics:metrics
views:NSDictionaryOfVariableBindings( testView )]];
This makes it more readable too.
EDIT
Having looked at your question again I think you are going about this the wrong way anyway.
Yes, you can use Auto Layout inside the views to lay out the labels and image and stuff....
However, this view should be using a UICollectionView and not just laid out in a for loop like this. Even if you're only adding 4 and you don't want it to scroll it would be much more flexible as a UICollectionView.

Answer 3

that's quite simple, create your constraint like this
[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:#"V:|-(%.0f)-[testView]", y_coordinate]
options:0
metrics:nil
views:NSDictionaryOfVariableBindings( testView )]];