UICollectionViewLayout Beispiele

Den 1000memories "Quilt" - Sicht ist pinterest-like und open source: http://blog.1000memories.com/168-opensourcing-quilt, und Sie können Graben Sie sich durch, um zu sehen, wie es funktioniert.

Wenn Sie auf der Suche für eine grundlegende übersicht, hier ist die grundlegende Idee von dem, was Sie gehen zu wollen, zu tun. Die einfachste Sache von der weit, wenn Sie nur ein Pinterest-Stil layout, um eine Unterklasse UICollectionViewFlowLayout. Sie bekommen eine Menge von layout helfen, aus dieser Klasse, und Pinterest-Stil ist in seinen Fähigkeiten. Sie brauchen nur zu überschreiben einer Methode.

Einrichten eines normalen UICollectionView mit UICollectionViewFlow layout. Eine schnelle Möglichkeit, dies zu tun ist:

• Ziehen Sie eine UIViewController auf ein storyboard, fallen einem UICollectionView auf, dass. Stellen Sie die Klassen entsprechend Ihrer benutzerdefinierten Klassen, etc. Sie können einen Delegaten, und erstellen Sie eine delegate-Klasse, die hier aber streng genommen nicht notwendig, um NUR die Pinterest flow-layout (die Sie fast definitiv möchten, brechen Sie die Auswahl Verantwortung Zeug in eine delegate-Klasse, die in Wirklichkeit aber).
• Stub aus einer Datenquelle. Die Umsetzung der Daten-source-Protokoll für die UICollectionView (http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewDataSource_protocol/Reference/Reference.html) ist trivial einfach. Stellen Sie sicher, dass Sie eine Wiederverwendung Bezeichner auf Ihrem UICollectionViewCell. Sie brauchen:
  1. (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
     • nur 1 zurück jetzt;
  2. (NSInteteger)collectionView:numberOfItemsInSection:
     • hartcodieren eine Nummer für jetzt, machen 20.
  3. – (UICollectionViewCell *)collectionView:cellForItemAtIndexPath:
     • Dies ist einer der Orte, wo die Unterklassen der flow-layout ' s gonna dir einen gefallen zu tun. Alles, was Sie wirklich hier tun müssen, ist rufen Sie dequeueReusableCellWithReuseIdentifier:forIndexPath: mit der index-Pfad. Wenn Sie einen UIImageView oder einige labels, die Zelle, das wäre ein großartiger Ort, um tatsächlich weisen die Bild -, text -, etc.

• In der viewController ist viewDidLoad instanziieren UICollectionViewFlowLayout und legen Sie die UICollectionView datasource zu verkaufen und layout auf flowlayout. Denken Sie daran, diese Klasse ist eine Unterklasse von UICollectionViewViewController.

  self.collectionView.dataSource = [[YourDataSource alloc] init];
  self.collectionView.collectionViewLayout = [[UICollectionViewFlowLayout alloc] init];
  

Ok. An diesem Punkt sollten Sie in der Lage zu führen Sie Ihre app aus und sehen ein paar Sachen auf dem Bildschirm. Dies ist ein Wirbelwind übersicht. Wenn Sie weitere Informationen zum einrichten ViewControllers und so gibt es Tonnen von Sachen, die zur Verfügung über, die.

Nun kommt der wichtige Teil, Pinterest-izing der flow-layout.

Fügen Sie zunächst eine neue Klasse, die eine Unterklasse von UIViewControllerFlowLayout. Ändern Sie Ihre ViewController ist viewDidLoad diese Klasse instanziieren und weisen, wie die UICollectionView's collectionViewLayout.

Die Methode, die Sie benötigen werden, um zu implementieren ist - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect.

Hier ist das Ding: Die Oberklasse machen werde fast alle arbeiten für Sie. Ihr code wird in etwa so Aussehen:

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect]; 
    [attributes enumerateObjectsUsingBlock:^(id attr, NSUInteger idx, BOOL *stop) {
    float newYCoord = [calculationMethodYouHaveToWriteFor:attr.frame];
    attr.frame = CGRectMake(attr.frame.origin.x, newYCoord, attr.size.width, attr.size.height];
}];

}

Pinterest verwendet eine Feste Breite Spalten, alles, was Sie tun müssen, um in Ihre Berechnung Methode ist herauszufinden, welche Spalte Sie sich befinden (`attr.Herkunft.x /_columnWidth), und suchen Sie bis der Höhe, die in dieser Spalte aus der ivar Sie habe es zu speichern in. Vergessen Sie nicht, fügen Sie es zu dem neuen Objekt die Höhe, und speichern Sie es zurück für den nächsten Durchgang.

Dem flow-layout Superklasse Griffe: Herstellung von Zellen, die Bestimmung, welche Zellen sichtbar sind, herauszufinden, den Inhalt Größe, herauszufinden, die Anordnung der Zeilen in x-Richtung, die Zuordnung von index-Pfade zu den Zellen. Viel junk. Und überschreiben, dass eine Methode, können Sie die Geige mit dem y-pos das Herz begehrt.

Habe ich eine benutzerdefinierte uicollectionviewlayout, die in meinem persönlichen Projekt. Hier ist der link. Hoffe, es hilft.

https://github.com/johnny0614/YJZAlbumCollectionViewLayout