如何使用自动布局为纵向和横向方向配置不同的布局? [英] How to configure different layouts for Portrait and Landscape Orientations using Auto Layout?
问题描述
我有一个像附加图片中的视图
I have a view like in attached image
现在我添加了约束，这样当方向更改为横向时，视图中的 UITextview 必须位于屏幕的右侧.在 UItextview 上，我添加了以下约束，
Now I am adding constraints such that the UITextview in the view has to be on the right hand side of the screen when orientation is changed to landscape. On UItextview, I have added below constraints,
- 尾随空间:Superview
- 底部空间:超级视图
这些约束虽然显示了一些关于歧义的警告，但对我有用.下面是横屏模式的截图.
These constraints though displayed some warnings on ambugity, did the job for me. Below is the screenshot of landscape mode.
我的问题是，虽然 UItextview 被移到了右侧，但当它处于横向模式时，我想要从超级视图顶部增加一些宽度.换句话说，我希望 UITextview 从它现在处于横向模式的位置向下移动一点.我正在考虑如何在 IB 中使用自动布局来做到这一点，但我无法弄清楚如何做到这一点.
My problem is though the UItextview is moved to right side, I want some additional width from top of superview when it is in landscape mode. In other words, I want the UITextview to be moved a little downward from where it is now in landscape mode. I am pondering how to do that using auto layout in IB and I am not able to figure that how.
请提出任何建议.
推荐答案
您可以通过多种方式使用约束来完成此操作，但仅凭您在 IB 中设置的约束无法自动完成此操作.通过在方法constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: 中同时使用乘数和常数值，您可以拥有一个约束来评估纵向和横向的不同距离.进行计算以找出用于这些值的内容是一种痛苦，因此我在 NSLayoutConstraint 上编写了一个类别来执行此操作.其中一种方法的示例如下:
You can do this with constraints in several ways, but there's no way to do this automatically with just constraints you make in IB. By using both the multiplier and constant values in the method, constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:, you can have one constraint that evaluates to different distances in portrait and landscape. It's a pain to do the calculations to figure out what to use for those values, so I've written a category on NSLayoutConstraint to do that. An example of one of those methods, is this:
+(NSLayoutConstraint *)topConstraintForView:(UIView *)subview viewAttribute:(NSLayoutAttribute) att superview:(UIView *)superview portraitValue:(CGFloat)pValue landscapeValue:(CGFloat)lValue {
CGFloat multiplier = (pValue - lValue)/(superview.bounds.size.height - superview.bounds.size.width);
CGFloat constant = pValue - (superview.bounds.size.height * multiplier);
NSLayoutConstraint *con = [NSLayoutConstraint constraintWithItem:subview attribute:att relatedBy:0 toItem:superview attribute:NSLayoutAttributeBottom multiplier:multiplier constant:constant];
NSLog(@"top coeffs: %f %f",multiplier,constant);
return con;
}
你使用这些的方法，是在storyboard中添加起始纵向约束，但是在约束的属性检查器中选中Placeholder - Remove at build time"框，然后在viewDidLoad中替换它，像这样:
The way you use these, is to add the starting portrait constraint in the storyboard, but check the box, "Placeholder - Remove at build time" in the attributes inspector for the constraint, and then replace it in viewDidLoad, like this:
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addConstraint:[NSLayoutConstraint topConstraintForView:self.textView viewAttribute:NSLayoutAttributeTop superview:self.view portraitValue:225 landscapeValue:50]];
}
这将根据设备的旋转自动调整文本视图的位置，无需任何进一步的代码.您可能需要更改文本字段的宽度才能使所有内容都适合 - 我将它们和获取"标签括在视图中，以便更轻松地将它们定位为一个组.该视图和文本视图具有高度和宽度约束，以及视图的顶部和左侧以及文本视图的顶部和右侧.该类别也有调整其他约束的方法，可以在 http://jmp.sh/b/找到S4exMJBWftlCeO5GybNO.
This will automatically adjust the position of the text view based on the rotation of the device without any further code. You might have to change the width of the text fields to get everything to fit properly -- I enclosed them and the "Get" labels in a view to more easily position them as a group. That view and the text view had height and width constraints, as well as top and left for the view, and top and right for the text view. The category has methods to adjust the other constraints as well, and can be found at http://jmp.sh/b/S4exMJBWftlCeO5GybNO.
执行此操作的另一种方法是使 IBOutlets 符合您在 IB 中所做的约束，并在其中一种旋转回调方法中调整它们(常量值)，或删除一些并重新制作其他一些.
The other way to do this, is to make IBOutlets to the constraints you make in IB, and adjust them (the constant value), or delete some and remake other ones, in one of the rotation callback methods.
这篇关于如何使用自动布局为纵向和横向方向配置不同的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
