在UICollectionView中的列表视图和网格视图之间切换

Question

我实现了一个集合视图，如链接所示：https://iosrevisited.blogspot.com/2017/09/toggle-between-listviewuitableview-and.html。

我可以通过点击右上角的图标在网格布局和列表布局之间切换，就像上面链接的代码中解释的那样。

为了在布局之间切换，我在设置布尔值后重新加载集合视图，该布尔值将决定它是列表视图还是网格视图。但是我没有得到动画(正如Google Drive iOS应用程序所提供的)。我尝试了很多方法，比如在UIView.animate中添加collectionView.reloadData()，也尝试了layoutIfNeeded()，等等。

有没有人能给出一个解决方案，让它可以与动画一起切换？

下面是我的重要集视图函数：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = view.frame.width
    if isListView {
        return CGSize(width: width, height: 120)
    }else {
        return CGSize(width: (width - 15)/2, height: (width - 15)/2)
    }
}

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

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

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}

为了在布局之间切换，我只使用了reloadData()。

Answer 1

将gridview转换为listview或相反的简单方法。

创建两个布局

private lazy var listCVLayout: UICollectionViewFlowLayout = {

    let collectionFlowLayout = UICollectionViewFlowLayout()
    collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
    collectionFlowLayout.itemSize = CGSize(width: SCREEN_WIDTH, height: 80)
    collectionFlowLayout.minimumInteritemSpacing = 0
    collectionFlowLayout.minimumLineSpacing = 0
    collectionFlowLayout.scrollDirection = .vertical
    return collectionFlowLayout
}()

private lazy var gridCVLayout: UICollectionViewFlowLayout = {
    
    let collectionFlowLayout = UICollectionViewFlowLayout()
    collectionFlowLayout.scrollDirection = .vertical
    collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
    collectionFlowLayout.itemSize = CGSize(width: (SCREEN_WIDTH - 80) / 2 , height: SCREEN_HEIGHT*0.16)
    collectionFlowLayout.minimumInteritemSpacing = 20
    collectionFlowLayout.minimumLineSpacing = 20
    return collectionFlowLayout
}()

最后，当切换视图时，请使用以下代码

  self.listCV.startInteractiveTransition(to: isListView ? self.listCVLayout : self.gridCVLayout, completion: nil)
  self.listCV.finishInteractiveTransition()