使用自定义 UITableViewCell 进行自动布局 [英] Auto layout with custom UITableViewCell

问题描述

如何让自定义 UITableViewCell 的内容使用自动布局来移动和调整大小?

How do I get the contents of a custom UITableViewCell to shift and resize using Auto Layout?

为了使问题更清楚，我已将自定义单元格的 contentView 指定为浅灰色背景色.为了将其减少到可能的最小问题，我的自定义单元格只有一个名为 ratingImageView 的 UIImageView 显示一些黄色星星；下图中可以看到三个这样的细胞.

To make the issue more clear, I've assigned the contentView of my custom cell to have a light gray background color. To reduce this to the smallest problem possible, my custom cell has only one UIImageView named ratingImageView that shows some number of yellow stars; three such cells can be seen in the image below.

我的 ratingImageView 只有 4 个约束；(1)宽度=81，(2)高度=40，(3)将中心Y对齐到superview，(4)尾随空间到superview =20.当标准删除按钮出现在滑动删除时，我本来希望超级视图约束的尾随空间强制图像视图向左移动.但是，如下图所示，情况并非如此.

My ratingImageView has only 4 constraints; (1) width =81, (2) height =40, (3) align center Y to superview, and (4) trailing space to superview =20. I would have expected the trailing space to superview constraint to force the image view to the left when the standard delete button appears on swipe to delete. It does not, however, as can be seen in the image below.

我尝试了许多不同的约束组合，但无法使 ratingImageView 像我期望的那样发生变化.

I've tried many different combinations of constraints and cannot make the ratingImageView shift as I would expect.

我通过一个很好的 遇到了这个问题介绍性故事板教程.使用良好的旧支柱和弹簧进行这项工作没有问题，但我决定尝试使用 Auto Layout 并没有运气.

I encountered this problem by working through a good introductory Storyboard tutorial. I had no problem making this work using good old struts and springs, but I decided to try it with Auto Layout and have had no luck.

推荐答案

当我为 教程.

I had the same issue when I turned Autolayout ON for the tutorial.

问题是由于约束Horizo​​ntal Space (20).此约束的优先级默认设置为 1000，表示高优先级.因此，当显示 delete 按钮时，imageView 遵守约束并使其自身保持在其位置，而不需要重新定位对应于 UITableViewCell 的(在本例中为 PlayerCell)内容视图.

The issue is because of constraint Horizontal Space (20). The priority of this constraint is set to 1000 by default which mean high priority. So the imageView is obeying the constraint and making itself stay in its position without relocating corresponding to UITableViewCell's (PlayerCell in this case) content view when delete button is displayed.

在与我的同事合作中，我们找到了解决此问题的方法.以编程方式将约束添加到 ratingImageView 解决了这个问题.如果有人有比这更好的解决方案，请在此处发布.

In Collaboration with my colleague we found the solution for this problem. Adding the constraints to the ratingImageView programmatically solved this issue.If anyone has a better solution than this please post here.

1. 打开您的故事板并选择 PlayerCell 并展开其约束.
2. 选择约束Horizo​​ntal Space (20)"并在属性检查器中将其优先级设置为任何较低的值.

3. 在PlayersViewController.m文件中，在cellForRowAtIndexPath tableView的delegate方法中添加如下代码:

1. Open your story board and select the PlayerCell and expand its constraints.
2. Select the constraint " Horizontal Space (20) " and in the Attributes inspector set its priority to any lower value.

3. In PlayersViewController.m file add the following code in cellForRowAtIndexPath tableView's delegate method:

UIImageView *ratingImageView = cell.ratingImageView;
NSDictionary *dict = NSDictionaryOfVariableBindings(ratingImageView);[cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[ratingImageView]|"选项:0 指标:nil 视图:dict]]；

这篇关于使用自定义 UITableViewCell 进行自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！