iOS的自动布局调整比例UIViews？ [英] iOS Autolayout proportionally resize UIViews?

问题描述

我想学习自动布局，所以我通过阅读教程，并与一些UIViews瞎搞只是为了看看我可以让他们去做。我不知道我会如何完成类似下面的图片从纵向到横向与自动布局的转变？我想，例如，如果我钉扎的黄色到视图的顶部，蓝色与黄色，橙色的蓝色和橙色至底部，他们会按比例调整，保持在彼此之间的20个像素和顶部和视图的底部。但蓝盒子，例如，不会让我删除它支撑到视图的顶部，即使它固定在它上面的黄色的视图，因此它的推动都记录下来，并关闭屏幕的风景线。我知道你可以固定的高度和宽度也同样让他们调整，但有什么办法可以按比例调整的事情，保持它们之间的间距？

I'm trying to learn Autolayout, so I'm reading through tutorials and also messing around with some UIViews just to see what I can get them to do. I'm wondering how I would accomplish something like the picture below on the transition from portrait to landscape with autolayout? I thought, for example, that if I pinned the yellow to the top of the view, the blue to the yellow, the orange to the blue, and the orange to the bottom, they would resize proportionally, maintaining the 20 pixels between each other and the top and bottom of the view. But the blue box, for example, won't let me remove it's strut to the top of the view, even though it's pinned to the yellow view above it, so it's pushing everything down and off the screen in landscape. I know you can pin heights and widths equally to get them to resize, but is there any way to resize things proportionally, maintaining the spacing between them?

推荐答案

它可以是令人沮丧的，以限制在Interface Builder，和Interface Builder还不能做出与乘数，如蓝色的约束。高度= red.height * 0.5 。他们都容易在code，虽然。

It can be frustrating to make constraints in Interface Builder, and Interface Builder can't yet make constraints with multipliers, such as blue.height = red.height * 0.5. They're all easy to make in code, though.

我用Interface Builder来创建和颜色UIViews，所以首先我要删除Interface Builder中创建的所有限制。

I used Interface Builder to create and color the UIViews, so first I want to remove all the constraints that Interface Builder created.

// in UIViewController.m
[self.view removeConstraints:self.view.constraints] ;

我会使用 constraintsWithVisualFormat创造了许多约束条件：选择：指标：浏览次数：，所以我创建的指针的字典到5 UIViews，并创建一个NSMutableArray举行约束

I'll create many constraints using constraintsWithVisualFormat:options:metrics:views:, so I create a dictionary of pointers to the 5 UIViews, and create an NSMutableArray to hold the constraints.

NSDictionary* views = NSDictionaryOfVariableBindings(black, red, yellow, blue, orange) ;
NSMutableArray* constraints = [NSMutableArray new] ;

然后，我创建一个定位UIViews，并表示有相同的宽度和放意见的限制;高度。

Then I create the constraints that position the UIViews and indicate views that have the same widths & heights.

[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[black]-[yellow]-|"  options:0  metrics:nil  views:views]] ;
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[red(==black)]-[blue(==yellow)]-|"  options:0  metrics:nil  views:views]] ;
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[orange]-|"  options:0  metrics:nil  views:views]] ;
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[black]-[red(==black)]-[orange]-|"  options:0  metrics:nil  views:views]] ;
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[yellow]-[blue]-[orange]-|"  options:0  metrics:nil  views:views]] ;

最后，我创建乘数的约束，并添加所有的约束。

And finally I create the constraints with multipliers, and add all of the constraints.

[constraints addObject:[NSLayoutConstraint constraintWithItem:orange  attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual  toItem:black  attribute:NSLayoutAttributeHeight  multiplier:0.5  constant:0]] ;
[constraints addObject:[NSLayoutConstraint constraintWithItem:yellow  attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual  toItem:black  attribute:NSLayoutAttributeHeight  multiplier:1.5  constant:0]] ;
[constraints addObject:[NSLayoutConstraint constraintWithItem:yellow  attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual  toItem:black  attribute:NSLayoutAttributeWidth  multiplier:1.5  constant:0]] ;
[self.view addConstraints:constraints] ;

这篇关于iOS的自动布局调整比例UIViews？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！