ios – 使用NSLayoutConstraint垂直居中两个视图

想象一下这个场景.你有一个UI ImageView和一个UIButton.第一个是300×360,第二个是210×70. imageview包含目录图像,按钮显示“打开目录”.

我想根据这些要求在主视图中定位元素：

>两个元素应水平居中,即center.x坐标应全部相等(视图,图像和按钮);
>这两个元素应按以下方式垂直居中：分隔符(灵活) – imageview – 分隔符(固定,假设30分) – 按钮 – 分隔符(灵活).最上面和最下面的分隔符应该具有相同的大小(这是居中的含义).

我无法使用NSLayoutConstraint使其工作.

到目前为止,我所做的一直是使用NSLayoutAttributeCenterX和NSLayoutRelationEqual将两个元素的X坐标居中到同一个视图属性.

根据我的想法,最后一部分是修复它们的垂直对齐.
我尝试使用@“V：| – [imageview(360)] – [button(70)] – |”但它不起作用(无法同时满足约束.).

如果我使用@“V：| – [imageview(360)] – [按钮] – |”我觉得一切都很好.也就是说,顶部是完美的但是按钮被拉伸以填充内部分隔符和视图底部之间的间隙.

如何使这些元素固定大小并让自动布局只是弄清楚如何将它们放在视图中？

解决方法

通过这样做,我能够做到这一点：

NSNumber *sepHeight = @60.0F;

// Center the two views horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];

// Position the two views one below the other,using the separator height defined above
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageview]-sepHeight-[button]"
                                                                  options:0
                                                                  metrics:NSDictionaryOfVariableBindings(sepHeight)
                                                                    views:views]];

// Force the button distance from the bottom to be the half of the size of the content
CGFloat constant = (imageview.frame.size.height + button.frame.size.height + [sepHeight floatValue]) / 2.0;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                      attribute:NSLayoutAttributeBottom
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1
                                                       constant:constant]];

棘手的部分是恒定值.该值是所有视图高度的一半,包括它们的分隔符.这意味着,如果imageview的高度为360,按钮的高度为70,分隔符为60,则该常量将为(360 70 60)/ 2 = 245.

确实应该有一种更聪明的方式,但是现在我觉得这没关系.