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

Posted 2023-03-14

【中文标题】如何在选择时将 UICollectionView 单元格扩展到屏幕的宽度？

【英文标题】：How to expand a UICollectionView cell to the width of the screen upon selection?

【发布时间】：2016-12-28 11:16:17

【问题描述】：

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

结果：

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

【问题讨论】：

它不会扩展 UICollectionView Cell，但它会弹出另一个控制器作为具有自定义转换的模态。你可能需要[这个] (github.com/michaelhenry/MHFacebookImageViewer)

如果您有多个图像，请使用此github.com/zvonicek/ImageSlideshow。

正如@iphonic 提到的，我也认为它没有扩展单元格。它只是一个带有自定义转换的模态视图控制器。如果你在你的情况下这样做会更容易。我并不是说不能用细胞来做这件事……但这会困难得多……

嗨@Pangu 我试图在下面的一些步骤中为您提供解决方案，看看这个，如果您想这样做，请告诉我。谢谢你:)

【参考方案1】：

您可以按照以下步骤实现：

假设您有两个 ViewControllers FirstViewController 顶部有图像，FullImageVC 有图像在中心。

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

第一

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

第二

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

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