Xcode 5，如何在显示的场景中使用带有方向的autolayout？

Question

我正在与AutoLayout进行斗争，以安排两个按钮，如下所示。我已经观看了最初的2012年WWDC视频和Xcode-5 WWDC更新视频。还有其他各种视频和教程。

我很难描述这个问题，所以我制作了一个图像来显示这个问题。

我可以对齐简单的布局，就像屏幕底部的两个按钮，我已经尝试添加一个容器，然后添加按钮。

我开始觉得这不可能了。

有人能告诉我吗？

​

​

Answer 1

以下是我们可能要求自动布局执行的常见行为：

• 将纵向布局的上半部分移到风景中的左侧。
• 和，将肖像布局的下半部分移到景观中的右半部分。

我会这么做的。我将为布局的两个部分创建两个内容视图。尽管内容视图将在IB中创建，但它们的所有约束将仅仅是占位符，并在运行时被删除(通过在每个约束的Attributes检查器中选中一个框)。但是，为了创建占位符约束，需要在IB中显式创建约束。在代码中，内容视图的约束是根据设备旋转动态创建的。

​

​

这种方法的优点是您可以在IB中为内容视图布局子视图，而不必担心方向。内容视图约束的配置可以抽象到UIViewController基类中。

以下是没有任何子视图的内容视图的屏幕截图。根视图是白色的，可以在状态栏后面看到峰值。

​

​

​

​

下面是配置内容视图约束的代码：

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *topContentView; // moves to the left half in landscape
@property (weak, nonatomic) IBOutlet UIView *bottomContentView; // moves to the right half in landscape
@property (nonatomic, strong) NSArray *constraintsForContentViews;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.constraintsForContentViews = @[];

    [self configureConstraintsForContentViewsForInterfaceOrientation:UIInterfaceOrientationPortrait];
}

// instead of creating this helper method, this code could be placed in the view controller's updateViewConstraints method
- (void)configureConstraintsForContentViewsForInterfaceOrientation:(UIInterfaceOrientation)orientation
{
    UIView *topView = self.topContentView;
    UIView *bottomView = self.bottomContentView;
    UIView *leftView = self.topContentView; // unnecessary but improves readibility of visual format
    UIView *rightView = self.bottomContentView; // unnecessary but improves readibility of visual format
    id topGuide = self.topLayoutGuide;
    id bottomGuide = self.bottomLayoutGuide;
    NSArray *visualFormats = nil;

    // remove prior constraints
    [self.view removeConstraints:self.constraintsForContentViews];
    self.constraintsForContentViews = @[];

    // build visual formats for orientation
    if (UIInterfaceOrientationIsPortrait(orientation)) {

        // portrait
        visualFormats = @[@"H:|[topView]|", @"H:|[bottomView]|", @"V:[topGuide][topView(bottomView)][bottomView(topView)][bottomGuide]"];

    } else {

        // landscape: topView becomes leftView by name only, bottomView becomes rightView by name only
        visualFormats = @[@"H:|[leftView(rightView)][rightView(leftView)]|", @"V:[topGuide][leftView][bottomGuide]", @"V:[topGuide][rightView][bottomGuide]"];
    }

    // install new constraints
    for (NSString *format in visualFormats) {

        NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:0 views:NSDictionaryOfVariableBindings(topView, bottomView, leftView, rightView, topGuide, bottomGuide)];
        [self.view addConstraints:constraints];

        self.constraintsForContentViews = [self.constraintsForContentViews arrayByAddingObjectsFromArray:constraints];
    }
}

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self configureConstraintsForContentViewsForInterfaceOrientation:toInterfaceOrientation];
}

@end 

Answer 2

我一直在做的一件事是，在您的“左窗格”中，添加顶部和左侧约束，然后添加高度和宽度。在“右窗格”上，添加底部和右侧约束、高度和宽度。

然后，在- willRotateToInterfaceOrientation:duration:上，您可以调整每个约束的常量，使大小完全符合您的要求。