J'ai un UICollectionViewqui montre des photos. J'ai créé la collectionview en utilisant UICollectionViewFlowLayout. Cela fonctionne bien mais j'aimerais avoir un espacement sur les marges. Est-il possible de le faire en utilisant UICollectionViewFlowLayoutou dois-je implémenter le mien UICollectionViewLayout?

Vous pouvez utiliser la collectionView:layout:insetForSectionAtIndex:méthode pour votre UICollectionViewou définir la sectionInsetpropriété de l' UICollectionViewFlowLayoutobjet attaché à votre UICollectionView:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

ou

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

Mis à jour pour Swift 5

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
       return UIEdgeInsets(top: 25, left: 15, bottom: 0, right: 5)
    }

Configuration des inserts dans Interface Builder comme indiqué dans la capture d'écran ci-dessous

Cela donnera quelque chose comme ceci:

Pour ajouter un espacement sur l' ensemble UICollectionView :

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

Pour jouer avec l'espacement entre les éléments d'une même ligne (colonne si vous faites défiler horizontalement), et leurs tailles:

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

Swift 4

    let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.

    let itemSpacing: CGFloat = 3
    let itemsInOneLine: CGFloat = 3
    flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = 3

MODIFIER XCode 11.4 et swift 5

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

ne fonctionne pas. Utilisez ci-dessous fonctionne.

let flow = UICollectionViewFlowLayout()

Juste pour corriger certaines informations erronées dans cette page:

1- minimumInteritemSpacing : L'espacement minimum à utiliser entre les éléments de la même ligne.

La valeur par défaut: 10,0.

(Pour une grille à défilement vertical, cette valeur représente l'espacement minimum entre les éléments d'une même ligne.)

2- minimumLineSpacing : L'espacement minimum à utiliser entre les lignes d'éléments dans la grille.

Réf: http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html

Calcul de disposition automatique et rapide moderne

Bien que ce fil contienne déjà un tas de réponses utiles, je souhaite ajouter une version moderne de Swift , basée sur la réponse de William Hu. Cela améliore également deux choses:

• L'espacement entre les différentes lignes correspondra désormais toujours à l'espacement entre les éléments de la même ligne.
• En définissant une largeur minimale, le code calcule automatiquement le nombre d'éléments dans une ligne et applique ce style à la disposition du flux.

Voici le code:

// Create flow layout
let flow = UICollectionViewFlowLayout()

// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width

// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / max(1, itemsInOneLine - 1))

// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing

// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)

utiliser setMinimumLineSpacing:et setMinimumInteritemSpacing:sur le UICollectionViewFlowLayout-Object.

Utilisation collectionViewFlowLayout.sectionInsetou collectionView:layout:insetForSectionAtIndex:sont corrects.

Cependant, si votre collectionView a plusieurs sections et que vous souhaitez ajouter une marge à l'ensemble de collectionView, je recommande d'utiliser le scrollView contentInset:

UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);

Pour mettre de l'espace entre les CollectionItems, utilisez ceci

écrivez ces deux lignes dans viewdidload

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

Définissez la insetForSectionAtpropriété de l' UICollectionViewFlowLayoutobjet attaché à votreUICollectionView

Assurez-vous d'ajouter ce protocole

UICollectionViewDelegateFlowLayout

Rapide

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets (top: top, left: left, bottom: bottom, right: right)
    }

Objectif c

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

En Objective-C

CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;

flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;

Tout ce que vous avez à faire est de modifier la valeur itemsPerRow et il mettra à jour le nombre d'éléments par ligne en conséquence. De plus, vous pouvez modifier la valeur d'espacement si vous souhaitez un espacement plus ou moins général.

Pour ajouter des marges aux cellules spécifiées, vous pouvez utiliser cette disposition de flux personnalisée. https://github.com/voyages-sncf-technologies/VSCollectionViewCellInsetFlowLayout/

extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
        if indexPath.item == 0 {
            return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        }
        return UIEdgeInsets.zero
    }
}

Dans swift 4 et autoLayout, vous pouvez utiliser sectionInset comme ceci:

let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: (view.frame.width-40)/2, height: (view.frame.width40)/2) // item size
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10) // here you can add space to 4 side of item
        collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) // set layout to item
        collectionView?.register(ProductCategoryCell.self, forCellWithReuseIdentifier: cellIdentifier) // registerCell
        collectionView?.backgroundColor = .white // background color of UICollectionView
        view.addSubview(collectionView!) // add UICollectionView to view

Pour ajouter une séparation de 10 pixels entre chaque section, écrivez simplement ceci

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }