Question

我正在尝试在iOS 7应用程序上实现相当复杂的屏幕布局（我知道它只能在iPhone上运行）。

屏幕布局本质上非常动态，看起来像这样：

+----------------------------+
|                            |
| hero image, 320px x 150 px |
|                            |
+----------------------------+
|    full width button       |
+----------------------------+
|  timestamp (one line)      |
|  LARGE CAPTION (one line)  |
|                            |
|  Intro text       +--------+
|  that may take up |Image   |
|  a few lines, but |aligned |
|  don't actually   |to intro|
|  know for sure how|text    |
|  many             +--------+
+----------------------------+
|  Some    Data              |
|  In      Tabular           |
|  Form    Which may go over |
|          more than one line|
+------------HR--------------+
|  Long piece of text,       |
|  several paragraphs,       |
|  must scroll for as long   |
|  as needed.                |
+----------------------------+
|  Some footer text          |
+----------------------------+

整个屏幕肯定需要滚动。

我发现的常用方法是：

的UITableView

每个组件都是UITableView中的一行 - 问题是我们事先并不知道每行的高度，因此需要进行手动文本计算。

的UIScrollView /自动版式

从未在任何程度上使用过这个，但我无法弄清楚如何使用Interface Builder创建一个冗长的组件列表 - 它在UIScrollView中占用多个屏幕。

大多数方法还需要编写大量代码来计算高度，还需要指定小部件字体，颜色和高度。

我已经知道了一种用于表达所有这些组件之间的高度，对齐和关系的通用语言：CSS。我很想在整个过程中使用webview，但是：这不是项目其余部分的风格，而且按钮等交互式组件也必须像原生一样。

解决此问题的最佳方法是什么？

Answer 1

<强>的UITableView

每个组件都是UITableView中的一行 - 问题在于   我们事先并不知道每行的高度，所以手工文字   计算是必需的。

那有什么问题呢？如果您的行的高度不同，则表视图将根据需要向其数据源询问每行的高度。如果你计划拥有一千行，这不是一个好的选择，但事实并非如此。你只有五到六行，所以行变高的高度不是问题。

由于布局中的每一行都有不同的外观，因此您需要提供许多不同的单元格类型。在IB中很容易将它们列出来，所以它应该不是问题。

<强>的UIScrollView /自动版式

从未在很大程度上使用过这个，但我无法弄清楚如何   使用Interface Builder
创建一个冗长的组件列表

非常简单 - 您可以在容器视图中排列视图，并设置约束，使一个视图的顶部约束到上一个视图的底部。由于您要在运行时调整每个子视图的高度，因此您无需在故事板中包含每个子视图的完整高度。使用缩短版本可以轻松地将它们安排在IB中。

Answer 2

这可以在Interfacebuilder中使用自动布局完成，该布局在您使用的iOS7中可用。

这是基本功能，在https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/Introduction/Introduction.html

中讨论

创建一个这样的连接的示例如下：

enter image description here

为了您的照片，只需添加额外的＆＃34;线＆＃34;在介绍文本的顶部，作为介绍文本和图像的指南。该行将不可见。

由于这是一个大多数垂直的应用程序，您可以简单地将一个元素的下边缘连接到下部元素的上边缘。

此外，您还可以使用iOS7字体功能，这将根据字体大小的变化自动布局您的UI。这些首选项也可以由用户设置为可访问性。

Answer 3

我为此目的写了一个库。我不知道为什么Apple没有提供默认值，这是疯了。 ETFlowView，它可以在Github上找到。

如何表达复杂的iOS屏幕布局

3 个答案: