iOS Autolayout 按比例调整 UIViews 的大小? [英] iOS Autolayout proportionally resize UIViews?

问题描述

我正在尝试学习 Autolayout，因此我正在阅读教程，并且还使用了一些 UIView，只是为了看看我可以让它们做什么.我想知道如何在使用自动布局从纵向过渡到横向时完成如下图所示的操作?例如，我认为如果我将黄色固定在视图的顶部，蓝色固定在黄色，橙色固定在蓝色，橙色固定在底部，它们会按比例调整大小，保持彼此之间的 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 还不能用乘数做约束，例如 blue.height = red.height * 0.5.不过，它们都很容易用代码编写.

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 来创建 UIView 并为其着色，所以首先我想移除 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:options:metrics:views: 创建许多约束，因此我创建了一个指向 5 个 UIView 的指针字典，并创建了一个 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] ;

然后我创建定位 UIView 的约束并指示具有相同宽度的视图 &高度.

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 Autolayout 按比例调整 UIViews 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！