ios - Xcode 5，如何在所示场景中使用带有方向的自动布局？

Question

我正在努力使用自动布局，以排列两个按钮，如下所示。 我观看了最初的 2012 WWDC 视频和 Xcode-5 WWDC 更新视频。 还有各种其他视频和教程。

我无法描述该问题，因此我生成了一张图像来显示该问题。

我可以对齐简单的布局，例如屏幕底部的两个按钮，我尝试添加一个容器，然后将按钮添加到其中。

我开始认为这可能是不可能的。

有人可以建议吗？

Answer 1

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

• 将纵向布局的上半部分移动到横向布局的左半部分
• 和，将纵向布局的下半部分移动到横向布局的右半部分

我会这样做。我将为布局的两半创建两个内容 View 。尽管内容 View 将在 IB 中创建，但它们的所有约束都只是占位符并在运行时删除(通过选中每个约束的属性检查器中的框)。但是，为了创建占位符约束，您需要在 IB 中显式创建约束。在代码中，内容 View 的约束是根据设备旋转动态创建的。

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

这是没有任何 subview 的内容 View 的屏幕截图。 Root View 是白色的，可以在状态栏后面看到峰值。

以下是配置内容 View 约束的代码:

@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