自动布局(约束)在父视图中居中 2 并排视图 [英] Auto Layout (Constraints) Center 2 side by side views in a parent view

问题描述

我正试图弄清楚如何使用自动布局 (iOS6) 和约束来做到这一点.

基本上，我将大视图分为底部的两个部分.在这些部分(当前为子视图)中，我有一个图像视图和一个标签.我想在两边居中，使用可变长度的文本.

我的头主要是围绕自动布局，但我不确定最好的方法.我倾向于认为这在 IB 中是不可能的，但在代码中.

将继续尝试解决这个问题，但与此同时，这是我正在尝试创建的示例.

解决方案

这就是你想要的吗?

我通过在 leftSection 中添加一个视图(名为 viewCenteredInLeftSection)，然后将时钟图像和标签添加为具有这些约束的子视图:

• 使 viewCenteredInLeftSection 的 CenterX 和 CenterY 等于其父视图的 (leftSection).
• 使 clockImage 的顶部、底部和前沿等于其父视图的 (viewCenteredInLeftSection).
• 使 label 的后沿等于其父视图的 (viewCenteredInLeftSection).
• 使 clockImage 的后缘与 label 的前缘相距标准距离.

我在 Interface Builder 中调整 iOS UIView 的大小时遇到​​了问题，因此我为 OS X 制作了我的示例，并且完全可以在 Interface Builder 中完成.如果您在 Interface Builder 中制作上述约束时遇到问题，请告诉我，我将发布创建它们的代码.

2014-08-26 编辑

从时钟图像.我突出显示了标签和 viewCenteredInLeftSection，然后使用 Align > Trailing Edges 应用了约束.

与 Xcode 4 相比，使用 Xcode 5 的 Interface Builder 更容易创建.

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.

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.

解决方案

Is this what you're after?

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

• 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.

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-08-26 Edit

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

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.

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.

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.

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.

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

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