ios - iPhone 上的流畅 UI 布局

Question

我有一个 Android 应用程序，其 UI 与此类似，用于查看电子邮件:

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

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

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

那么有没有更好的办法呢？也许是使用 Collection View 或 Container View 的东西？在我需要移植的其他一些屏幕上，我有类似的问题，但它们有更多层次的嵌套(圆形蓝色部分内有白色部分，圆形蓝色部分内有圆形蓝色部分)。还是我最好不使用 IB 并仅从基本标签元素和通用 View 在代码中构建整个 UI？

Answer 1

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

关于创建:

1. 在IB中，将所有标签作为蓝色区域的 subview 。检查容器的自动调整大小掩码是否粘在顶部、左侧和右侧，以及是否具有可拉伸(stretch)的宽度。我们将在代码中修复高度和 subview 框架。消息正文可以是标签或作为单独 View 的 TextView 。
2. 在viewDidLoad中，根据需要设置包含 View 的图层cornerRadius、borderColor等。

在viewDidLayoutSubviews中:

1. 时间标签:简单。只需将宽度设置为父 View 宽度减去一些填充，使用 sizeWithFont:
设置高度
2. For To:, From:, and Re:;调用 sizeToFit。获得最大宽度并坚持下去。
3. To: 标签:将 x 设置为 0，将 y 设置为时间标签的底部。
4. 接收者姓名标签:将 x 设置为您从 (2.) 获得的宽度，将 y 设置为与 (3.) 相同。使用 sizeWithFont: 将宽度设置为(容器宽度 - (2.))和高度。
5. 对 From: 和 Re: 行执行从 (3.) 到 (4.) 的相同步骤。
6. 将蓝色 View 高度设置为主题标签的框架底部。
7. 用正文 TextView /标签填充框架的其余部分。

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