带有自动布局左边距的 UITableViewCell 在 iPhone 和 iPad 上不同 [英] UITableViewCell with autolayout left margin different on iPhone and iPad

问题描述

我在选项屏幕/场景中使用带有静态单元格的分组 UITableView.一切都使用自动布局在 Xcode 6.1/iOS 8.1.x/Storyboard 中完成.在表格组中有混合类型的单元格，有两种类型会导致我出现问题:

1. 具有自定义样式的单元格和
2. 具有正确细节"样式的单元格

在单元格 #1 上，我可以为标签和前导容器之间的左边距设置约束.据我所知，在单元格 #2 上，我无法在 Interface Builder 中设置任何约束.我在单元格 #1 中的标签上设置了左边距，使其与单元格 #2 中的标签对齐.在 iPhone 上一切看起来都很好，但是如果我在 iPad 上显示同一个表格，其中表格视图容器的大小是屏幕大小的一半，单元格 #2 获得更多的边距(动态?)而单元格 #1 保持绝对边距我在约束中设置.我还尝试使用相对于边距"属性更改单元格 #1 中的左边距，但无济于事.

iPhone:

iPad(tableview 宽度 = 1/2 屏幕尺寸)

所以问题是:如何为单元格 #1 中的标签设置约束，使其像单元格 #2 一样对齐.

这里还有一个链接，指向演示该问题的 Xcode 6.1 示例项目.在 iPhone 和 iPad 上运行以查看差异:

(这是关键)对单元格本身执行相同的操作(如果您愿意，则为内容视图的父级)

按如下方式设置约束条件:Label.Leading = Superview.Leading Margin(常量为 0)

现在所有单元格的标签都将与默认单元格一致！这在 Xcode 7 及更高版本中对我有用，它包括我提到的线程中提到的修复.IB 和模拟器现在应该显示正确对齐的标签.

您也可以以编程方式执行其中的一些操作，例如在视图控制器的类中:

cell.preservesSuperviewLayoutMargins = truecell.contentView.preservesSuperviewLayoutMargins = true

或者你可以通过在启动时调用 UIAppearance 来设置它(我只知道 Swift，抱歉):

UITableViewCell.appearance().preservesSuperviewLayoutMargins = trueUITableViewCell.appearance().contentView.preservesSuperviewLayoutMargins = true

---

它的工作原理和原因

作为 伊森 好心指出，Apple 自己的 UIView 文档描述了 preservesSuperviewLayoutMargins 如下:

<块引用>

当该属性的值为true时，在布局内容时也会考虑superview的margin.此边距会影响视图边缘与其父视图之间的距离小于相应边距的布局.例如，您可能有一个内容视图，其框架与其父视图的边界精确匹配.当父视图的任何边距位于内容视图及其自身的边距所代表的区域内时，UIKit 会调整内容视图的布局以尊重父视图的边距.调整量是确保内容也在superview的边距内所需的最小量.

因此，如果您希望单元格的内容与 TableView 的 边距对齐(如果您愿意，它是曾祖父母)，您需要拥有内容的两个上级，内容视图和表格单元格本身, 保留自己的 superview 的边距.

为什么这不是默认行为让我感到惊讶:我觉得大多数不想自定义所有内容的开发人员都期望这种继承"默认情况下.

I am using a grouped UITableView with static cells for an options screen/scene. Everything is done in Xcode 6.1 / iOS 8.1.x / Storyboard using Autolayout. Within the table groups there are mixed types of cells and there are two types that cause me problems:

1. Cells with custom style and
2. Cells with style "Right Detail"

On cell #1 I can set a constraint for the left margin between the label and the leading container. On cell #2 I cannot set any constraints in Interface Builder as far as I know. I have set the left margin on the label in cell #1 so it aligns with the label in cell #2. Everything looks fine on an iPhone, but if I show the same table on an iPad where the size of the table view's container is half the screen size, cell #2 gets more margin (dynamically?) while cell #1 maintains the absolute margin I set in the constraints. I also tried to change the left margin in cell #1 with the attribute "relative to margin" but to no avail.

iPhone:

iPad (with tableview width = 1/2 screen size)

So the question is: How do I set the constraints for the label in cell #1 so that it aligns like cell #2.

Here is also a link to a Xcode 6.1 sample project demonstrating the problem. Run on iPhone and iPad to see the difference:

https://dl.dropboxusercontent.com/u/5252156/Code/tableViewTest.zip

This question might be related to Layout static table cell for iPhone and iPad, but it might also differ for iOS 8 since everything is supposed to be adaptive now. That's why I decided to post this question anyway.

解决方案

 How to fix it

After fighting with the apple bug reporting team with many sample projects and screenshots and dissecting that answer, I've found that the solution to have your custom-style cells behave consistently regarding their margins and be just like the default UITableViewCells, you have to do the following (mostly based on Becky's answer, I've highlighted what's different and what made it work for me) :

1. Select your cell's content view in IB

2. Go to the Size Inspector

3. In the Layout Margins section, check Preserve Superview Margins (do not click the plus-sign)

4. (And here's the key) Do the same for the cell itself (the content view's parent if you will)

5. Setup your constraints as follows : Label.Leading = Superview.Leading Margin (with a constant of 0)

Now all your cells will have their label consistent with the default cells! This works for me in Xcode 7 and up and it includes the fix mentioned in the thread I referred to. IB and the simulator should now show properly aligned labels.

You could also do some of this programmatically, for example in the View Controller's class :

cell.preservesSuperviewLayoutMargins = true
cell.contentView.preservesSuperviewLayoutMargins = true

Or you could have it set up by calling UIAppearance once at startup (I only know Swift, sorry) :

UITableViewCell.appearance().preservesSuperviewLayoutMargins = true
UITableViewCell.appearance().contentView.preservesSuperviewLayoutMargins = true

---

How and why it works

As Ethan kindly pointed out, Apple's own documentation on UIView describes preservesSuperviewLayoutMargins as follows :

When the value of this property is true, the superview’s margins are also considered when laying out content. This margin affects layouts where the distance between the edge of a view and its superview is smaller than the corresponding margin. For example, you might have a content view whose frame precisely matches the bounds of its superview. When any of the superview’s margins is inside the area represented by the content view and its own margins, UIKit adjusts the content view’s layout to respect the superview’s margins. The amount of the adjustment is the smallest amount needed to ensure that content is also inside the superview’s margins.

Therefore, if you want your cell's content to align with the TableView's margins (it's great-grandparent if you will), you need to have your content's two ascendants, Content View and the Table Cell itself, preserve the margins of their own superview.

Why this isn't default behavior surprises me : I feel like most developers who don't want to customize everything would expect this "inheritance" by default.

这篇关于带有自动布局左边距的 UITableViewCell 在 iPhone 和 iPad 上不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！