【问题标题】:How to set up different Auto Layout constraints for different screen sizes如何为不同的屏幕尺寸设置不同的自动布局约束
【发布时间】:2016-10-27 00:10:56
【问题描述】:

我有一个带有静态单元格的 tableView。该单元格包含一个完全填充它的 ImageView。我在上面还有另一个更小的 ImageView。我用约束定位这个 ImageViews。我有一个关于调整约束大小的问题。 如何在不编写 if/else 循环的情况下为不同的设备尺寸设置不同的约束常数。有没有办法在故事板中设置它?我对父布局有一个主要约束,例如常量值为 10。这对于 iPhone 5 屏幕来说是可以的,但在 iPhone 6/ 6 plus 屏幕上它应该高于 10。

iPhone5 自动布局

iPhone6 自动布局

【问题讨论】:

标签: ios swift uitableview uiimageview ios-autolayout


【解决方案1】:

很容易。您可以在 Storyboard 中更改不同大小类的常量值。我给你几个步骤,之后你就可以掌握了。

首先我们创建常量,正如您在此视图中看到的那样

接下来我们选择我们想要在其他尺寸类中改变值的常量。

现在是棘手的部分。在选择常量后的属性检查器中,可以看到常量的值。您可以在旁边看到 加号 (+) 符号,位于“常数”的左侧。

点击它并选择您想要的尺码等级。 在这里,我选择了常规高度常规宽度,即适用于 iPad 尺寸。

接下来我们给它一个新的值。因此,通常值为 61 的常量在 iPad 尺寸类别的尺寸类别中呈现时将作为 10 发挥作用。

这是输出 --

iPhone 4:

iPad 空气:

如您所见,相同的常量在运行时对应不同的大小类有不同的值。

希望我的解释对你有所帮助。

【讨论】:

  • 萨赫布,非常感谢!这么好的答案,它完全涵盖了我的问题的一部分——它适用于具有不同 SizeClasses(iPhone/iPad)的设备。当这一切都与缩放有关时我该怎么办,因为填充我的单元格的背景图像在 iPhone6 上比在 iPhone5 上更宽!如上所示,这会使两个顶部海报相对于背景图像移动。
  • 对于其他设备,例如 iPhone4 和 5,具有相同尺寸等级的您可以手动检查和更改约束,或者您可以在该方面设计图像。
  • 我知道这个解决方案,我仍在寻找适用于任何设备的通用解决方案;-))
  • 使用尺寸等级将适用于任何设备。您在情节提要中看到有一个 H 和 V 标志。好吧,您可以根据各自的尺寸等级选择它们并开始设计。有了它,您将获得 1 个适用于所有设计和尺寸的故事板
  • 重点是 iPhone5 和 iPhone 6 的纵向尺寸等级相同,屏幕上的图像比例不同。
【解决方案2】:

不用写一行代码!

有一次我的初级开发人员问我同样的问题,当时我如何区分 iPhoneSE 和 iPhone6 的某些限制,只有一个解决方案正在编写类似的东西

if device == iPhoneSE { 
   constant = 44 
} else if device == iPhone6 {
   constant = 52
}

为了解决这个问题,我创建了一个库 Layout Helper,因此现在您无需编写任何代码即可更新每个设备的约束条件。

第一步

将 NSLayoutHelper 分配给您的约束

第 2 步

为你想要的设备更新约束

第三步

运行应用程序并查看 MAGIC

【讨论】:

  • 感谢@Vitya Shurapov 将答案标记为正确!
  • 有趣的解决方案!谢谢! :)
  • 很棒的解决方案兄弟,谢谢
  • @dreamBegin 事实上我是!我实际上将您的 xcodeproj 导入到我现有的项目中,虽然我能够在情节提要中看到它,但它并没有在模拟器上呈现。尝试将所有 swift 文件复制到我的项目中,它就像一个魅力。顺便说一句,感谢您提供出色的解决方案
  • @tryKuldeepTanwar 是的,我已经做到了,现在它工作得很好!谢谢您的帮助!非常感谢并感谢您分享这个有用的图书馆!
【解决方案3】:

最后,我找到了适合我的解决方案。

  1. 我放置了透明视图并添加了对齐中心 X/Y 到 Superview(背景图像)与所需的偏移量,以适合我的海报框架(在背景图像上)-Constraints for the transparent view
  2. 然后我将 Equal width/height 附加到我的 Superview(背景图像)以用于该透明视图并更改等宽的乘数(我手动选择了 0.61)
  3. 在那之后,我获得了我的 1 张海报。我还使用偏移量垂直和水平居中,并使用了这组约束 - 宽度与 Superview 的比例,纵横比。
  4. 最后,我用这个约束处理了我的第二张海报 - 将空间引导到海报 1,将 CenterY 与海报 1 对齐(在我的情况下使用偏移量)和相等的宽度/高度。 Constraints for the Poster 1/2

因此,我拥有真正的自适应 Autolayout,它在 iPhone 5-6-6+ 上运行得非常好

【讨论】:

    【解决方案4】:

    您可以使用BayKit 完成这项工作。

    什么是 BayKit

    根据给定的屏幕尺寸和给定的偏移量计算所有屏幕尺寸的全局偏移量。

    如何使用 BayKit: 使用非常简单,只需导入 BayKit 并使用 BayKit 设置常量值,如下所示:

    import BayKit
    
    class MyViewController: UIViewController {
    lazy var box = UIView()
    let magicOffset = BayKit()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(box)
        box.translatesAutoresizingMaskIntoConstraints = false
    
        box.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: magicOffset.offseter(scaleFactor: 1.0,
        offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)).isActive = true
    }
    }
    

    如您所见,这条线计算所有屏幕尺寸的偏移量:

    magicOffset.offseter(scaleFactor: 1.0, offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)

    Offseter 功能:

    • scaleFactor:您可以设置是否要大于或小于给定的偏移量(默认设置为 1.0)。
    • 偏移量:测试设备中的首选常量。
    • 方向:您在寻找哪个方向,即(对于宽度,前导,尾随使用 .horizo​​ntal,对于高度,顶部,底部使用 .vertical)
    • currentDeviceBound:找到最适合您的设备并将其设置为主设备。 BayKit 将根据您最适合的屏幕计算约束条件!

    示例结果:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多