不同设备的collectionview网格布局问题 [英] collectionview grid layout issue with different devices

问题描述

您好，我正在使用 Swift 创建App，并且正在使用 Collectionview 创建网格视图，但是我在不同设备上获得了不同的输出，这里是用于填充和设置布局的代码集合视图

  var imageArray = [UIImage]()var nameArray = [一般相册"，视频"，新相册"，自定义姓名相册"]私人var numberOfItemsInRow = 2私人var minimumSpacing = 10专用var edgeInsetPadding = 10扩展程序GalleryViewController:UICollectionViewDelegate，UICollectionViewDataSource，UICollectionViewDelegateFlowLayout {func collectionView(_ collectionView:UICollectionView，numberOfItemsInSection部分:Int)->诠释{返回imageArray.count}func collectionView(_ collectionView:UICollectionView，cellForItemAt indexPath:IndexPath)->UICollectionViewCell {让cell = collectionView.dequeueReusableCell(withReuseIdentifier:"Cell"，for:indexPath)为！GalleryCollectionViewCellcell.imgView.image = imageArray [indexPath.row]cell.lblName.text = nameArray [indexPath.row]返回单元}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，insetForSectionAt部分:Int)->UIEdgeInsets {let inset = UIEdgeInsets(顶部:20，左侧:20，底部:20，右侧:20)edgeInsetPadding = Int(inset.left + inset.right)返回插图}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，minimumInteritemSpacingForSectionAt部分:Int)->CGFloat {返回CGFloat(minimumSpacing)}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，minimumLineSpacingForSectionAt部分:Int)->CGFloat {返回CGFloat(minimumSpacing)}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，sizeForItemAt indexPath:IndexPath)->CGSize {让width =(Int(UIScreen.main.bounds.size.width)-(numberOfItemsInRow-1)* minimumSpacing-edgeInsetPadding)/numberOfItemsInRow返回CGSize(width:width，height:width)}} 

从此代码中我无法获得准确的网格布局，因此我尝试了以下代码

  func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，sizeForItemAt indexPath:IndexPath)->CGSize {让填充:CGFloat = 50让collectionViewSize = collectionView.frame.size.width-填充返回CGSize(width:collectionViewSize/2，height:collectionViewSize/2)} 

我从以下链接获得了此代码:

---

iPhone 7屏幕截图:

在iPhone 7中，我的布局越来越完美，但是在iPhone 11 Max Pro上，我没有任何完美的解决方案吗?比请帮助我

解决方案

将以下代码添加到"viewDidLoad"控制器的方法:-

  collectionView.delegate =自我collectionView.dataSource =自我让布局= UICollectionViewFlowLayout()layout.scrollDirection = .vertical//.水平layout.minimumLineSpacing = 10layout.minimumInteritemSpacing = 10collectionView.setCollectionViewLayout(布局，动画:true) 

仅添加"insetForSectionAt"和"sizeForItemAt"这些方法可以处理您的集合视图的布局.当我修改了委托和数据源后，您可以直接使用它.

 扩展名GalleryViewController:UICollectionViewDelegate，UICollectionViewDataSource，UICollectionViewDelegateFlowLayout {func collectionView(_ collectionView:UICollectionView，numberOfItemsInSection部分:Int)->诠释{返回imageArray.count}func collectionView(_ collectionView:UICollectionView，cellForItemAt indexPath:IndexPath)->UICollectionViewCell {让cell = collectionView.dequeueReusableCell(withReuseIdentifier:"Cell"，for:indexPath)为！GalleryCollectionViewCellcell.imgView.image = imageArray [indexPath.row]cell.lblName.text = nameArray [indexPath.row]返回单元}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，insetForSectionAt部分:Int)->UIEdgeInsets {返回UIEdgeInsets(顶部:10.0，左侧:10.0，底部:10.0，右侧:10.0)//此处为间距的自定义值}func collectionView(_ collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，sizeForItemAt indexPath:IndexPath)->CGSize {让lay = collectionViewLayout为！UICollectionViewFlowLayout让widthPerItem = collectionView.frame.width/2-lay.minimumInteritemSpacing返回CGSize(width:widthPerItem，height:widthPerItem)}} 

Hello i am creating App using Swift and i am creating grid view using Collectionview but i got different output on different devices here is the code for populating and setting layout of 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)
    }
}

from this code i am not able to achive exact grid layout so i tried below code

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)
    }

I got this code from this link: Display UICollectionView with 2 columns of equal size square cells

but i am not able to achive exact grid layout its changed based on device i am sharing two screen shot

---

iPhone 11 Max Pro screen shot:

---

iPhone 7 Screen Shot:

in iphone 7 i am getting layout perfect but on iPhone 11 Max Pro i am not getting perfect any solution? than please help me

解决方案

Add the following code in the "viewDidLoad" method of your controller:-

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

Add only "insetForSectionAt" and "sizeForItemAt" these methods to handle the layout of your collection View. As I have modified the delegate and data source you can directly use it.

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网格布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！