iOS自动布局 - 将位于tableviewcell内的视图移动到屏幕中心

Question

我有一个包含文本视图和图像视图的单元格的tableview.我的项目目前正在使用AutoLayout.我的目标是在点击时将图像视图全屏显示.一个选项是使用模态视图控制器,但我想让这项工作有点像在Facebook应用程序中点击图像的方式工作,应用程序使图像居中并淡化背景.

由于我使用autolayout,我不能简单地设置imageview的框架来填充屏幕.相反,我需要使用自动布局约束.我的图像视图有5个约束,约束设置距单元格底部的距离,以及左侧和右侧,以及控制图像高度的约束.最后一个是图像视图上方的文本视图和图像顶部之间的垂直空间约束.虽然这似乎与高度和底部约束相冲突,但由于某种原因,界面构建器迫使我有这个.为了避免出现问题,我将此约束的优先级设置为小于1000(无论如何,图像永远不会与textview重叠,因为tableview单元格高度设置为所有内容都完全适合).

为了使图像居中,我将左右距离设置为零,并删除垂直空间约束.为了使图像居中,我将带有中心y对齐约束的底部空间约束替换为UIWindow而不是tableviewcell.我希望它在屏幕的中心,而不是细胞.

要获取主窗口,我使用此:

AppDelegate* myDelegate = (((AppDelegate*) [UIApplication sharedApplication].delegate));
//access main window using myDelegate.window

然后,设置约束:

//currently sets the distance from the bottom of the cell to 14
//changing it...
[cellselected removeConstraint:cellselected.imagebottomspace];
cellselected.imagebottomspace = [NSLayoutConstraint constraintWithItem:cellselected.viewimage attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:myDelegate.window attribute:NSLayoutAttributeCenterY multiplier:0 constant:0];
[cellselected addConstraint:cellselected.imagebottomspace];

但是,这不起作用.图像视图的宽度和高度的变化适用.然而,当读取imagebottomspace约束时,我得到一个不可满足的布局 - 显然约束与另一个约束冲突,该约束将底部和图像视图之间的距离设置为14,这是我刚刚删除的约束.所以它似乎并没有实际删除约束.

当我继续让app破坏约束时,imageview会移动,但会移动到错误的位置.它不在屏幕中心.它向上移动并离开屏幕.

显然我正在做的事情是不对的.我究竟做错了什么？

Answer 1

所以我想你想要这样的东西:

首先,您需要知道从Xcode 4.6.3开始,在表视图单元格中设置约束时,nib编辑器("Interface Builder")存在错误.它应该在子视图和单元格的内容视图之间创建约束,而是在子视图和单元格本身之间创建约束.这往往会在运行时搞砸布局.(此错误在Xcode 5及更高版本中得到修复.)

这样做的结果是你应该删除nib中的所有约束并在代码中重新创建它们,或者只是去掉nib并在代码中创建单元格的整个视图层次结构.

其次,有一种更简单的方法来进行图像缩放.这是选择单元格时的基本过程:

1. 将选定单元格的图像视图边界转换为CGRect顶级视图坐标系中的a.
2. 创建一个新的图像视图只是为了缩放并将其框架设置为CGRect.设置userInteractionEnabled为YES.将其设置autoresizingMask为灵活的宽度和高度.添加点按手势识别器.
3. 将新图像视图添加为顶级视图的子视图.
4. 将单元格的图像视图hidden属性设置为YES.
5. 在动画块中,将新图像视图的帧设置为顶级视图的边界.
6. 禁用表视图panGestureRecognizer.

点击新图像视图时,请执行以下步骤:

1. 将选定单元格的图像视图边界转换为CGRect顶级视图坐标系中的a.
2. 在动画块中,将缩放图像视图的帧设置为该帧CGRect.
3. 在动画完成块中:
   1. 从超视图中删除缩放的图像视图.
   2. 将单元格的图像视图hidden属性设置为NO.
   3. 启用表格视图panGestureRecognizer.

由于您没有移动原始图像视图,因此您不必混淆其约束.隐藏的视图仍然参与布局.

由于您是在代码中创建新的图像视图,因此默认translatesAutoresizingMaskIntoConstraints设置为YES.这意味着您可以设置其框架.自动布局将自动将框架转换为约束.

您可以在此github存储库中找到完整的源代码.