不同 iPhone 屏幕的布局

Posted 2023-02-27

【中文标题】不同 iPhone 屏幕的布局

【英文标题】：Layout for different iPhone screens

【发布时间】：2017-10-13 16:22:07

【问题描述】：

在完成了一些教程后，我正在构建我的第一个真实应用，但遇到了布局问题。将 UI 布局调整为不同的屏幕尺寸等级非常简单，但我还没有找到有关如何在相同尺寸等级内调整布局的任何信息。

例如，我有一个标签，它的顶部空间约束设置为 40 pt 从视图顶部。它在 iPhone 8 Plus 大屏幕上看起来很整洁：

但在较小的 iPhone SE 屏幕上（令人困惑的是相同尺寸等级），这个 40 pt 的约束将标签推到中间，在其下方留下相当少的有用空间：

所以我想知道是否有办法为不同的 iPhone 设置不同的约束条件：例如，iPhone 8 Plus 为 40 pt，iPhone 8 为 30 pt，iPhone SE 为 20 pt。将其他视图定位在标签下方也是如此：我希望它们在 iPhone 小屏幕上的垂直方向更紧凑，并且在大屏幕上它们之间有更多空间。我知道这最后一部分可以通过堆栈视图来解决，但使用起来并不总是很方便。

UPD。这是 8 Plus 屏幕上的完整视图布局：

它有 3 个固定约束： 1. 从“标题”标签到视图顶部 - 50 pt 2. 从“百分比”标签到“标题”标签底部 - 60 pt 3. 从“详细信息”标签到视图底部 - 80 pt。

我在所有标签中使用了文本自动收缩 + 每个标签的高度与视图的高度成正比。这使得布局更加灵活，但在 SE 小屏幕上仍然存在一个明显的问题：

如您所见，“详细信息”被压缩为“百分比”标签。在这一点上，将“百分比”标签向上移动并靠近“标题”会很好，但与高度不同，约束不能与 Superview 高度成比例（至少在 IB 中不是）。

我看到的一个选项是在顶部和中间标签之间放置一个空白视图，使其高度成比例并将“百分比”标签顶部约束设置为 0 到此空白视图。不确定是否使用这样的“拐杖”是一种好习惯。

【问题讨论】：

遗憾地说，但我觉得 Apple 正是因为这个原因错过了大小课程。要么让它适合较小的屏幕并在较大的设备上继承一些额外的空白，要么使用设备模型/方向在代码中调整它的大小。

既然你提到了堆栈视图（即使你不打算使用它），我假设你在屏幕上的元素比一个“Body”标签还多。通常，您希望将布局设计为 自动调整 以适应不同的屏幕尺寸，而不是为不同的尺寸设置显式值（否则，当您的应用在下一代新尺寸上运行时会发生什么情况设备？）。如果您向我们展示您的完整布局，也许您可​​以获得一些关于如何设置约束以使其很好地缩放的提示。

【参考方案1】：

您可能通过使用单个UILabel 并设置属性文本来获得最满意的结果，而不是尝试让多个标签和字体大小配合。

试试这个：

创建一个新的视图控制器 添加一个普通的UILabel 将约束设置为宽度的 85% 和高度的 80%，并且双向居中 将标签连接到IBOutlet

然后：

class ScalingViewController: UIViewController 

    @IBOutlet weak var theLabel: UILabel!

    override func viewDidLoad() 
        super.viewDidLoad()

        let titleFont = UIFont.systemFont(ofSize: 80.0, weight: UIFontWeightThin)
        let pctFont = UIFont.systemFont(ofSize: 100.0, weight: UIFontWeightThin)
        let paraFont = UIFont.systemFont(ofSize: 30.0, weight: UIFontWeightLight)

        // for blank lines between Title and Percent and between Percent and Body
        let blankLineFont = UIFont.systemFont(ofSize: 36.0, weight: UIFontWeightLight)

        let sTitle = "Title"
        let sPct = "78%"
        let sBody = "A detailed text explaining the meaning of percentage above and what a person should do to make it lower or higher."

        // create the Attributed String by combining Title, Percent and Body, plus blank lines
        let attText = NSMutableAttributedString()

        attText.append(NSMutableAttributedString(string: sTitle, attributes: [NSFontAttributeName: titleFont]))
        attText.append(NSMutableAttributedString(string: "\n\n", attributes: [NSFontAttributeName: blankLineFont]))
        attText.append(NSMutableAttributedString(string: sPct, attributes: [NSFontAttributeName: pctFont]))
        attText.append(NSMutableAttributedString(string: "\n\n", attributes: [NSFontAttributeName: blankLineFont]))
        attText.append(NSMutableAttributedString(string: sBody, attributes: [NSFontAttributeName: paraFont]))

        // these properties can be set in Interface Builder... or set them here to make sure.
        theLabel.textAlignment = .center
        theLabel.numberOfLines = 0
        theLabel.adjustsFontSizeToFitWidth = true
        theLabel.minimumScaleFactor = 0.05

        // set the label content
        theLabel.attributedText = attText

    

这给了我 7+、6s 和 SE 的这些结果：

而且，为了演示，它在“正文”段落中的附加文本看起来如何：

【讨论】：

哇，从来没有这样想过。谢谢这么详细的回答！