iOS 视图定位取决于使用约束的屏幕大小

Question

我一直在阅读文档/教程并在 Xcode 中玩弄约束，但仍然可以实现我的需要。

问题是我需要定位视图（标签、图像）并根据设备的屏幕尺寸垂直分布它们（目前专注于 iPhone）。等效的 css 将使用带百分比的边距。

标签/图像，图像不需要放大或缩小。

作为一个例子，我的 Interface Builder 中有这个。

为了说明问题，我从上到下有如下约束：

• 顶部图像有一个“垂直空间约束”（或顶部空间）到 63 的“顶部布局 Guide.Bottom”
• “会员”标签的“顶部空间”为 32
• 会员编号的“顶部空间”为 16
• 白色视图的“顶部空间”为 32，底部为 16
  • 图像视图的“顶部空间”为 32
  • 标签的“顶部空间”为 32
  • 按钮的“顶部空间”为 20

这些措施对于 iPhone 6 是正确的。现在我一直试图通过收缩约束值来将相同的信息放入更小的屏幕（iPhone 3.5 和 4 英寸）中。我试过使用乘数但没有用（或者不知道如何正确使用它）。我尝试向 wAny hCompact 添加约束，但仅适用于其中一个约束（顶部图像到上边距），所有其他约束都被覆盖。

这就是它在 iPhone 6 中的样子。

这就是我希望它在 iPhone 4（3.5 英寸）中的外观。

提前致谢。

Answer 1

Okey 所以在这种情况下，我将 NSLayoutConstraints 输出到它们对应的 ViewController 中，然后我开始在运行时根据屏幕大小来操作它们，通常是在 viewWillAppear 或 viewDidAppear 中，对于你的情况，我会假设一些事实并向你展示一个小例子：

1. 您希望顶部图像的顶部约束为视图总高度的 10%
2. 您希望会员标签的顶部约束为视图总高度的 7%。
3. 您希望成员哈希的顶部约束为视图总高度的 5%。
4. 您希望白色视图的顶部约束为视图总高度的 7%，底部为视图总高度的 5%。
5. 您希望图像的顶部约束为视图总高度的 7%。
6. 您希望标签的顶部约束为视图总高度的 7%。

7. 您希望按钮的顶部约束为视图总高度的 6%。
   所以基于这些假设，我会做以下事情：

    -(void)myLayOutMethod
    {
       //here you set the percentage of every constraint of the view . 
       CGFloat screenHeight = self.view.frame.height ; 
       CGFloat topImageConstraintValue = screenHeight/0.10f ;
       CGFloat topMembershipLabelConstraintValue = screenHeight/0.07f ;
       CGFloat topMembershipHashConstraintValue = screenHeight/0.05f ;
       CGFloat topWhiteViewConstraintValue = screenHeight/0.07f ; 
       CGFloat bottomWhiteViewConstraintValue = screenHeight/0.05f ; 
       CGFloat topImageConstraintValue = screenHeight/0.07f ; 
       CGFloat topLabelConstraintValue = screenHeight/0.07f ; 
       CGFloat topButtonConstraintValue = screenHeight/0.06 ;
   
       //now you start making changes to those constraints .
       self.topImageConstraint.constant = topImageConstraintValue;
       self.topMembershipLabelConstraint.constant = topMembershipLabelConstraintValue ;
       self.topMembershipHashConstraint.constant = topMembershipHashConstraintValue ;
       self.topWhiteViewConstraint.constant = topWhiteViewConstraintValue ;
       self.bottomWhiteViewConstraint.constant = bottomWhiteViewConstraintValue ; 
       self.topImageConstraint.constant = topImageConstraintValue ; 
       self.topLabelConstraint.constant = topLabelConstraintValue;
       self.topButtonConstraint.constant = topButtonConstraintValue ; 
       [self.view layoutIfNeeded]; 
    }
   

   当然，所有这些百分比都是虚拟值，您可以根据需要更改它们，另外制作 NSLayoutConstraint 的插座与从任何其他 UIKit 控件制作插座相同，您只需找到约束并将其拖到您的类