UICollectionView动态单元格高度(Pinterest布局)

时间:2017-01-17 09:17:31

标签: swift uicollectionviewcell pinterest

我试图在我的应用中实现Pinterest布局

我使用以下委托方法来实现它并动态设置单元格高度

{{1}}

但我得到了以下结果:

Here

灰色背景是单元格的背景,你可以看到每个单元格都有自己的高度(如预期的那样) 但是有额外的白色空间,我不知道如何删除。

我该如何解决这个问题?

3 个答案:

答案 0 :(得分:0)

您的UICollectionView布局不对。从故事板或CollectionViewDelegateFlowLayout方法中删除单元格间距和列间距。

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return CGFloat()// Your Value
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
     return CGFloat()// Your Value
    }

答案 1 :(得分:0)

您可以为此查看raywenderlich教程:

https://www.raywenderlich.com/164608/uicollectionview-custom-layout-tutorial-pinterest-2

如果要在到达最后一个单元格时加载新数据,则需要编辑一些代码。

在PinterestLayout.swift中,进行以下更改:

 guard cache.isEmpty == true, let collectionView =   collectionView else {
        return
    }

 guard let collectionView = collectionView else {
        return
    } 

//此文件名可能与您的文件名不同

在PhotoStreamViewController.swift中,添加以下代码:

   override func collectionView(_ collectionView:  UICollectionView, willDisplay cell: UICollectionViewCell,  forItemAt indexPath: IndexPath) {
      if (indexPath.row == photos.count - 1 ) {
     //it's your last cell

     // Add more data to the array according your requirement

     // After adding data reload collection view
        collectionView.reloadData()

    }
}

答案 2 :(得分:0)

在我的 ChatMessageController 案例中,它是如何工作的,其中每个单元格可以具有不同的高度

  1. 首先我们需要使用 UICollectionViewFlowLayout

    扩展 ChatMessageController { func createLayout() -> UICollectionViewLayout {

         let layout: UICollectionViewFlowLayout = {
             let layout = UICollectionViewFlowLayout()
             let width = UIScreen.main.bounds.size.width
             layout.estimatedItemSize = CGSize(width: width, height: 80)
             return layout
         }()
    
         return layout
     }
    

    }

  2. 然后在 UICollectionViewCell 中像这样覆盖 systemLayoutSizeFitting:

    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizo​​ntalFittingPriority horizo​​ntalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize { width.constant = bounds.size.width 返回 contentView.systemLayoutSizeFitting(CGSize(width: targetSize.width, height: getHeight())) }

其中 getHeight 是根据内容计算实际单元格高度的函数,例如:

    private func getHeight() -> CGFloat {
            let text = label.text ?? ""
            
            let constraintRect = CGSize(width: 0.75 * contentView.frame.width,
                                        height: .greatestFiniteMagnitude)
            let boundingBox = text.boundingRect(with: constraintRect,
                                                options: .usesLineFragmentOrigin,
                                                attributes: [.font: label.font as Any],
                                                context: nil)
            
            let bubbleSize = CGSize(width: boundingBox.width + d.w(30), height: boundingBox.height + d.h(30))
            
            let height = bubbleSize.height
            
            return height
        

}