通过自动布局更改约束

Question

I have a grid of square buttons in a view, that fits perfectly on the iPhone 5. I now want it to look good on the 3.5-inch screen as well. I am using auto layout, and I have created new images for the 3.5-inch, that have a bit smaller height, so that they will fit on the screen (they are not squares anymore). From what I have come to understand you can not use frames as usual when using auto layout? Instead, you should use constraints. But how would I do that?

Basically what I need to do is to change the y-coordinate and the height of the buttons.

This is an example of what the screen looks like on the 4-inch screen (tab bar in the bottom).

Answer 1

Representing this in VFL, what you want is something like:

Make the vertical red boxes vertically evenly sized, spanning the vertical span of their superview:

@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|"
@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|"

Likewise, make the boxes horizontally evenly sized, spanning the horizontal span of their superview, too:

@"H:|-[subview1]-[subview4(==subview1)]-|"
@"H:|-[subview2]-[subview5(==subview2)]-|"
@"H:|-[subview3]-[subview6(==subview3)]-|"

That makes the six subviews equally sized and evenly spaced within their superview. And this illustrates one of the advantages of auto layout because we, quite explicitly, avoid any reference to y or height values. We only have to define the relationship between views, their siblings, and their superview, and auto layout takes care of the rest.

This pattern applies whether you do it programmatically with VFL like above, or in Interface Builder, but hopefully it illustrates the concept.

Alternatively, you can use a UICollectionView , which is designed for spacing out these controls, and you can set it up so it correctly adjusts the layout for portrait and landscape.

---

For example, to add six image views to my view, I can add QuartzCore.framework to project (which I can use to create the red image view background with rounded corners), then import the header:

#import <QuartzCore/QuartzCore.h>   // and 

And then in viewDidLoad :

NSMutableArray *subviews = [NSMutableArray array];

for (NSInteger i = 0; i < 6; i++)
{
    UIImageView *subview = [[UIImageView alloc] init];
    [subviews addObject:subview];
    subview.layer.cornerRadius = 10.0;
    subview.backgroundColor = [UIColor redColor];
    subview.contentMode = UIViewContentModeCenter;
    subview.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:subview];
}

NSDictionary *views = @{@"subview1": subviews[0],
                        @"subview2": subviews[1],
                        @"subview3": subviews[2],
                        @"subview4": subviews[3],
                        @"subview5": subviews[4],
                        @"subview6": subviews[5]};

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview1]-[subview4(==subview1)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview2]-[subview5(==subview2)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview3]-[subview6(==subview3)]-|" options:0 metrics:nil views:views]];

Then, if I use PNG images with a transparent background, I can set the image property for these six image views, letting auto layout define the frame , QuartzCore will do the nicely rounded corners, etc.