Espacement des cellules dans UICollectionView

Appui de la question initiale. J'ai essayé d'obtenir l'espacement 5px sur le UICollectionView mais cela ne fonctionne pas, aussi bien avec un UIEdgeInsetsMake(0,0,0,0)...

Sur un UITableView je peux le faire en spécifiant directement les coordonnées x,y dans une rangée...

Heres mon UICollectionView code:

#pragma mark collection view cell layout / size
- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return [self getCellSize:indexPath];  //will be w120xh100 or w190x100
    //if the width is higher, only one image will be shown in a line
}

#pragma mark collection view cell paddings
- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 0, 0, 0); //top, left, bottom, right
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

    return 5.0;
}

Mise à jour: Résolu mon problème, avec le code suivant.

ViewController.m

#import "ViewController.h"
#import "MagazineCell.h" //created just the default class. 
static NSString * const cellID = @"cellID";
@interface ViewController ()
@end
@implementation ViewController
#pragma mark - Collection view
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
mCell.backgroundColor = [UIColor lightGrayColor];
return mCell;
}
#pragma mark Collection view layout things
//Layout: Set cell size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"SETTING SIZE FOR ITEM AT INDEX %d", indexPath.row);
CGSize mElementSize = CGSizeMake(104, 104);
return mElementSize;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
//Layout: Set Edges
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
//return UIEdgeInsetsMake(0,8,0,8);  //top, left, bottom, right
return UIEdgeInsetsMake(0,0,0,0);  //top, left, bottom, right
}
@end

Souvenez-vous, c'est minimum d'espace, pas de minimum entre l'élément d'espacement ou de l'espace cellulaire. Parce que votre collectionView de la direction de défilement est HORIZONTALE.

Si c'était à la verticale, puis vous devez définir l'espace cellulaire ou inter élément de l'espace pour l'espace horizontal entre les cellules et l'espacement des lignes verticales de l'espace entre les cellules.

Objective-C version

- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 20;
}

Swift version:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 20
}

Swift version de la réponse la plus populaire. L'espace entre les cellules vont être égal à cellSpacing.

class CustomViewFlowLayout : UICollectionViewFlowLayout {
let cellSpacing:CGFloat = 4
override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
if let attributes = super.layoutAttributesForElementsInRect(rect) {
for (index, attribute) in attributes.enumerate() {
if index == 0 { continue }
let prevLayoutAttributes = attributes[index - 1]
let origin = CGRectGetMaxX(prevLayoutAttributes.frame)
if(origin + cellSpacing + attribute.frame.size.width < self.collectionViewContentSize().width) {
attribute.frame.origin.x = origin + cellSpacing
}
}
return attributes
}
return nil
}
}

Veuillez noter le nom de la propriété minimumInterItemSpacing . Ce sera le espacement minimum entre les éléments n'est pas exactement le espacement. Si vous définissez minimumInterItemSpacing à une certaine valeur, vous pouvez assurer que l'espacement ne sera pas une valeur de moins. Mais il ya une chance d'obtenir une valeur plus élevée.

Fait l'espacement entre les éléments dépend de plusieurs facteurs itemSize et sectionInset. La collecte de vue dynamiquement placer le contenu sur la base de ces valeurs. Si vous ne pouvez pas assurer l'espacement exact. Vous devriez faire quelques essais et erreurs avec sectionInset et minimumInterItemSpacing.

La voté répondre (et aussi le swift version) a un petit problème: il y aura un grand espacement sur la droite.

C'est parce que le flux de la mise en page est personnalisée pour faire de l'espacement entre les cellules exact, avec un flotteur gauche comportement.

Ma solution est de manipuler la section d'encart, de sorte que la section est de centrer, mais l'espacement est exactement comme indiqué.

Dans la capture d'écran ci-dessous, l'élément/l'espacement des lignes est exactement 8pt, tandis que la section de gauche & à droite encart sera plus grande que 8pt (pour le rendre de centre alignées):

Swift code:

private let minItemSpacing: CGFloat = 8
private let itemWidth: CGFloat      = 100
private let headerHeight: CGFloat   = 32
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//Create our custom flow layout that evenly space out the items, and have them in the center
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
layout.minimumInteritemSpacing = minItemSpacing
layout.minimumLineSpacing = minItemSpacing
layout.headerReferenceSize = CGSize(width: 0, height: headerHeight)
//Find n, where n is the number of item that can fit into the collection view
var n: CGFloat = 1
let containerWidth = collectionView.bounds.width
while true {
let nextN = n + 1
let totalWidth = (nextN*itemWidth) + (nextN-1)*minItemSpacing
if totalWidth > containerWidth {
break
} else {
n = nextN
}
}
//Calculate the section inset for left and right. 
//Setting this section inset will manipulate the items such that they will all be aligned horizontally center.
let inset = max(minItemSpacing, floor( (containerWidth - (n*itemWidth) - (n-1)*minItemSpacing) / 2 ) )
layout.sectionInset = UIEdgeInsets(top: minItemSpacing, left: inset, bottom: minItemSpacing, right: inset)
collectionView.collectionViewLayout = layout
}

