2013-03-12 2 views
8

Come si centra verticalmente e orizzontalmente tutte le celle in un UICollectionView utilizzando UICollectionViewFlowLayout?Come si centra le celle di un UICollectionView orizzontalmente e verticalmente?

Il layout del flusso lascia la spaziatura a destra o in basso a seconda della direzione di scorrimento. Voglio impostare lo stesso padding su tutti i lati. Ho giocato con la proprietà sectionInset dello UICollectionViewFlowLayout.

+0

fronte stesso problema è possibile fornire un po 'di codice? –

+0

@kirtimali Ho appena scritto un UIView personalizzato poiché avevo bisogno di una griglia con ogni articolo della stessa dimensione. Erano solo poche pagine di codice. Non posso condividerlo, mi dispiace. – jjxtra

risposta

1

Sezione inserto usata?

Ok, provare a giocare con minimumLineSpacing proprietà e minimumInteritemSpacing proprietà

minimumLineSpacing

Per una griglia a scorrimento verticale, questa interlinea rappresenta la distanza minima tra file successive. Per una griglia che scorre orizzontalmente, questo valore rappresenta la spaziatura minima tra le colonne successive. Questa spaziatura non viene applicata allo spazio tra l'intestazione e la prima riga o tra l'ultima riga e il piè di pagina.

minimumInteritemSpacing

Per una griglia a scorrimento verticale, tale distanza rappresenta la distanza minima tra gli elementi nella stessa riga. Per una griglia che scorre orizzontalmente, questo valore rappresenta la spaziatura minima tra gli elementi nella stessa colonna. Questa spaziatura viene utilizzata per calcolare quanti elementi possono essere contenuti in una singola riga, ma dopo aver determinato il numero di elementi, la spaziatura effettiva può essere regolata verso l'alto.

+0

Anche se questo non risolve completamente la domanda, è un bel suggerimento. Grazie! – Cesare

5

Suggerirei di implementare il protocollo UICollectionViewDelegateFlowLayout per ottenere in modo dinamico il centraggio orizzontale e verticale delle celle. Dal UICollectionViewDelegateFlowLayout Protocol Reference:

Il protocollo UICollectionViewDelegateFlowLayout definisce i metodi che permettono di coordinare con un oggetto UICollectionViewFlowLayout per implementare un layout basato sulla griglia. I metodi di questo protocollo definiscono la dimensione degli oggetti e la spaziatura tra gli elementi nella griglia.

Tutti i metodi in questo protocollo sono facoltativi. Se non si implementa un metodo particolare, il delegato del layout di flusso utilizza i valori nelle proprie proprietà per le informazioni sulla spaziatura appropriate.

L'oggetto del layout di flusso si aspetta che l'oggetto delegato della vista di raccolta adotti questo protocollo. Pertanto, implementare questo protocollo sull'oggetto assegnato alla proprietà delegato della vista raccolta.

Probabilmente sarete più interessati nel metodo collectionView:layout:insetForSectionAtIndex: che può essere utilizzato per regolare l'inserto su tutti e quattro i lati dello schermo usando qualcosa come UIEdgeInsetsMake. È possibile determinare gli inserti in base alle dimensioni dello schermo sottraendo la quantità appropriata, come la dimensione delle celle, dalla dimensione dello schermo corrispondente (verticale o orizzontale). Quindi, dividi per due per ottenere inserimenti uguali per una particolare dimensione.

-1

sottoclasse UICollectionViewFlowLayout e l'override del metodo layoutAttributesForElementsInRect: per allineare il UICollectionViewCells:

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect { 

NSArray* array = [super layoutAttributesForElementsInRect:rect]; 
CGRect visibleRect; 
visibleRect.origin = self.collectionView.contentOffset; 
visibleRect.size = self.collectionView.bounds.size; 

for(UICollectionViewLayoutAttributes* attributes in array) { 

    if(CGRectIntersectsRect(attributes.frame, rect)){ 

     CGFloat d = UIInterfaceOrientationIsPortrait(_orientation)? 
     CGRectGetMidY(visibleRect)-attributes.center.y : 
     CGRectGetMidX(visibleRect)-attributes.center.x; 

     CGFloat w = visibleRect.size.width; 
     CGFloat h = visibleRect.size.height; 

     CGFloat dRatio = UIInterfaceOrientationIsPortrait(_orientation)? d/(h/2) : d/(w/2); 

     CGFloat angle = MAX_ANGLE*dRatio; // an angle between 0 and MAX_ANGLE based on proximity to center 
     CGFloat radians = DEGREES_TO_RADIANS(angle); 

     debug = 0; 

     CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; 
     rotationAndPerspectiveTransform.m34 = PERSPECTIVE; 

     rotationAndPerspectiveTransform = UIInterfaceOrientationIsPortrait(_orientation)? 
     CATransform3DRotate(rotationAndPerspectiveTransform, radians, 1.0f, 0.0f, 0.0f) : 
     CATransform3DRotate(rotationAndPerspectiveTransform, radians, 0.0f, 1.0f, 0.0f); 

     attributes.transform3D = rotationAndPerspectiveTransform; 
    } 
} 

return array; 
} 

Non hai modificato il codice per voi e ci sono riferimenti a macro e variabili di istanza in modo avresti bisogno di modificarlo per Fai quello che vuoi. Questo è stato usato per creare un layout di stile coverflow ma i principi saranno gli stessi per te ma senza il business 3D. È necessario impostare la sezione per garantire una singola riga o colonna nel flusso.