如何设置单元格间距和UICollectionView – UICollectionViewFlowLayout大小比例?
我试图添加UICollectionView
到ViewController
,我需要有3个单元'每行'没有空格之间的单元格(它应该看起来像一个网格)。 单元格宽度应该是屏幕大小的三分之一,所以我认为layout.item
宽度应该是相同的。 但是,我得到这个:
如果我缩小了这个尺寸(例如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 } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 20 } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as CollectionViewCell cell.backgroundColor = UIColor.whiteColor() cell.layer.borderColor = UIColor.blackColor().CGColor cell.layer.borderWidth = 0.5 cell.frame.size.width = screenWidth / 3 cell.frame.size.height = screenWidth / 3 cell.textLabel?.text = "\(indexPath.section):\(indexPath.row)" return cell } }
添加这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); }
网格布局现在看起来像(我也添加了第一个单元格的蓝色背景):
对于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()函数中。
如果你正在寻找Swift 3,请按照以下步骤来实现:
func viewDidLoad() { //Define Layout here let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() //Get device width let width = UIScreen.main.bounds.width //set section inset as per your requirement. layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5) //set cell item size here layout.itemSize = CGSize(width: width / 2, height: width / 2) //set Minimum spacing between 2 items layout.minimumInteritemSpacing = 0 //set minimum vertical line spacing here between two lines in collectionview layout.minimumLineSpacing = 0 //apply defined layout to collectionview collectionView!.collectionViewLayout = layout }
这在Xcode 8.0上用Swift 3validation。
在某些情况下,在viewDidLoad
或ViewWillAppear
设置ViewWillAppear
可能不会影响collectionView。
在viewDidAppear
设置UICollectionViewFlowLayout
可能会导致在运行时查看单元大小的变化。
另一个解决scheme,在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 } }
对于Swift 3和XCode 8,这个工作。 按照以下步骤来实现这一点:
viewDidLoad() { let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() var width = UIScreen.main.bounds.width layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5) width = width - 10 layout.itemSize = CGSize(width: width / 2, height: width / 2) layout.minimumInteritemSpacing = 0 layout.minimumLineSpacing = 0 collectionView!.collectionViewLayout = layout }
let layout = myCollectionView.collectionViewLayout as? UICollectionViewFlowLayout layout?.minimumLineSpacing = 8