Expandable UICollectionViewCell 重新定位问题

Posted 2023-03-12

【中文标题】Expandable UICollectionViewCell 重新定位问题

【英文标题】：Expandable UICollectionViewCell re-positioning problem

【发布时间】：2018-10-19 13:48:44

【问题描述】：

我有一个带有可扩展 uicollectionviewcells 的 uicollectionview。 在 iPhone 上，每行有 1 列，没有问题。 但在 iPad 上，行有 2 列，展开单元格后出现问题。

这是单元格屏幕截图。 not expanded

expanded

单击箭头按钮时我正在重新加载项目

self.collectionView.reloadItems(at: [indexPath])

sizeforitem 函数

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 

    let height = store.pickList[indexPath.row].expanded ? CGFloat(414) : CGFloat(168)
    var width = CGFloat(0)

    if Constants.isPad  width = (self.view.frame.size.width - 25 - 12 - 12) / 2 
    else  width = self.view.frame.size.width - 12 - 12 

    return CGSize(width: width, height: height)

CellforRowAt：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "detailCell", for: indexPath) as! DetailCollectionViewCell


    .....
    if data.expanded 
        UIView.animate(withDuration: 0.25, animations: 
            cell.bottomView.frame = CGRect(x: 0, y: 372, width: cell.frame.width, height: 42)
            cell.expandArrow.setBackgroundImage(UIImage(named: "ok2"), for: .normal)
        , completion:  result in
            UIView.animate(withDuration: 0.2, animations: 
                cell.detailView.alpha = 1
            )
        )
    
    else 
                    UIView.animate(withDuration: 0.25, animations: 
            cell.detailView.alpha = 0
        , completion:  result in
            UIView.animate(withDuration: 0.2, animations: 
                cell.expandArrow.setBackgroundImage(UIImage(named: "ok"), for: .normal)
                cell.bottomView.frame = CGRect(x: 0, y: 124, width: cell.frame.width, height: 42)
            )
        )
    

    return cell

当我展开单元格时，行也在展开。 我的实施有什么问题？ 谢谢

【问题讨论】：

能否附上 iPhone 上的屏幕截图，其外观必须在 iPad 上模仿？

我现在无法访问 web api。它似乎是逐行的，每一行在 iPhone 上都有 1 列。单击按钮时行扩展

【参考方案1】：

发生这种情况是因为在 iPad 上显示单元格时，您似乎使用 (self.view.frame.size.width - 25 - 12 - 12) / 2 作为单元格的宽度。

计算值除以 2 仅适用于 iPad，为 UICollectionView 提供了足够的空间来在同一行中显示超过 1 个单元格。在其他设备的情况下，您没有这种除以 2 的方法，它只允许在一行中显示 1 个单元格。

因此，您必须更新计算以删除除以 2，或者，如果是这种情况，对于 iPad，您需要单元格仅为计算值的一半，请实施 minimumInterItemSpacing委托方法：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat 
    if Constants.isPad 
        // Replace this with whatever that suits your need.
        return 70.0
     else 
        // Replace this with whatever that suits your need.
        return 10.0
    

这将为两个连续的项目提供足够的空间，以便在一行中仅显示 1 个项目。您可以修改上述值以使单元格以您想要的方式显示。

【讨论】：

如果我删除 sizeForItemAt 方法，我该如何调整单元格高度？单元格高度根据单元格展开动态变化

您不需要删除 sizeForItemAt 方法。您只需添加这个新的 minimumInteritemSpacingForSectionAt 方法以及之前的方法来调整项目之间的“间距”。

我添加了 minimumInteritemSpacingForSectionAt。我从宽度计算中删除了“/2”。但这一次，iPad 连续 1 列。我想在 iPad 上连续显示 2 列。