【问题标题】:Autolayout Contraints for a View from XIB来自 XIB 的视图的自动布局约束
【发布时间】:2017-08-09 04:14:20
【问题描述】:

我正在从一个圆圈加载一个视图(形成一个圆圈)。我想确保圆圈的大小适应各种屏幕尺寸。到目前为止,我尝试将视图放在另一个视图中,将边距固定到超级视图,然后将超级视图的纵横比设置为 1:1。这给了我一个圆圈。但是,现在,我想改变它的大小。目前,超级视图的大小由其中的另一个子视图(标签)指定。根据标签的内容,超级视图的大小会发生变化(我已将标签的字体大小设置为 Autoshrink)。如果我尝试向边距约束添加一个常数,它会起作用,但在不同的屏幕尺寸上看起来尺寸相同。此外,我尝试添加一个乘数,而乘数适用于尾随和底部边距,顶部和前导边距不会受到设置乘数的影响。下面是 IB 的截图(今天的视图是问题中的形状)。

【问题讨论】:

    标签: swift xcode io autolayout interface-builder


    【解决方案1】:

    您有一个良好的开端 - 以 1:1 的比例对齐中心 X 和 Y。您只需添加 两组 组具有不同优先级的顶部/底部和前导/尾随约束。这是一个示例,它结合了您拥有的三个约束,将使视图在所有方向上居中,沿较窄的轴有 10 点边框:

    优先级 == 750

    • 最高 == 10 分
    • 底部 == 10 分
    • 领先 == 10 分
    • 尾随 == 10 分

    优先级 == 1000

    • 顶部 >= 10 分
    • 底部 >= 10 分
    • 领先 >= 10 分
    • 落后 >= 10 分

    您在执行此操作时可能会看到错误/警告,因为 IB 不知道如何呈现它,但是一旦您完成了此操作,您将拥有所需的内容。

    编辑:

    根据记忆,有点和像素。在可能的时间和地点,试着从观点的角度来思考。您可能希望在像素方面考虑的唯一时间是图像。 (可能还有其他的图形测量方法,但同样,我是凭记忆写的。)

    点在不同设备尺寸上应该是一致的 - 因此,如果您在 4 英寸 iPhone 屏幕上有一个 100x100 的正方形,那么它在 12.9 英寸 iPad Pro 上的尺寸将是相同的。

    更重要的是,margins 可以使用自动布局设置相同。这两个屏幕上的 25 点边距相同。所以在我上面的例子中,你会得到几乎所有设备上最大的矩形,因为你设置的是边距,而不是视图大小。

    我去年深入了解了屏幕尺寸,这些是当前的屏幕尺寸:

    //iPad Pro        1366x1024
    //iPad            1024x768
    //iPad Mini       1024x468
    //iPhone 6 Plus   736x414
    //iPhone 6        677x375
    //iPhone 5        568x320
    //iPhone 4        480x320
    

    因此,基于此,上述约束将在 iPhone 4(iPhone SE 也是)上产生 300x300 的正方形,因为最窄的轴将是 320 减去两个 10 点的边距。在 12.9 英寸的 iPad Pro 上,它将是 1004x1004 的正方形。

    当您在代码中创建约束时,您还可以使用以下代码创建 layoutMarginGuide:

        let margins = view.layoutMarginsGuide
    

    这应该与在 IB 中选中“包含边距”复选框相同。本质上,这是每个设备的推荐边距大小。 (我相信这还应该包括状态栏、选项卡和导航栏,甚至是 iPhone 的“电话顶部横幅(原文如此)”。但我对此有一些问题,所以 YMMV。)

    编辑 2:

    将所有这些放在一起,您通过“自动布局”定义的内容是一种非常流畅的方式,可以最大化正方形的大小(或者在您的情况下,将正方形变成圆形)。通过设置两组边距,一组等于但具有高优先级,你让自动布局知道它可能会超出所需的约束。 大于或等于值的第二组是必需的。

    因此,在 480x320 设备中,无法满足(“等于”)的顶部/底部边距限制可以被打破,而在横向中,无法满足的前导/尾随限制将被打破。请记住,您已经设置了中心 X/Y,因此视图将居中,并且您设置了 1:1 的比例,因此它将是方形的。 (只要您没有触及优先级 - 需要默认值。

    【讨论】:

    • 谢谢 dfd。当我在点中添加约束时,会根据设备屏幕尺寸放大或缩小吗?我不确定我是否理解这些要点。认为一个点是不同屏幕尺寸的固定尺寸。屏幕与屏幕之间的点不同吗?
    • 我会添加到我的答案中。
    • 感谢 dfd 的澄清。这真的很有帮助。我添加了你提到的约束。但是,我认为我做错了什么(图片在这里:drive.google.com/open?id=0B9uT5jilt-3AVkU0M1R5UFhRVFU)。我在这里做错了什么?
    • 很难说。我想确保我给你的答案是有效的(确实如此),所以我在 Swift 3 中创建了一个示例项目。它是一个方形视图,但实际上,你的也是如此。 :-) 在这里,也许您可​​以看到哪个约束已关闭:github.com/justdfd/soSquare.git
    • 这对 dfd 有很大帮助。真的很感激。是的,我的也是正方形。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-10
    • 1970-01-01
    • 2013-12-04
    • 2023-03-31
    • 2015-10-29
    相关资源
    最近更新 更多