ios - 选择后如何将UICollectionView单元格扩展到屏幕的宽度？

我正在尝试复制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!)
}

结果：



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

最佳答案

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

假设您有两个ViewControllers FirstViewController顶部图像，而FullImageVC顶部图像。


编写代码以检测点击或在您的初始图像上方放置一个UIButton（顶部）。
在该UIButton的操作或“点击图像”操作上，编写一种逻辑以模态呈现不带动画的ViewController FullImageVC。
在viewWillAppear:的FullImageVC上，您需要为两件事编写逻辑：


第一

将图像放在FullImageVC上方，就像放置在FirstViewController中一样，并传递在FirstViewController上敲击过的相同图像，并编写逻辑以使其从顶部到中心进行动画处理。

第二

动画完成后，立即显示您的CollectionView，其中将包含所有图像并显示所选的图像。

4.放置十字按钮并编写其操作以消除FullImageVC。