193 votes

Marges d'espacement UICollectionView

J'ai un UICollectionView qui montre des photos. J'ai créé la collectionview en utilisant UICollectionViewFlowLayout . Il fonctionne bien mais j'aimerais avoir un espacement sur les marges. Est-il possible de le faire en utilisant UICollectionViewFlowLayout ou dois-je mettre en œuvre mon propre UICollectionViewLayout ?

356voto

michael23 Points 698

Vous pouvez utiliser le collectionView:layout:insetForSectionAtIndex: pour votre UICollectionView ou régler le sectionInset de l UICollectionViewFlowLayout 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)
    }

47 votes

Je n'arrive pas à faire fonctionner les insertions de gauche et de droite lorsque j'utilise une disposition à flux vertical...

2 votes

Maintenant, le fait de surcharger la méthode sectionInset de la sous-classe UICollectionViewFlowLayout n'a également aucun effet. La définition de la propriété décrite ci-dessous fonctionne.

9 votes

NB : n'oubliez pas d'ajouter UICollectionViewDelegateFlowLayout à votre liste de délégués ViewController pour utiliser la méthode insetForSectionAtIndex

105voto

krzymar Points 215

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

Setting section insets for UICollectionView

Cela donnera quelque chose comme ceci :

A collection view cell with section insets

2 votes

Excellente réponse, je voulais juste signaler que vous devrez également jouer avec l'espacement minimum pour que l'insertion de la section fonctionne bien.

76voto

marmor Points 4559

Pour ajouter un espacement sur le tout le site UICollectionView :

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

Pour jouer avec l'espacement entre les éléments de la même ligne (colonne si vous faites défiler l'écran horizontalement), ainsi que leur taille :

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

5 votes

Cela fonctionne, mais la collection.collectionViewLayout a besoin d'une distribution comme dans l'exemple de @Pooja : UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) self.collectionViewLayout;

0 votes

Coulée en rapide if let flow = collectionViewLayout as? UICollectionViewFlowLayout { flow.itemSize = CGSize(width: 100, height: 100) }

43voto

Felix Points 111

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

1- espacement minimum entre les articles : L'espacement minimum à utiliser entre les éléments d'une même ligne.

La valeur par défaut est 10.0.

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

2- espacement minimal entre les lignes : L'espacement minimum à utiliser entre les lignes des éléments de la grille.

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

2 votes

Cela ne semble pas affecter l'espacement entre les sections, mais seulement entre les éléments d'une même section ?

0 votes

@Crashalot - Êtes-vous sûr de ne pas vouloir dire espacement minimal entre les lignes ? c'est-à-dire chaque ligne de cellules ? Il existe également des options pour les insertions de section si vous utilisez vraiment des sections.

0 votes

Cela a fonctionné pour moi en le faisant via l'interface du storyboard. Je cherchais une solution pour les vues de collection horizontales uniquement. Merci +10

8voto

Jonathan Cichon Points 3525

Utiliser setMinimumLineSpacing: y setMinimumInteritemSpacing: sur le UICollectionViewFlowLayout -Objet.

0 votes

Non, cela ne fonctionne pas, comme prévu. setMinimumLineSpacing est : L'espacement minimum à utiliser entre les éléments d'une même ligne. Et setMinimumInteritemSpacing est : L'espacement minimum à utiliser entre les lignes des éléments de la grille. Ma question porte sur les marges et non sur l'espace entre les éléments, par exemple l'espacement gauche et supérieur du premier élément.

0 votes

En supposant une direction de défilement verticale, vous pouvez utiliser ContentInset pour l'espacement supérieur et inférieur de la première et de la dernière ligne. Vous pouvez également ajouter vos marges dans vos cellules.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X