具有自动布局左边距的 UITableViewCell 在 iPhone 和 iPad 上不同

问题描述

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

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 上运行以查看差异:

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

您也可以通过编程方式完成其中的一些操作，例如在 View Controller 的类中:

cell.preservesSuperviewLayoutMargins = truecell.contentView.preservesSuperviewLayoutMargins = true

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

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

它的工作原理和原理

作为 Ethan 请指出，Apple 自己的 UIView 文档描述 preservesSuperviewLayoutMargins 如下:

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

因此，如果您希望单元格的内容与 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 上不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！