首页 > 解决方案 > Swift UICollectionView iPad流布局不起作用

问题描述

目前在 iPad 上使用集合视图时遇到了 Flow 布局的一些问题。我目前正在开发一个以流式布局显示帖子的应用程序,使其看起来既漂亮又时尚。但是,当在所有设备上测试应用程序时,我注意到显示发生了变化:

但其余的 iPad,它显示正常。这里似乎有什么问题?我目前正在使用此代码在 CollectionView 中设置我的布局样式:

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

        switch UIDevice().screenType {
        case .iPhoneX:
            return CGSize(width: 180.0, height: 180.0)
            break
        case .iPhone5:
            return CGSize(width: 152.0, height: 152.0)
            break
        case .iPhone6:
            return CGSize(width: 180.0, height: 180.0)
            break
        case .iPhone6Plus:
            return CGSize(width: 200.0, height: 200.0)
            break
        case .iPad:
            return CGSize(width: 400.0, height: 400.0)
            break
        case .iPadTwo:
            return CGSize(width: 400.0, height: 400.0)
            break
        case .iPadThree:
            return CGSize(width: 400.0, height: 400.0)
            break
        default:
            return CGSize(width: 200.0, height: 200.0)
            break
        }
    }

'iPad Two' 和 'iPad Three' 只是我尝试创建的一些枚举,以尝试确定 iPad 类型以及是否有输出打印一些文本(但它只是下降到默认值),无论 iPad 是什么。

这是我的屏幕尺寸:

 switch UIScreen.main.nativeBounds.height {
        case 960:
            return .iPhone4
        case 1136:
            return .iPhone5
        case 1334:
            return .iPhone6
        case 2208:
            return .iPhone6Plus
        case 1024:
            return .iPad
        case 1366:
            return .iPadTwo
        case 834:
            return .iPadThree
        case 2436:
            return .iPhoneX
            break
        default:
            return .unknown
        }

这是我的问题的直观表示,出现在列出的设备上,但不在其他设备上:

它应该是什么样子:

这就是它应该看起来的样子。

它在列出的设备上的样子:

在此处输入图像描述

如果有人可以帮助我解决此问题,我将非常感谢您的帮助,因为我似乎无法找到一个正常工作的解决方案。

标签: iosswiftipadlayoutuicollectionview

解决方案


仅供参考。我建议,不要设置 CollectionCell Size in sizeForItemAt indexPath,尝试一些通用的方式。

你应该像这样扩展UICollectionViewFlowLayout和创建新的布局,

class HomeLayout: UICollectionViewFlowLayout {    
    var numberOfItemsPerRow : Int {
        get{
            var value = 0
            if UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.phone {
                value = 3
            } else {
                value = 5
            }
            return value
        }
        set {
            self.invalidateLayout()
        }
    }

    override func prepare() {
        super.prepare()
        if self.collectionView != nil {
            var newItemSize = self.itemSize
            let itemsPerRow = max(self.numberOfItemsPerRow, 1)
            let totalSpacing = self.minimumInteritemSpacing * CGFloat(itemsPerRow - 1)
            let newWidth = (self.collectionView!.bounds.size.width - self.sectionInset.left - self.sectionInset.right - totalSpacing) / CGFloat(itemsPerRow)
            newItemSize.width = max(newItemSize.width,newWidth)
            if self.itemSize.height > 0 {
                let aspectRatio: CGFloat = self.itemSize.width / self.itemSize.height
                newItemSize.height = newItemSize.width / aspectRatio
            }
            self.itemSize = newItemSize            
        }
    }
}

现在将您的CollectionView UICollectionViewFlowLayout分配给HomeLayoutInterface builder。

在此处输入图像描述

调整您的sectionInsetsMin SpacingStoryboard.

供参考。相应地设置你numberOfItemsPerRowHomeLayout


推荐阅读