如何设置单元格间距和UICollectionView-UICollectionViewFlow

Question

我正在尝试添加UICollectionView到ViewController，我需要“每行”有3个单元格，单元格之间没有空格（它看起来应该像网格）。单元格的宽度应该是屏幕尺寸的三分之一，所以我认为layout.item宽度应该相同。但是然后我得到这个：layout.itemSize width = screenSize.width / 3如果我减小该尺寸（例如减少7或8像素），效果会更好，但是行中的第三个单元格不是完全可见的，并且我仍然有该空白（顶部和底部以及左侧和右侧）。在此处输入图片说明class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {    var collectionView: UICollectionView?    var screenSize: CGRect!    var screenWidth: CGFloat!    var screenHeight: CGFloat!    override func viewDidLoad() {        super.viewDidLoad()        screenSize = UIScreen.mainScreen().bounds        screenWidth = screenSize.width        screenHeight = screenSize.height        // Do any additional setup after loading the view, typically from a nib        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()        layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)        layout.itemSize = CGSize(width: screenWidth / 3, height: screenWidth / 3)        collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)        collectionView!.dataSource = self        collectionView!.delegate = self        collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")        collectionView!.backgroundColor = UIColor.greenColor()        self.view.addSubview(collectionView!)    }    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {        return 1    }

Answer 1

添加这2行

layout.minimumInteritemSpacing = 0

layout.minimumLineSpacing = 0

所以你有了：

   // Do any additional setup after loading the view, typically from a nib.

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

        layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)

        layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3)

        layout.minimumInteritemSpacing = 0

        layout.minimumLineSpacing = 0

        collectionView!.collectionViewLayout = layout

这将删除所有空格并为您提供网格布局：

在此处输入图片说明

如果希望第一列的宽度等于屏幕宽度，请添加以下功能：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    if indexPath.row == 0

    {

        return CGSize(width: screenWidth, height: screenWidth/3)

    }

    return CGSize(width: screenWidth/3, height: screenWidth/3);

}

网格布局现在看起来像（我还在第一个单元格中添加了蓝色背景）

Answer 2

对于Swift 3和XCode 8来说，这可行。请按照以下步骤来实现：

{

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

    let width = UIScreen.main.bounds.width

    layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)

    layout.itemSize = CGSize(width: width / 2, height: width / 2)

    layout.minimumInteritemSpacing = 0

    layout.minimumLineSpacing = 0

    collectionView!.collectionViewLayout = layout

}

将此代码放入viewDidLoad（）函数。

Answer 3

在某些情况下，设置UICollectionViewFlowLayoutin viewDidLoad或ViewWillAppear不影响collectionView。

设置UICollectionViewFlowLayoutin viewDidAppear可能会导致在运行时看到像元大小的变化。

Swift 3中的另一个解决方案：

extension YourViewController : UICollectionViewDelegateFlowLayout{

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

        return UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)

    }

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

        let collectionViewWidth = collectionView.bounds.width

        return CGSize(width: collectionViewWidth/3, height: collectionViewWidth/3)

    }

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

        return 0

    }

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

        return 20

    }

}