Comment définir l’espacement des cellules et le rapport de taille UICollectionView – UICollectionViewFlowLayout?

J’essaie d’append UICollectionView à ViewController , et j’ai besoin de 3 cellules par ligne sans espace vide entre les cellules (cela devrait ressembler à une grid). La largeur de la cellule doit être d’un tiers de la taille de l’écran, alors j’ai pensé que la largeur de layout.item devrait être la même. Mais alors je reçois ceci:

layout.itemSize width = screenSize.width / 3

Si je réduis cette taille (de 7 ou 8 pixels par exemple), c’est mieux, mais la troisième cellule de la rangée n’est pas complètement visible et j’ai toujours cet espace vide (haut et bas et gauche et droite).

entrer la description de l'image ici

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

Ajouter ces 2 lignes

 layout.minimumInteritemSpacing = 0 layout.minimumLineSpacing = 0 

Donc, vous avez:

  // 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 

Cela va supprimer tous les espaces et vous donner une disposition de grid:

entrer la description de l'image ici

Si vous souhaitez que la première colonne ait une largeur égale à la largeur de l’écran, ajoutez la fonction suivante:

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

La disposition de la grid ressemblera désormais à (j’ai également ajouté un fond bleu à la première cellule): entrer la description de l'image ici

Pour Swift 3 et XCode 8 , cela a fonctionné. Suivez les étapes ci-dessous pour y parvenir: –

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

Placez ce code dans la fonction viewDidLoad ().

Dans certaines situations, la définition de UICollectionViewFlowLayout dans viewDidLoad ou ViewWillAppear peut ne pas affecter la collectionView.

La définition de UICollectionViewFlowLayout dans viewDidAppear peut entraîner l’ viewDidAppear des modifications de la taille des cellules lors de l’exécution.

Une autre solution, dans 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 } } 

Si vous recherchez Swift 3, suivez les étapes pour y parvenir:

 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 } 

Ceci est vérifié sur Xcode 8.0 avec Swift 3.

Rapide 4

 let collectionViewLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout collectionViewLayout?.sectionInset = UIEdgeInsetsMake(0, 20, 0, 40) collectionViewLayout?.invalidateLayout() 
 let layout = myCollectionView.collectionViewLayout as? UICollectionViewFlowLayout layout?.minimumLineSpacing = 8 

Pour Swift 3 et XCode 8, cela a fonctionné. Suivez les étapes ci-dessous pour y parvenir: –

 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 }