ios7自动布局按钮调整大小问题

Question

I am using xcode 5 with storyboards and autolayout turned ON. My layouts of one of my ViewControllers has a UIButton with an image background. The view controller also has 3 buttons anchored to the bottom of the view and some labels above. I laid out my storyboards to a 4" retina display (ie: iphone 5+) and the issue I have is when simulating to a 3.5" display (ie: iphone 4, 4s, etc)

I have pinned the height of the anchored buttons at the bottom to remain constant. What I want is when the app runs on a 3.5" display iphone, that the UIButton with the image will resize smaller (keeping all other labels & buttons same size & spacing). So the aspect ratio would remain the same for that UIButton, it would just get smaller.

I haven't been able to find anything in the auto layout tutorial or others online about how to set up constraints to do this (where the height/width remain proportional).

Answer 1

I think what you really want is as follow: 1.Label's top is 100 from its superView and its bottom is 68 from its superView 2.In 4" display, its size is 200x400 with ratio .5 3.In 3.5" display, its size is 312x624 with ratio .5

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    // create search bar
    CGRect frame = CGRectMake(60, 100, 200, 400);
    _label = [[UILabel alloc] initWithFrame:frame];
    _label.backgroundColor = [UIColor blueColor];
    [self.view addSubview:_label];

    // layout search bar
    _label.translatesAutoresizingMaskIntoConstraints = NO;
    // height
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:_label
                                                                  attribute:NSLayoutAttributeHeight
                                                                  relatedBy:NSLayoutRelationLessThanOrEqual
                                                                     toItem:nil
                                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                                 multiplier:0
                                                                   constant:400];
    // width
    [_label addConstraint:constraint];
    constraint = [NSLayoutConstraint constraintWithItem:_label
                                              attribute:NSLayoutAttributeWidth
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:_label
                                              attribute:NSLayoutAttributeHeight
                                             multiplier:0.5
                                               constant:0];
    [_label addConstraint:constraint];

    // vertical
    NSDictionary *views = NSDictionaryOfVariableBindings(_label, self.view);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[_label]-68-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:views];
    [self.view addConstraints:constraints];

    // horizontal
    constraint = [NSLayoutConstraint constraintWithItem:_label
                                              attribute:NSLayoutAttributeCenterX
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:self.view
                                              attribute:NSLayoutAttributeCenterX
                                             multiplier:1
                                               constant:0];
    [self.view addConstraint:constraint];
}

Answer 2

Checkout the 'Taking Control of Auto Layout in Xcode 5' video from the WWDC 2013 Videos -- Quickly: the top part of the Add New Constraints area is probably what your looking for

Answer 3

I guess preserving aspect ratio is NOT possible in auto layouts via interface builder. #fail.

According to this: http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-2 , at the very end of the tutorial.

So, i guess I need to do this programmatically somehow.