Code Simple pour l'espacement

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.minimumInteritemSpacing = 10 //Some float value

Je suis tombé sur un problème similaire, comme l'OP. Malheureusement, l'on a accepté la réponse n'a pas de travail pour moi, depuis le contenu de la collectionView ne serait pas centré correctement. Donc j'ai trouvé une autre solution qui ne nécessite que tous les éléments de la collectionView sont de la même largeur, ce qui semble être le cas dans la question:

#define cellSize 90
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
float width = collectionView.frame.size.width;
float spacing = [self collectionView:collectionView layout:collectionViewLayout minimumInteritemSpacingForSectionAtIndex:section];
int numberOfCells = (width + spacing) / (cellSize + spacing);
int inset = (width + spacing - numberOfCells * (cellSize + spacing) ) / 2;
return UIEdgeInsetsMake(0, inset, 0, inset);
}

Que le code s'assurer que la valeur retournée par ...minimumInteritemSpacing... sera exactement l'espacement entre chaque collectionViewCell et en outre garantir que toutes les cellules seront centrés dans le collectionView

Swift 3 Version

Il suffit de créer un UICollectionViewFlowLayout sous-classe et collez cette méthode.

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let answer = super.layoutAttributesForElements(in: rect) else { return nil }
for i in 1..<answer.count {
let currentAttributes = answer[i]
let previousAttributes = answer[i - 1]
let maximumSpacing: CGFloat = 8
let origin = previousAttributes.frame.maxX
if (origin + maximumSpacing + currentAttributes.frame.size.width < self.collectionViewContentSize.width && currentAttributes.frame.origin.x > previousAttributes.frame.origin.x) {
var frame = currentAttributes.frame
frame.origin.x = origin + maximumSpacing
currentAttributes.frame = frame
}
}
return answer
}

J'ai essayé iago849 de réponse et cela a fonctionné.

Swift 4

open override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let answer = super.layoutAttributesForElements(in: rect) else {
return nil
}
let count = answer.count
for i in 1..<count {
let currentLayoutAttributes = answer[i]
let prevLayoutAttributes = answer[i-1]
let origin = prevLayoutAttributes.frame.maxX
if (origin + CGFloat(spacing) + currentLayoutAttributes.frame.size.width) < self.collectionViewContentSize.width && currentLayoutAttributes.frame.origin.x > prevLayoutAttributes.frame.origin.x {
var frame = currentLayoutAttributes.frame
frame.origin.x = origin + CGFloat(spacing)
currentLayoutAttributes.frame = frame
}
}
return answer
}

Voici le lien pour le projet github.
https://github.com/vishalwaka/MultiTags

J'ai une horizontale UICollectionView et sous-classé UICollectionViewFlowLayout. L'affichage de la collection a de grandes cellules, et n'affiche qu'une seule ligne à la fois, et l'affichage de la collection s'adapte à la largeur de l'écran.

J'ai essayé iago849 de réponse et cela a fonctionné, mais j'ai découvert que je n'avais pas besoin de sa réponse. Pour une raison quelconque, la définition de la minimumInterItemSpacing ne fait rien. L'espacement entre mes articles/les cellules peuvent être entièrement contrôlés par minimumLineSpacing.

Ne sais pas pourquoi cela fonctionne de cette façon, mais il fonctionne.

J'ai un problème avec la accepté de répondre, j'ai donc mis à jour, c'est de travailler pour moi:

.h

@interface MaxSpacingCollectionViewFlowLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) CGFloat maxCellSpacing;
@end

.m

@implementation MaxSpacingCollectionViewFlowLayout
- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
if (attributes.count <= 0) return attributes;
CGFloat firstCellOriginX = ((UICollectionViewLayoutAttributes *)attributes[0]).frame.origin.x;
for(int i = 1; i < attributes.count; i++) {
UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
if (currentLayoutAttributes.frame.origin.x == firstCellOriginX) { //The first cell of a new row
continue;
}
UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
CGFloat prevOriginMaxX = CGRectGetMaxX(prevLayoutAttributes.frame);
if ((currentLayoutAttributes.frame.origin.x - prevOriginMaxX) > self.maxCellSpacing) {
CGRect frame = currentLayoutAttributes.frame;
frame.origin.x = prevOriginMaxX + self.maxCellSpacing;
currentLayoutAttributes.frame = frame;
}
}
return attributes;
}
@end

Essayer de jouer avec cette méthode:

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