2014-02-19 55 views
3

我有2个UILabels竖直堆叠:如何中心2个垂直堆叠UILabels垂直

+----------------------------+ 
| +----------------------+ | 
| | blah blah blah  | | 
| +----------------------+ | 
|       | 
| +----------------------+ | 
| | asdf fdsa   | | 
| | asdfear aoeirhaleir | | 
| +----------------------+ | 
+----------------------------+ 

的UIViews已经它们的文本在运行时动态加载的,所以它们可以由1至3行中的文本的任何地方有。我想要在文本加载后垂直对齐两者。它们应该沿着它们的“质量中心”垂直居中。

我该如何做到这一点?

编辑:就像这样: enter image description here

+0

你是什么意思,沿着它们的质心垂直居中?从图中看起来,您希望将顶部标签锚定在离顶部和底部一定距离的位置,并且距离底部一定距离? – Dima

+0

对不起,这个图并不是ASCII艺术。我会制定一个模拟并更新这个问题。 –

回答

4

将两个标签放在容器UIView中。将标签边缘限制到容器的边缘(除了顶部标签的底部和底部标签的顶部,这些边缘应该相互约束),然后将容器垂直居中放置在顶层视图中。

您的视图层次应该是这样的:

UIView rootView 
    UIView containerView 
    UILabel topLabel 
    UILabel bottomLabel 

有以下限制:

|[topLabel]| 
|[bottomLabel]| 
V:|[topLabel][bottomLabel]| 
|-[containerView]-| 
[NSLayoutConstraint constraintWithFirstItem:containerView firstAttribute:NSLayoutConstraintAttributeCenterY relation:NSLayoutRelationEquals secondItem:rootView secondAttribute:NSLayoutConstraintAttributeCenterY multiplier:1 constant:0] 

(你可以指定所有的IB这些约束而不是代码,它只是很难形容IB限制在一个StackOverflow帖子中。)

更新:在更新版本的iOS中,它更容易将标签放在垂直堆栈视图中,而不是使用普通视图并手动设置其内部的约束,但技术是相同的。

0

使用自动布局 - 通过手动NSLayoutContraint的,视觉格式语言(VFL),甚至可以通过Xcode中/ IB - 创建保持标签的宽度相等的限制,他们的X中心等于超视图的X中心,高度可变或根据您的需求有所相关。苹果的Auto Layout Guide

1

你可以用IB来做到这一点。根据内容使其高度灵活。使它们之间的距离较小并且固定。然后在上面和下面放置一个间隔视图,顶部的顶部约束到超级视图,底部约束绑定到顶部文本视图。底部间隔符应该有一个与底部文本视图相关的顶部约束和一个与超级视图相关的底部约束,所有的空间都为零。

最后,制作一个高度限制,使得2个spacer视图的高度相等。