ios - tutorial - uicollectionviewcell swift

Márgenes de espacio UICollectionView

Question

Tengo un UICollectionView que muestra fotos. UICollectionViewFlowLayout la vista de colección usando UICollectionViewFlowLayout . Funciona bien, pero me gustaría tener un espacio en los márgenes. ¿Es posible hacer eso usando UICollectionViewFlowLayout o debo implementar mi propio UICollectionViewLayout ?

Answer 1

Swift 4.0, Xcode 9

Si bien este hilo ya contiene un montón de respuestas útiles, quiero agregar una versión de Swift 4.0 , basada en la respuesta de William Hu.

También soluciona un problema con la respuesta original, donde el espaciado entre líneas diferentes a veces no coincidía con el espaciado entre elementos en la misma línea. Además, al establecer un ancho mínimo, el código calcula automáticamente el número de elementos en una fila y aplica ese estilo al diseño de flujo.

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

Answer 2

Configuración de inserciones en Interface Builder como se muestra en la captura de pantalla a continuación

Dará como resultado algo como esto:

Answer 3

Para agregar espacio en todo el UICollectionView :

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

Para jugar con el espacio entre elementos de la misma fila (columna si está desplazándose horizontalmente) y sus tamaños:

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

Answer 4

Para agregar márgenes a celdas especificadas, puede usar este diseño de flujo personalizado. 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
    }
}

Answer 5

Para agregar una separación de 10 px entre cada sección, solo escriba esto

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

Answer 6

Para poner espacio entre CollectionItem use esto

escribe estas dos líneas en viewdidload

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

Answer 7

Puede usar el método collectionView:layout:insetForSectionAtIndex: para su UICollectionView o establecer la propiedad UICollectionViewFlowLayout objeto UICollectionViewFlowLayout asociado a su UICollectionView :

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

o

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

Answer 8

Solo para corregir información incorrecta en esta página:

1- minimumInteritemSpacing : el espaciado mínimo para usar entre elementos en la misma fila.

El valor predeterminado: 10.0.

(Para una grilla que se desplaza verticalmente, este valor representa el espaciado mínimo entre los elementos en la misma fila).

2- minimumLineSpacing : El espaciado mínimo para usar entre líneas de elementos en la grilla.

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

Answer 9

Utilizando collectionViewFlowLayout.sectionInset o collectionView:layout:insetForSectionAtIndex: son correctos.

Sin embargo, si su collectionView tiene varias secciones y desea agregar un margen a toda la colecciónView, le recomiendo usar el conjunto de contenido de scrollView:

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

Answer 10

use setMinimumLineSpacing: y setMinimumInteritemSpacing: en UICollectionViewFlowLayout -Object.

Answer 11

En el objetivo 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;

Todo lo que tiene que hacer es cambiar el valor de itemsPerRow y actualizará la cantidad de elementos por fila en consecuencia. Además, puede cambiar el valor de espaciado si desea aquí una descripción más o menos general de la imagen de spacingenter.

Answer 12

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 = UIEdgeInsetsMake(0, 0, 0, 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

Answer 13

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