不同设备的 collectionview 网格布局问题

Question

你好，我正在使用 Swift 创建应用程序，我正在使用 Collectionview 创建网格视图，但我在不同的设备上得到不同的输出这里是用于填充和设置集合视图布局的代码

var imageArray = [UIImage]()
var nameArray = ["General album","Videos","New album","Custom name album"]
private var numberOfItemsInRow = 2
private var minimumSpacing = 10
private var edgeInsetPadding = 10

extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
        cell.imgView.image = imageArray[indexPath.row]
        cell.lblName.text = nameArray[indexPath.row]
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let inset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        edgeInsetPadding = Int(inset.left+inset.right)
        return inset
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return CGFloat(minimumSpacing)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return CGFloat(minimumSpacing)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = (Int(UIScreen.main.bounds.size.width) - (numberOfItemsInRow - 1) * minimumSpacing - edgeInsetPadding) / numberOfItemsInRow
        return CGSize(width: width, height: width)
    }
}

从这段代码我无法实现精确的网格布局所以我尝试了下面的代码

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
    }

我从这个 link 得到了这段代码：

但我无法实现精确的网格布局，它根据我共享两个屏幕截图的设备进行了更改

iPhone 11 Max Pro 截图：

iPhone 7 截图：

在 iphone 7 我的布局很完美但是在 iPhone 11 Max Pro 我没有完美的任何解决方案？请帮助我

Answer 1

我假设您的问题是 iphone 11 Pro Xmax 中的水平间距太大。原因是 iphone xsMax 屏幕比 iphone 7 屏幕大得多。看看下面的 link，它包含所有可能会派上用场的 IOS 屏幕尺寸、宽度和像素。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

至于您的问题，设备的宽度不同于 iphone 7 到 iphone 11，所以问题是您正在为 [=18= 设置最小间距、宽度、高度] 7 屏幕，你需要对边使用约束，并使用约束来调整宽度，高度和间距需要编辑，以便它与所有屏幕相似。

它在所有屏幕上完全相同的可能性很小，但您可以用这种方法做得更好。

Answer 2

在控制器的“viewDidLoad”方法中添加以下代码：-

    collectionView.delegate = self
    collectionView.dataSource = self
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical //.horizontal
    layout.minimumLineSpacing = 10
    layout.minimumInteritemSpacing = 10
    collectionView.setCollectionViewLayout(layout, animated: true)

仅添加“insetForSectionAt”和“sizeForItemAt”这些方法来处理集合视图的布局。由于我已经修改了delegate和数据源，所以你可以直接使用它。

extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
        cell.imgView.image = imageArray[indexPath.row]
        cell.lblName.text = nameArray[indexPath.row]
        return cell
    }
    
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)//here your custom value for spacing
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let lay = collectionViewLayout as! UICollectionViewFlowLayout
        let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
        
        return CGSize(width:widthPerItem, height: widthPerItem)
    }
}

不同设备的 collectionview 网格布局问题

collectionview grid layout issue with different devices

grid-layout

ios

uicollectionview

swift