iPhone上流畅的UI布局 [英] Fluid UI layout on iPhone

问题描述

我有一个Android应用程序，其中包含用于查看电子邮件的用户界面：

I have an Android app with a UI like this for viewing emails:

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

I'm trying to port this to iOS and need it to work with iOS 5.0 and above (so can't use auto-layout in iOS 6.0). Hopefully you can tell how the layout should adjust/flow based on the example.

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

What would be the best way to handle this type of layout? The From and Re lines need to be variable height as shown (actually the To: line as well). The message body needs to be variable height of course.

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

My only attempt so far has been trying to use UITableViewController with static cells. I am able to get the variable height that way, by using sizeWithFont inside heightForRowAtIndexPath, to return the required height for each row. Using that method I'm having a heck of a time trying to get the style I want (rounded corners and background only for the top part).

所以有一个更好的方法？也许是使用Collection View或Container View的东西？在其他一些屏幕上我需要移植我有类似的问题，但它们有更多的嵌套级别（圆形蓝色部分内的白色部分内的圆形蓝色部分）。或者我最好不使用IB并在基本标签元素和通用视图的代码中构建整个UI？

So is there a better way? Maybe something that uses Collection View or Container View? On some other screens I need to port I have similar issues, but they have more levels of nesting (rounded blue section inside a white section inside a rounded blue section). Or would I be better off not using IB and building the entire UI in code from just basic label elements and generic views?

推荐答案

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

The easiest way I can think of is to manually compute for the label frames inside viewDidLayoutSubviews. Here's some pseudo-code:

创建时：

1. 在IB中，放所有标签都作为蓝色区域的子视图。检查容器的自动调整遮罩是否粘在顶部，左侧和右侧，以及是否具有可拉伸的宽度。我们将在代码中修复高度和子视图帧。消息正文可以是标签或textview作为单独的视图。


2. 在 viewDidLoad 中，设置包含视图的图层cornerRadius，borderColor等等。

1. In IB, put all labels as subviews of the blue area. Check that the autoresizing mask of the container sticks to the top, left, and right, as well as have stretchable width. We'll fix the height and the subview frames in code. The message body can be a label or a textview as a separate view.
2. In viewDidLoad, set the containing view's layer cornerRadius, borderColor, etc. as appropriate.

在 viewDidLayoutSubviews ：

1. 时间标签：简单。只需将宽度设置为超视图宽度减去一些填充，使用 sizeWithFont设置高度：


2. 对于到：，来自：和 Re：;调用 sizeToFit 。获取最大宽度并保持不变。


3. 收件人： label：将x设置为0，将y设置为时间标签的底部。


4. 接收者姓名标签：将x设置为从（2.）得到的宽度，将y设置为与（3.）相同。将宽度设置为（容器宽度 - （2.））和高度 sizeWithFont：。


5. 执行相同的步骤（3。 ）到（4.）的来自：和 Re： rows。


6. 将蓝色视图高度设置为主题标签的框架底部。


7. 使用正文textview / label填充框架的其余部分。

1. Time label: Easy. Just set the width to the superview width minus some padding, set the height with sizeWithFont:
2. For To:, From:, and Re:; call sizeToFit. Get the max width and hold on to that.
3. To: label: Set the x to 0 and y to the time label's bottom.
4. Receiver's name label: Set x to the width you got from (2.) and y to same as (3.). Set width to (container width - (2.)) and height with sizeWithFont:.
5. Do the same steps from (3.) to (4.) for the From: and Re: rows.
6. Set the blue view height to the frame bottom of the subject label.
7. Fill the rest of the frame with the body textview/label.

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

You have to add paddings on your own because sizeToFit and sizeWithFont: won't do that for you. Also, the body UITextView can scroll on it's own, but if you are expecting long subject titles then you should wrap the whole thing in another UIScrollView (or in IB just set the main view's class to UIScrollView)

这篇关于iPhone上流畅的UI布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！