【问题标题】:Resizing Auto Layout Constraint调整自动布局约束
【发布时间】:2017-07-05 08:13:37
【问题描述】:

我正在使用 Xcode 8 开发 iOS 应用程序。即使在阅读了各种教程后,我也无法理解自动布局约束。我正在尝试找出哪些约束组合允许我在顶部布局指南和图像视图顶部之间调整间距。

以下是 iPhone 7 Plus 上的视图预览:


iPhone 7 Plus 演示

UIImageView 的顶部约束当前设置为 =50,这是大屏幕的完美尺寸。但是,我试图在较小的屏幕上缩小此间距,如下所示:


iPhone 4s 演示

我尝试了各种不同大小和优先级的各种约束的所有可能组合,但间距要么在所有屏幕上都很小,要么在所有屏幕上都很大。有什么我遗漏的吗?

【问题讨论】:

    标签: ios iphone swift xcode autolayout


    【解决方案1】:

    您可以为不同的特征指定不同的约束。 你可以像下面那样做

    override var traitCollection: UITraitCollection {
        let trait = super.traitCollection
        if view.bounds.size.height < 500 {
            return UITraitCollection(verticalSizeClass: UIUserInterfaceSizeClass.compact)
        }
        return trait
    }
    
    • 覆盖特征集合
    • 选择约束
    • 在检查器中为约束的常量字段前选择 + 按钮
    • 高度选择紧凑,宽度选择任意
    • 它将为此约束创建另一个常量字段。
    • 指定较低的常数值

    否则,您可以将该约束设为出口,并在代码中检查 view.bounds.size.height

    【讨论】:

    • 这对我来说是新的,所以感谢您打开我的眼睛。但是,iPhone 7+ 和 4s 的高度都是常规的 -​​ 因此为这两种效果添加了变化。我应该提到我只在纵向模式下工作 - 有什么想法吗?
    • 我进行了更改。您可以在视图控制器中覆盖 traitCollection。您可以始终使 4s 设备高度紧凑。这样您也不必担心方向变化
    • 如果您想直接更改约束常数值。您应该在 updateViewConstraints() 覆盖中做到这一点。这样您就不必在更改约束后重新布局父视图
    • 这看起来可行,谢谢。我会再等一会儿,因为理想情况下我希望看到情节提要中的变化,而不仅仅是在运行时。
    【解决方案2】:

    您可以通过使用topConstraint 的出口来更改与高度成比例的顶部间距,并在viewDidLoad 方法中更改其值。 .在这里,您需要找到一个常数值,将其乘以设备的实际高度即可得出所需的顶部间距。假设您需要 7+ 中的 50p,其屏幕尺寸为 736p,因此常数为 50/736 = 0.067。所以在 4s 内间距可以是 480 * 0.067 = 33。

    你可以这样做

    topspace.constant = self.view.frame.size.height * 0.067
    

    【讨论】:

    • 这将是我的首选,因为它会在情节提要中可见。不幸的是,当使用您的值时,我得到以下信息:imgur.com/a/IrB94 如果我使用 50,它在两个屏幕上使用相同的间距而不是可调整的。
    • 很抱歉,您使用上述值得到了什么??
    • 你试过在设备或模拟器上使用上述值运行吗?
    • 是的,在 iOS 中,如果你给一个元素一个约束,它在所有设备上都是相同的
    • 嗯好吧,也许我想要实现的目标是不可能的。
    【解决方案3】:

    在尝试了上述想法之后,我找到了解决问题的方法,让我可以看到情节提要中的变化。我将 UIImageView 放置在首选位置(在 iPhone 7+ 上)并在当前画布值处设置垂直对齐约束 - 然后将此约束设置为优先级 750。

    然后我在顶部布局指南中添加一个大于或等于 10 的顶部约束,其优先级为 1000。

    当在更大的屏幕上看到时,UIImageView 的位置朝向垂直对齐。在较小的屏幕上看到时,垂直对齐会将图像推到顶部,但优先级较高的顶部约束 10 会将其保持在屏幕上。

    【讨论】:

      猜你喜欢
      • 2013-05-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-06-17
      • 1970-01-01
      • 2012-10-07
      相关资源
      最近更新 更多