自动布局（约束）中心2侧通过在父视图侧视图 [英] Auto Layout (Constraints) Center 2 side by side views in a parent view

问题描述

我想弄清楚如何使用自动布局（iOS6的）和约束做到这一点。

I'm trying to figure out how to do this with auto layout (iOS6) and constraints.

基本上我有我的大视划分成两个部分在底部。里面那些部分（目前子视图）我有一个形象的看法和标签。我想这些中心两侧，带有可变长度的文本。

Basically I have my large view divided up into two sections on the bottom. Inside of those sections (currently subviews) I have an image view and a label. I want to center those on both sides, with variable length text.

我的头大多缠自动布局，但我不知道这个最好的办法。我倾向于认为这不是在IB可能的，但在code。

My head is mostly wrapped around auto layout, but I'm not sure the best approach to this. I'm inclined to think it's not possible in IB, but is in code.

要继续试图弄清楚这一点，但这里同时是我试图创建示例。

Going to continue trying to figure this out, but in the meantime here is the example I'm trying to create.

推荐答案

这是你后？

我做到了由内添加视图（名为 viewCenteredInLeftSection ）的 leftSection ，然后添加时钟形象，标签与这些约束子视图：

I did it by adding a view (named viewCenteredInLeftSection) within your leftSection, then adding the clock image and label as subviews with these constraints:

• 请的 viewCenteredInLeftSection 的centerX和CenterY等于它的父的（ leftSection ）。


• 请的 clockImage 上，下，和前缘等于它的父的（ viewCenteredInLeftSection ）。


• 请的下降沿等于它的父的（ viewCenteredInLeftSection ）。
标签

• 请 clockImage 领先优势的尾随标签边的标准距离。

• Make viewCenteredInLeftSection's CenterX and CenterY equal to its superview's (leftSection).
• Make clockImage's Top, Bottom, and Leading edges equal to its superview's (viewCenteredInLeftSection).
• Make label's Trailing edge equal to its superview's (viewCenteredInLeftSection).
• Make clockImage's Trailing edge the standard distance away from label's Leading edge.

我有麻烦在Interface Builder调整的iOS UIViews，所以我做了我的例子为OS X和我能够在Interface Builder这样做完全。如果你有麻烦使得在Interface Builder上述限制，让我知道了，我会后code，它会创建它们。

I have trouble resizing iOS UIViews in Interface Builder, so I made my example for OS X, and I was able to do so entirely in Interface Builder. If you have trouble making the above constraints in Interface Builder, let me know, and I'll post code that'll create them.

2014年8月26日修改

旅大，这里有X code 5的引脚和调整菜单，还X code'S可用菜单栏：

Luda, here are Xcode 5's Pin and Align menus, also available in Xcode's menu bar:

下面是我的例子看起来像在Interface Builder。蓝色的观点是从原来的问题，给出的图，其中图像和标签应居中的父视图。

Below is what my example looks like in Interface Builder. The blue view is the "parent view" from the original question, the given view in which the image and label should be centered.

我添加了绿色的观点（我命名为 viewCenteredInLeftSection ）为父视图的子视图。然后，我强调了它，并使用对齐菜单水平居中集装箱和垂直中心集装箱创建约束来确定自己的立场。

I added the green view (which I named viewCenteredInLeftSection) as a subview of "parent view". Then I highlighted it and used the Align menus "Horizontal Center in Container" and "Vertical Center in Container" to create constraints to define its position.

我添加了时钟图像 viewCenteredInLeftSection 的子视图，以限制定义其宽度和高度。我强调了时钟形象和 viewCenteredInLeftSection ，然后应用使用对齐>前缘对齐>顶边和对齐>底部边缘的限制。

I added the clock image as a subview of viewCenteredInLeftSection, with constraints defining its width and height. I highlighted the clock image and viewCenteredInLeftSection, then applied constraints using Align > Leading Edges, Align > Top Edges, and Align > Bottom Edges.

我添加标签为 viewCenteredInLeftSection 的子视图，它定位是<一个href=\"http://stackoverflow.com/questions/14055900/what-constant-can-i-use-for-the-default-aqua-space-in-autolayout\">standard从时钟图像水族空间距离。我强调了标签和 viewCenteredInLeftSection ，然后应用使用对齐>后缘的限制。

I added the label as a subview of viewCenteredInLeftSection, positioning it to be the standard Aqua space distance from the clock image. I highlighted the label and viewCenteredInLeftSection, then applied constraints using Align > Trailing Edges.

这是多的更轻松地创建X code 5的界面生成器与X $ C $的C 4的。

This was much easier to create with Xcode 5's Interface Builder versus Xcode 4's.

这篇关于自动布局（约束）中心2侧通过在父视图侧视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！