如何在选择时将UICollectionView单元格扩展到屏幕宽度？

Question

我正在尝试复制eBay iOS应用程序如何显示其图像，并允许用户扩大每个图像。

以下是它的工作原理：

eBay使用UICollectionView来显示图片列表。当用户选择一个单元格时，单元格会扩展，顶部会显示一些按钮。选择X后，单元格将折叠回原始大小。

我怎样才能达到类似的效果？

我查看了问题UICollectionView Enlarge cell on selection和Expanding UICollectionView and its cell when tapped，并尝试按照自己的想法实施。

其中一个问题是我有AutoLayout设计，这使得这很困难。

这是我的故事板：

我试过这个：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
    let cell = collectionView.cellForItem(at: indexPath)

    cell?.superview?.bringSubview(toFront: cell!)

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [], animations: ({

        self.structureImageView.frame = CGRect(x: 0, y: 0, width: 375, height: 667)
        collectionView.frame = self.structureImageView.bounds
        cell?.frame = collectionView.bounds

        self.separatorView.frame.origin.y = 667
        self.structureInfoView.frame.origin.y = 667

    }), completion: nil)

    test = true
    collectionView.reloadData()

}

var test = false

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt  indexPath: IndexPath) -> CGSize
{
    if test == true
    {
        return CGSize(width: 375, height: 667)
    }
    return CGSize(width: cellWidth!, height: cellHeight!)
}

结果：

任何帮助都会有很大帮助！

Answer 1

按照以下步骤，您可以实现此目的：

假设您有两个ViewControllers FirstViewController，其中您的图像位于顶部，FullImageVC您的图像位于中心。

1. 编写代码以检测点击或将UIButton放在初始图像上（顶部）。
2. 关于UIButton或Tap on image动作的动作，向modal写一个逻辑，呈现一个没有动画的ViewController FullImageVC。
3. 在viewWillAppear:的{​​{1}}上，你需要为两件事写逻辑：

<强>第一

将图片放在FullImageVC的顶部，与放置在FullImageVC中的图像相似，并传递您在FirstViewController上点击的相同图片，然后编写逻辑以从顶部设置动画中心。

<强>第二

动画完成后，立即显示FirstViewController，其中包含所有图片并显示所选图片。

4.放置十字按钮并写下其动作以关闭CollectionView。