CODEWITHSUNDEEP
iosobjective-cuiviewautolayout
Davis
Davis

Reputation: 1263

Work with Autolayout programmatically

i try to achieve the following Design with UIView´s, it should be all done with Autolayout and no hard coded Frames:

enter image description here

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?

Upvotes: 0

Views: 313

Answers (3)

Fogmeister
Fogmeister

Reputation: 77641

@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.

Upvotes: 2

deathhorse
deathhorse

Reputation: 647

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 )]];

Upvotes: 0

HeadOnn
HeadOnn

Reputation: 1490

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

Upvotes: 2

Related Questions