向 UITableViewCell 添加约束

Posted

技术标签:

【中文标题】向 UITableViewCell 添加约束【英文标题】:Adding Constraints to UITableViewCell 【发布时间】:2018-03-07 00:17:22 【问题描述】:

我在处理我的UITableViewCell 时遇到了问题。该单元格当前有 2 个文本字段和一个带有图像的按钮。

iPhone X 故事板

目前没有限制,无论我在哪个设备上测试单元格内容都不会改变位置。例如在 iPad 上它看起来像这样

iPad 故事板

当我添加约束时,它看起来会起作用,但是当我运行应用程序时,内容就搞砸了。

以下是带有约束的屏幕截图,以及我正在使用的约束。

带约束的 iPhone X 模拟器

谁能告诉我需要哪些特定的约束才能使它在所有设备上看起来都像这样?

无限制的 iPhone X 模拟器

我没有遇到应用程序其他部分的约束问题,但由于某种原因,单元格中的自动布局约束使我无法理解。

谢谢!

更新

我能够用这个问题Autolayout is ignored in Custom UITableViewCell的答案解决这个问题

在那之后@leedex 建议的约束非常有效。

【问题讨论】:

在不知道您应用了哪些限制条件的情况下很难为您提供帮助。 抱歉没有详细说明。我用约束更新了它。 您能否通过 storyboards /XiBs /code 显示您添加的约束,以便我们为您提供帮助。 我已经用约束的截图更新了它。道歉。 【参考方案1】:

您的 noteTextLabel 没有前导或尾随约束。前导约束应该是超级视图,尾随约束应该是按钮的左侧。

你的 flagButton 应该有顶部和尾部约束,它们都指向 superView。或者按钮可以有一个 centerY 约束和一个尾随约束,其中 centerY 约束与 superView 的相同,尾随约束与 superView 相同。按钮也应该有宽度和高度限制。

你的 dateLabel 应该有前导、顶部、底部和尾部约束,其中前导到 superView,顶部到 noteTextLabel,底部到 superView,尾部到 flagButton。

这是一个示例屏幕截图,请注意尾随、顶部、前导和底部约束是如何可见的:

【讨论】:

感谢您的详细说明!不幸的是,每当我向按钮添加约束时,它都会出现在左侧的注释/日期文本的顶部。它在情节提要中看起来很好,只是在模拟器中没有。你知道为什么会发生这种情况吗?我完全尝试了你的约束,它看起来仍然像我的原始图像。 另外,当您说超级视图时,我是否正确地说您是指内容视图? 我建议确保按钮的前导约束在 noteText 的右侧,而不是 superView。如果按钮与 noteText 重叠并移动到左侧,那么按钮的前导约束很可能是 superView 或左侧的其他内容。是的,内容视图是超级视图。 抱歉延迟回复。我验证了按钮的主要约束确实是noteText.trailing。实际上,我的约束与您的屏幕截图中的约束相同。无论我做什么,按钮仍然会覆盖所有文本,并且所有内容都向左推。我不知道为什么这不起作用。你知道我是否可能在 Content View/Cell 或任何其他可能导致此问题的元素上设置了其他 Xcode 设置? 会不会和TableView的约束有关系?【参考方案2】: 对于图像:保持顶部、底部、右侧约束不变,并将宽度约束固定为某个值,例如 30。 对于文本字段:保持 left、top、bottom 约束不变,并将右侧约束设为 10 wrt image 或 40 wrt superview。

【讨论】:

嗨 Shivam,谢谢你的建议。不幸的是,我在实施后遇到了同样的问题。

以上是关于向 UITableViewCell 添加约束的主要内容,如果未能解决你的问题,请参考以下文章

iOS Storyboard约束详解

具有自动布局的 UITableviewCell 约束失败

将 UITextField 添加到 UITableViewCell

如何强制释放 UITableViewCell

将 xib 文件中的视图添加到 UITableViewCell 添加约束

如何添加约束以右对齐 UITableViewCell 内的图像