Swift 3:以编程方式调整 UICollectionViewCell 的大小会导致单元格重叠

Posted

技术标签:

【中文标题】Swift 3:以编程方式调整 UICollectionViewCell 的大小会导致单元格重叠【英文标题】:Swift 3: Resizing UICollectionViewCell programmatically causes cells to overlap 【发布时间】:2016-08-20 20:12:03 【问题描述】:

我正在尝试创建一个UICollectionView,其下方有 3 个单元格。 这工作正常。当我触摸一个单元格时,该单元格应该展开,其他单元格应该折叠到特定高度。也工作得很好。

我无法解决的问题;当我点击一个单元格时,它会像我想要的那样扩展;它与此下方的重叠。下面的一个不会向下移动,以便为这个单元格新的高度腾出空间。

我该如何解决这个问题?

这是我迄今为止与UICollectionViewUICollectionViewCell 相关的内容

/**
 * Tempory 3 items
 */
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    return 3


/**
 * Defining the cells
 */
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! LicenseplateCollectionViewCell

    cell.backgroundColor = .white
    cell.layer.cornerRadius = 4

    if(indexPath.row > 0)
        cell.carStack.isHidden = true
    

    return cell



/**
 * Initial size
 */
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    // The first cell always start expanded with an height of 300
    if(indexPath.row == 0)
        return CGSize(width: collectionView.bounds.size.width, height: 300)
    else
        // The others start with an height of 80
        return CGSize(width: collectionView.bounds.size.width, height: 80)
    


/**
 * This functio shoud be handling everything like an accordeon system.
 * When I touch one cell, the others should collapse.
 */
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 

    // Animate resize of cell after tapping
    UIView.animate(withDuration: 0.2, animations: 
        // For now I have 3 cells, which I will loop
        for i in 0...2
            // If this is the active cell (I just tapped on) ...
            if(indexPath.row == i)
                let cell = collectionView.cellForItem(at: indexPath) as! LicenseplateCollectionViewCell
                // This cell is expanded already, collapse it
                if(cell.frame.size.height > 200)
                    cell.carStack.isHidden = true
                    cell.frame.size = CGSize(width: collectionView.bounds.size.width, height: 80)
                else
                    // Open up this cell
                    cell.carStack.isHidden = false
                    cell.frame.size = CGSize(width: collectionView.bounds.size.width, height: 300)
                
            else
                // Other cells besides the one I just tapped, will be collapsed
                print(indexPath.row, indexPath.section)
                let customPath = IndexPath(row: i, section: 0)
                print(customPath.row, customPath.section)
                let cell = collectionView.cellForItem(at: customPath) as! LicenseplateCollectionViewCell
                cell.carStack.isHidden = true
                cell.frame.size = CGSize(width: collectionView.bounds.size.width, height: 80)
            
        
    )


【问题讨论】:

【参考方案1】:

我已经解决了这个问题。 动画/调整大小不应发生在 didSelectItemAt 覆盖中。

首先,我必须正确定义具有单元格配置的数组。在这里,我添加了一个带有布尔值的键“活动”。

当我点击一个单元格时,我将对象数组中的“活动”布尔值切换为true,然后调用collectionView.reloadData(),这会在UICollectionView 显示之前执行sizeForItemAt 覆盖。这样可以确保单元格正确对齐并完全按照它们应该执行的操作。

sizeForItemAt 中,我根据对象数组中的“活动”布尔值返回正确的高度。

【讨论】:

以上是关于Swift 3:以编程方式调整 UICollectionViewCell 的大小会导致单元格重叠的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Swift 中以编程方式调整 UIButton 中文本的字体大小以适应宽度?

在 Swift 2 中以编程方式调整 UITextView 的大小以扩大其宽度

Swift - StackView 和添加约束,以编程方式添加视图到堆栈 - 加载后调整单元格高度?

iOS - 在 Swift 3 中以编程方式删除和激活新约束时布局损坏

当我尝试以编程方式添加 UIView 时,UITableViewCell 高度不会自动调整(而是压扁我的 UIView)

Swift 3 - 以编程方式创建标题栏约束