iphone - 使用 NSLayoutConstraint 将大型 UIView 居中

Question

我是自动布局的新手，即使这是我的第一次尝试。无论我用它做什么，结果都是白屏。这是我的尝试。

我有一个 UIView，让我说一个 parentView 框架 (60, 154, 200, 200)。它是 self.view 的 subview 。

然后我有一个动态 View ，比如 dynamicView 帧 (0, 0, 260, 100) 和一个 label 帧 (15, 25, 230, 50) 是 dynamicView 的 subview 。

当我将 dynamicView 作为 subview 添加到 parentView 时，它超出了 parentView 的范围。因此，我想调整 dynamicView 及其子项(label)的大小，使其位置位于 parentView 的中心，并且dynamicView 在 parentView 的边界内。

我的第一次尝试是设置 clipsToBounds，它在 Xcode5、iOS7 中不起作用。所以下一个选择是使用 NSLayoutConstraint 来实现这一点。我对此一无所知。我欢迎你的想法。

Answer 1

我将只解决 dyanmicView 作为 parentView 问题的一部分，然后让你从那里开始

首先:如果您正在动态创建 View ，那么您就可以开始了，但是如果您是从 Storyboard 中创建的，则必须将它从它的父级分离然后重新附加它..这就是你如何摆脱它以前的 NSConstraints(通常是 Storyboard引入的)可能与你的新 NSConstraints 发生冲突。

您还必须将它的 setTranslatesAutoresizingMaskIntoConstraints 设置为 NO b/c 这也会干扰您的 nsconstraints。

我通常会像这样执行最后两个步骤，使用 mapObjectsUsingBlock使创建约束的整个繁琐过程变得更加愉快和自然:

    [@[view_1, view_2, /../, view_n] mapObjectsApplyingBlock:^(UIView *view) {
        [view removeFromSuperview];
        [view setTranslatesAutoresizingMaskIntoConstraints:NO];
        [view setHidden:NO];
        [superView addSubview:view];
    }];

然后在应用 nsconstraints 之前，您必须确保要应用约束的 View 已经附加到它的父 View :

[parentView addSubview:dynamicView];

然后你想创建一个绑定(bind)字典:

NSDictionary *buttonBindingsDictionary = @{ @"parentView" : parentView,
                                            @"dynamicView" : dynamicView};

然后您要使用 visual format language 添加约束.. 我在这里也使用 mapObjectsUsingBlock(我会用英语解释每个约束):

NSArray *buttonConstraints = [@[@"V:|-[dynamicView(>=200)]-|",
                                @"|-[dynamicView(>=260)]-|",
                                ] mapObjectsUsingBlock:^id(NSString *formatString, NSUInteger idx){
    return [NSLayoutConstraint constraintsWithVisualFormat:formatString options:0 metrics:nil views:buttonBindingsDictionary];
}];

V:|-[dynamicView(>=200)]-| 表示垂直方向.. dynamicView 与其父级之间的上下距离应该相等.. dynamicView 的 高度也应该不小于 200

|-[dynamicView(>=260)]-| 表示水平方向上.. dyanmicview 和它的父级之间的左右距离应该相等..另外dyanmicView的宽度应该不小于260

注意:您可以自己计算并准确设置 dyanicView 和它的父级之间的左/右/下/上距离。这更简单.. 但有时 nsconstraints 搞砸了，我得自己做。

在那种情况下，它看起来像这样，其中 x 是你想出的距离:

V:|-x-[dynamicView(>=200)]-x-|
|-x-[dynamicView(>=260)]-x-|

然后你必须将约束添加到父 View :

[parentView addConstraints:[buttonConstraints flattenArray]];

注意这里我用了flatten array ，这也是我的库 b/c 中的一种方法，我想将它提供给一个单级数组，而不是数组数组。

然后你就可以开始了!

注意:我知道这可能无法完美地工作.. 但它让您知道要做什么 + 一些帮助文件。这需要一些练习，你应该看看一些 tutorials当然..我建议你从使用 Storyboard的nsconstraints开始(你可以选择一个 View ..然后去编辑器> pin> ..然后选择一些东西..获得一些即时的视觉反馈..你也可以模拟你的观点看起来像什么在 3.5"显示器与 4.0"显示器中通过选择 View Controller 立即在 Storyboard上显示，然后转到属性检查器并在模拟指标下选择不同的尺寸)

慢慢来，但有一件事是肯定的:一旦你进入 nsconstraints，你将永远不会回头!这是完全值得的!

附注你也可以animate View 也使用 nsconstraints.. 以防万一你想知道。