web-dev-qa-db-fra.com

Placer une marge autour de chaque bord de UICollectionView

Lorsque UICollectionView est rempli avec des éléments, ceux-ci vont toujours jusqu'aux bords de UICollectionView de la manière suivante:

---------------
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
---------------

Je voudrais placer une marge autour de chaque bord comme suit:

---------------
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
---------------

J'ai essayé d'y parvenir en plaçant UICollectionView dans son hébergement UIView en configurant son cadre pour simuler une bordure, mais il défile à l'intérieur du cadre afin d'être coupé en haut et en bas et le défilement apparaît également dans les limites du cadre.

J'ai regardé l'API mais je ne vois rien d'évident pour y parvenir. Des idées?

iosuicollectionviewuicollectionviewlayout
19
Adam

Dans

(UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
}

vous pouvez donner à vos cellules une marge sur le côté gauche.

Vous pouvez également créer des cellules personnalisées comportant une marge.

ou vous pouvez définir la propriété .sectionInset de votre CollectionviewFlowLayout, ce qui devrait être le moyen le plus simple (si vous utilisez FlowLayout)

7
Heckscheibe

Je sais que cette question est ancienne, mais n'oubliez pas qu'UICollectionView hérite de UIScrollView.

UICollectionView *collectionView = [[UICollectionView alloc] init];
collectionView.contentInset = UIEdgeInsetsMake(x.x, x.x, x.x, x.x);

// Swift 3 for good measure
let collectionView = UICollectionView()
collectionView.contentInset = UIEdgeInsets(top: x.x, left: x.x, bottom: x.x, right: x.x)

Sachez que contentInset et sectionInset peuvent modifier l'espacement des cellules dans votre vue. Pour plus d'informations à ce sujet, voir this post.

40
Tyler Cloutier

Vous pouvez utiliser la fonction suivante.

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

Vous devrez jouer avec le nombre pour savoir comment forcer les objets collectionviewCells sur une seule ligne. 

UIEdgeInsetsMake ( CGFloat top,CGFloat left,CGFloat bottom,CGFloat right);

Pour Swift 3 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 4, 10, 4)
}
15
Vinayak Kini

Vous pouvez contrôler pratiquement chaque aspect de la grille avec le protocole de collectionview. Voici un exemple:

- (UICollectionViewFlowLayout *)collectionViewFlowLayout
{
    UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
    flowLayout.itemSize = CGSizeMake(180, 255);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 30, 0, 30);
    flowLayout.minimumInteritemSpacing = 0.0f;
    flowLayout.minimumLineSpacing = 0.0f;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    return flowLayout;
}

Celui que vous voudriez changer dans votre cas est le sectionInsets

10
mmackh

Swift 2.0

self.automaticallyAdjustsScrollViewInsets = false
self.collectionView.contentInset = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0)
3
Tal Zion

Sur Xcode 8, si vous utilisez le générateur d'interface, vous pouvez définir les intercalaires de section directement sur l'inspecteur de taille:

 enter image description here

 enter image description here

1
Marcone

Swift 4 mis à jour ( Vinayak Kini answer):

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