iPhone 上的流畅 UI 布局

Posted 2023-02-24

【中文标题】iPhone 上的流畅 UI 布局

【英文标题】：Fluid UI layout on iPhone

【发布时间】：2012-10-02 23:39:19

【问题描述】：

我有一个带有类似 UI 的 android 应用，用于查看电子邮件：

我正在尝试将此移植到 ios 并需要它与 iOS 5.0 及更高版本一起使用（因此不能在 iOS 6.0 中使用自动布局）。希望您可以根据示例说明布局应该如何调整/流动。

处理这种布局的最佳方式是什么？ From 和 Re 线需要是可变高度，如图所示（实际上 To: 线也是如此）。消息体当然需要可变高度。

到目前为止，我唯一的尝试是尝试将 UITableViewController 与静态单元格一起使用。我可以通过在 heightForRowAtIndexPath 中使用 sizeWithFont 来获得可变高度，以返回每行所需的高度。使用这种方法，我花了很长时间试图获得我想要的样式（圆角和背景仅适用于顶部）。

那么有没有更好的方法呢？也许使用集合视图或容器视图的东西？在其他一些我需要移植的屏幕上，我遇到了类似的问题，但它们有更多级别的嵌套（圆形蓝色部分在圆形蓝色部分内的白色部分内）。或者我最好不使用 IB 并仅从基本标签元素和通用视图在代码中构建整个 UI？

【参考方案1】：

我能想到的最简单的方法是手动计算viewDidLayoutSubviews 中的标签框。这是一些伪代码：

创建时：

在 IB 中，将所有标签作为蓝色区域的子视图。检查容器的自动调整大小蒙版是否贴在顶部、左侧和右侧，并且具有可拉伸的宽度。我们将在代码中修复高度和子视图框架。消息正文可以是标签或作为单独视图的文本视图。 在viewDidLoad中，适当设置包含视图的图层cornerRadius、borderColor等。

在viewDidLayoutSubviews:

时间标签：简单。只需将宽度设置为超级视图宽度减去一些填充，使用sizeWithFont: 设置高度 对于To:、From:和Re:；致电sizeToFit。获取最大宽度并坚持下去。 To: 标签：将 x 设置为 0，将 y 设置为时间标签的底部。 接收者姓名标签：将 x 设置为从 (2.) 获得的宽度，将 y 设置为与 (3.) 相同的宽度。将宽度设置为 (容器宽度 - (2.))，高度设置为 sizeWithFont:。 对 From: 和 Re: 行执行从 (3.) 到 (4.) 的相同步骤。 将蓝色视图高度设置为主题标签的框架底部。 用正文文本视图/标签填充框架的其余部分。

您必须自己添加填充，因为 sizeToFit 和 sizeWithFont: 不会为您这样做。此外，UITextView 的主体可以自行滚动，但如果您期望较长的主题标题，那么您应该将整个内容包装在另一个 UIScrollView 中（或者在 IB 中只需将主视图的类设置为 UIScrollView）

【讨论】：

谢谢，我会试一试，如果可行，我会接受。按照你写的方式，听起来并没有那么糟糕。我想我已经被其他平台宠坏了太久了——在 Windows 的早期曾经做过这些事情，但时间太长了。

这看起来确实令人生畏，因为您有许多 UI 元素，但如果您查看屏幕截图，大多数测量结果已经存在。就个人而言，我更喜欢这种方法，因为它非常简单。通常我只是将整个视图层次结构推到 IB 中，只关心静态位置和大小；然后修复代码中的所有动态测量。

我最终将每个“行”（字段表和文本）放在一个视图中，并且能够在 IB 中定义所有填充/等。因此，所有编码必须做的就是为每一行设置每个视图的高度，以及除顶行之外的所有视图的顶部/y。这很痛苦，但至少 iOS 用户界面不会/不应该像 Mac/Windows 用户界面那样复杂，所以在每个视图/屏幕上移动都不会太多。