如何使用不同屏幕的约束来调整视图的高度和宽度？

Question

I am very new to xocde 6 & autolayout.I am designing screens for multilple devices.I have some views such as images,textfields.I have desgined them for iPhone.I have added some fix height & width constraints.So height & width remian fix for all devices.I want to change the height & width of the view acrding to screen size.I have tried one method which was

1. make width equal to parent view & give multiplier 0.5.
2. keep height fix.
3. give aspect ratio.

This way view was aligned but it height was fixed.I have also used leading space,trailing space but in this way sometimes unexpected results are achieved.So is there any better way of doing it? I am really having hard time figuring it out.

Answer 1

If you're new, just for alternative I suggest you to use PureLayout. You can use in your project with cocoapods or Carthage. With this library you can super easily make this constraints for different screens. There is a example project in github project where you can find many different scenarios in. Here is the github page of project :

https://github.com/smileyborg/PureLayout

Here is some example code snippet for you @deepak kumar :

- (void)updateViewConstraints
{
    if (!self.didSetupConstraints) {
        // Apply a fixed height of 50 pt to two views at once, and a fixed height of 70 pt to another two views
        [@[self.redView, self.yellowView] autoSetViewsDimension:ALDimensionHeight toSize:50.0];
        [@[self.blueView, self.greenView] autoSetViewsDimension:ALDimensionHeight toSize:70.0];

        NSArray *views = @[self.redView, self.blueView, self.yellowView, self.greenView];

        // Match the widths of all the views
        [views autoMatchViewsDimension:ALDimensionWidth];

        // Pin the red view 20 pt from the top layout guide of the view controller
        [self.redView autoPinToTopLayoutGuideOfViewController:self withInset:20.0];

        // Loop over the views, attaching the left edge to the previous view's right edge,
        // and the top edge to the previous view's bottom edge
        [[views firstObject] autoPinEdgeToSuperviewEdge:ALEdgeLeft];
        UIView *previousView = nil;
        for (UIView *view in views) {
            if (previousView) {
                [view autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:previousView];
                [view autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:previousView];
            }
            previousView = view;
        }
        [[views lastObject] autoPinEdgeToSuperviewEdge:ALEdgeRight];

        self.didSetupConstraints = YES;
    }

    [super updateViewConstraints];
}

I believe if you could start now, it'll be easier for you to pass auto layout headache.

Answer 2

I'm not sure what you're trying to ask, but it sounds like an Auto Layout question, if you don't want your Text View to fill up the entire screen, go ahead and select the Text View in your Main.storyboard and click the Pin button, like so:

Notice that all of the constraints are enabled, which means this text view will pin to the edges of your iOS screen.

If you want to later edit those constrains, go ahead and go to the Size Inspector , and you can directly click on the constrains: