使用自动布局来支持不同 iPhone 尺寸的问题（包括图表）

Posted 2023-02-26

【中文标题】使用自动布局来支持不同 iPhone 尺寸的问题（包括图表）

【英文标题】：Issue using auto-layout to support different iPhone sizes (diagrams included)

【发布时间】：2015-08-10 20:03:04

【问题描述】：

蓝色的所有内容都是 ImageView 的一部分（在 Sketch 中设计 ==> 导出为 PNG ==> 导入到 ImageView 中）。因此，它可以很好地扩展而没有任何限制。检查图形变大，我的复选标记指示用户名和密码的位置。但是，我的 TextFields（电子邮件和 PIN）不会按比例放大，也不会移动到复选标记指示的位置。我本质上希望它们保持在屏幕的相同相对部分（例如，距左侧 40%，距右侧 10%...），因为我认为这可以解决我的问题。我使用了各种约束（超级视图、领先等）并尝试了一个容器，但没有任何效果。我当然可以用不同的大小再次导出我的 Sketch 文件，但我认为我的背景图像没有任何问题。但是，我不能将我的背景图像分割成更小的东西，因为有一个我不想弄乱的背景。此外，复选标记实际上是围绕用户名和密码的框。假设除了将 imageView 绑定到边距的限制之外，我没有其他限制。

谢谢！

--kmuzumdar

【问题讨论】：

感谢您编辑它以嵌入图表。距离自己只有 7 声望！

您是否尝试过在复选标记和文本字段之间进行水平约束？

问题是复选标记只是背景图像的一部分。在我的实际设计中，它们实际上是封装文本字段的框。我没有办法引用盒子的位置，也无法分割图像，因为有背景透明度等。

蓝色大圆圈复选标记也是背景的一部分吗？

在不知道设计细节的情况下，我会说也许有一种方法可以使用多个图像。

【参考方案1】：

如果您打破了 iPhone 6 外壳的一些限制，或者您将左 40% 设置为 相等，请记住，仅缩放是不够的，屏幕比例是设备之间也不同。

试试这个..

将电子邮件输入和Pin #设置为垂直居中，并带有相应的复选标记

在复选标记及其标签之间设置大于或等于约束。让他们远离彼此。

1234563 p>

应该这样做：

 let height = UIScreen.mainScreen().bounds.height
 if height == 667  // iphone 6 screen's height
    //Adjust your constrains
 

另外，您也可以手动增加

字体大小

6 或 6+。

更新：

阅读了一些 cmets，我注意到一些重要的事情，那就是你不能实例化复选标记来为它们添加约束，在这种情况下，你可以通过设备特定的约束来解决所有问题。

第 3 点和第 4 点中描述的那个。 继续手动设置所有内容，根据每个设备屏幕的设计相应地更改约束.constant 属性。 Here's a link to these sizes

恐怕你的情况没有更好的办法了。

我想到了一些其他的东西，一些非常强大的东西，那就是每个约束的 multiplier 属性。我记得使用它们来构建井字游戏板，通过这种技术设置线条的精确位置。因此，这可能是您的解决方案。 Here's a link 如何通过代码使用它们。往下走，直到看到副标题 Standard Programmatic Layout 你会发现这样的东西：

self.constraintToAnimate = [NSLayoutConstraint constraintWithItem:label
         attribute:NSLayoutAttributeTop
         relatedBy:NSLayoutRelationEqual
            toItem:self.view
         attribute:NSLayoutAttributeBottom
        multiplier:0.25
          constant:0.0];
[self.view addConstraint:constraint];

还有，下面的解释。

前两个参数确定约束的目标， 标签，以及要设置的属性：top。第三个参数， relatedBy，接受 NSLayoutRelationEqual 之一， NSLayoutRelationGreaterThanOrEqual，或 NSLayoutRelationLessThanOrEqual。接下来的两个参数允许我们 设置我们将从中派生值的源视图和属性。 这里我们说我们要使用我们的底点 superview，在 4 英寸设备上为 568 点。最后我们有 得到了一个乘数，我们将用它来得出我们的价值 — 0.25 (25%)。 我们没有使用常量参数，所以我们将其设置为 0.0。放 变成一个数学方程，它看起来像这样： label.top = superview.bottom*0.25.

因此，这可以是另一种方式，而不依赖于代码，因为这可以通过 Storyboard 来实现。