Wie zentriere ich die Zellen einer UICollectionView horizontal und vertikal?

Question

Wie zentriere ich vertikal und horizontal alle Zellen in einem UICollectionView mit UICollectionViewFlowLayout?

Das Flusslayout lässt den Abstand rechts oder unten abhängig von der Bildlaufrichtung. Ich möchte die gleiche Polsterung auf allen Seiten einstellen. Ich habe mit der sectionInset Eigenschaft der UICollectionViewFlowLayout herum gespielt.

Answer 1

Used Section Inset?

Ok, versuchen mit minimumLineSpacing Eigenschaft und minimumInteritemSpacing Eigenschaft spielt

minimumLineSpacing

für einen vertikal-Scrolling grid dieser Zeilenabstand stellt den minimalen Abstand zwischen aufeinanderfolgenden Zeilen. Bei einem horizontal scrollenden Raster repräsentiert dieser Wert den minimalen Abstand zwischen aufeinanderfolgenden Spalten. Dieser Abstand wird nicht auf den Abstand zwischen dem Kopf und der ersten Zeile oder zwischen der letzten Zeile und der Fußzeile angewendet.

minimumInteritemSpacing

für eine vertikal-Scrolling grid stellt dieser Abstand den Mindestabstand zwischen den Elementen in der gleichen Reihe. Bei einem horizontal scrollenden Raster stellt dieser Wert den minimalen Abstand zwischen Elementen in derselben Spalte dar. Dieser Abstand wird verwendet, um zu berechnen, wie viele Elemente in eine einzelne Zeile passen können, aber nachdem die Anzahl der Elemente bestimmt wurde, kann der tatsächliche Abstand möglicherweise nach oben angepasst werden.

Answer 2

Ich würde vorschlagen, die UICollectionViewDelegateFlowLayout Protokoll zu implementieren, um dynamisch horizontale und vertikale Zentrierung Ihrer Zellen zu erreichen. Vom UICollectionViewDelegateFlowLayout Protokoll Referenz:

Das UICollectionViewDelegateFlowLayout Protokoll definiert Methoden, die Sie mit einem UICollectionViewFlowLayout Objekt koordinieren lassen ein rasterbasierte Layout zu implementieren. Die Methoden dieses Protokolls definieren die Größe von Elementen und den Abstand zwischen Elementen im Raster.

Alle Methoden in diesem Protokoll sind optional. Wenn Sie keine bestimmte Methode implementieren, verwendet der Flow-Layout-Delegat Werte in seinen eigenen Eigenschaften für die entsprechenden Abstandsinformationen.

Das Flow-Layout-Objekt erwartet, dass das Delegate-Objekt der Sammlungsansicht dieses Protokoll annimmt. Implementieren Sie daher dieses Protokoll für ein Objekt, das der Delegateigenschaft der Auflistungsansicht zugewiesen ist.

Sie werden wahrscheinlich am meisten interessiert an den collectionView:layout:insetForSectionAtIndex: Verfahren, das verwendet werden kann, den Einsatz an allen vier Seiten des Bildschirms etwas wie UIEdgeInsetsMake mit anzupassen. Sie können die Einfügungen gemäß der Bildschirmgröße bestimmen, indem Sie die entsprechende Menge, z. B. die Größe der Zellen, von der entsprechenden Bildschirmdimension (vertikal oder horizontal) subtrahieren. Dann dividiere durch zwei, um gleiche Einfügungen für eine bestimmte Dimension zu erhalten.

Answer 3

Subclass UICollectionViewFlowLayout und außer Kraft setzen, die layoutAttributesForElementsInRect: Methode auszurichten Ihre 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; 
} 

ich nicht diesen Code für Sie bearbeitet haben, und es gibt Hinweise auf Makros und Instanzvariablen, so dass Sie es zwicken bräuchten zu Tun Sie, was Sie wollen. Dies wurde verwendet, um ein Coverflow-Layout zu erstellen, aber die Prinzipien werden für Sie die gleichen sein, aber ohne das 3D-Geschäft. Sie müssen den Abschnittseinsatz festlegen, um eine einzelne Zeile oder Spalte in Ihrem Flow zu garantieren.