ui标签之间灵活的水平间距 [英] Flexible horizontal spacing between ui labels

问题描述

我在故事板中使用自动布局与所有分辨率支持，但我困在一件事。我想使用约束我的标签之间的灵活水平间距。请参阅屏幕截图更多的细节。
这是一个4.7英寸屏幕。此屏幕是正确的，因为我为特别是此屏幕设计

I am using auto layout in storyboard with all resolution support,but I am stuck on one thing that.I want flexible horizontal spacing between my labels using constraints.Please see screenshot for more details. This is a 4.7inch screen.This screen is correct as I designed for particularly this screen

4英寸屏幕

5.5英寸

IPad屏幕

请帮助我们在所有支持的分辨率下自动布局和约束来管理我的标签间距。

Please help to manage my labels spacing equally in all supported resolutions with auto layout and constraints.

编辑

这是我的视图层次结构，它也是一些视图控制器视图的子视图。

This is my view hierarchy and it is also a subview of some view controller's view.

推荐答案

您有5个视图包含标签。让我们调用 view1 通过 view5 ，让我们调用他们的超级视图 orangeView

You have 5 views containing labels. Let's call those view1 through view5 and let's call their super view orangeView.

1. 首先设置 orangeView 。将其前缘限制在其超级视角的前缘。将其后缘限制到其超级视图的后缘。

1. Start by laying out the orangeView. Constrain its leading edge to the leading edge of its super view. Constrain its trailing edge to the trailing edge of its super view. Constrain its height to 50.

添加5个视图作为 orangeView 的子视图。

Add 5 more views as subviews of orangeView. Lay them out visually approximately as you want them to be.

从最左侧的视图开始，我们将调用 view1 ，限制其顶部边缘从它最近的邻居的顶部边缘（这是 orangeView 的顶部）8点。将其底边从 orangeView 的底边限制到8点。将其左边界限制为距离其最近邻居的8个点。对视图 2 到 4 重复此操作，始终将其顶部，左侧和底部边缘约束为距离最近邻。对于 view5 ，将所有4条边限制为距离最近邻居的8个点。

Starting with the leftmost view, which we'll call view1, constrain its top edge to be 8 points from the top edge of it nearest neighbor (which is the orangeView's top). Constrain its bottom edge to 8 points from the bottom edge of orangeView. Constrain its left edge to be 8 points from its nearest neighbor. Repeat this for views 2 through 4, always constraining their top, left, and bottom edges to be 8 points from the nearest neighbor. For view5, constrain all 4 edges to be 8 points from the nearest neighbor.

约束 view2 的宽度等于 view1 的宽度。 Constrain view3 的宽度等于 view2 的宽度。 Constrain view4 的宽度等于 view3 的宽度。约束 view5 的宽度等于 view4 的宽度。

Constrain view2's width to be equal to view1's width. Constrain view3's width to be equal to view2's width. Constrain view4's width to be equal to view3's width. Constrain view5's width to be equal to view4's width. This is what enables all of the views to grow together in size.

将视图添加为每个视图的子视图 view1 通过 view5 。将它们的宽度和高度限制为足够大以容纳文本。为每个标签添加2个约束，使其在包含视图中垂直和水平居中。

Add a label as a subview to each of views view1 through view5. Constrain their widths and heights to be big enough to hold your text. Add 2 constraints to each label to center it vertically and horizontally in its containing view.

这篇关于ui标签之间灵活的水平间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！