6

Ich baue eine Mosaik-Ansicht mit UICollectionView.Wie füge ich ein Hintergrundbild zu UICollectionView hinzu, das scrollt und zoomen wird Zellen

Ich habe UICollectionViewFlowLayout subclassed, um ein örtlich festgelegtes Raster zu entwerfen, das sowohl horizontal und vertikal der Rolle gescrollt werden kann. Ich habe auch eine UIPinchGestureRecognizer angefügt, damit die Sammlung skaliert/gezoomt werden kann.

Jede Zelle in der Sammlung enthält eine UIImage mit etwas Transparenz. Ich möchte ein Hintergrundbild hinzufügen, das mit den Zellen scrollt und zoomen wird.

Ich habe eine Reihe von verschiedenen Lösungen versucht.

  • die Hintergrundfarbe der UICollectionView Einstellung mit colorWithPatternImage. (scrollt nicht/verkleinert nicht mit Inhalt)
  • Setzen Sie eine Hintergrundbildansicht für jede Zelle auf den entsprechenden beschnittenen Teil des Hintergrundbilds. (verwendet viel zu viel Speicher)

Ich habe in Ergänzungs- und Dekoration Ansichten aus, aber kämpfen, meinen Kopf zu bekommen um ihn herum. Ich denke, ich brauche ergänzende Ansichten als das Bild im Hintergrund verwendet wird abhängig von der datasource ändern.

Was ich nicht verstehe ist, wie ich nur eine zusätzliche Ansicht registrieren kann, um die Breite und Höhe des gesamten collectionview zu überspannen. Sie scheinen an eine Zelle gebunden zu sein.

+0

Eine mögliche Lösung Möglicherweise müssen Sie das Bild in eine Bildlaufansicht hinter der Sammlungsansicht einfügen, und jedes Mal, wenn der Benutzer durch die Sammlungsansicht scrollt, legen Sie die Hintergrundscrollansicht manuell fest. – nhgrif

+0

Danke @nhgrif, das ist eine Lösung, die ich in Betracht gezogen habe, aber schien ein wenig unelegant. – th3hamburgler

Antwort

4

Ich weiß nicht, ob Sie eine Antwort gefunden haben ...!

Sie sind auf dem richtigen Weg, zusätzliche Ansichten zu verwenden. Der Indexpfad der Zusatzansicht ist nicht an eine Zelle gebunden, er hat einen eigenen Indexpfad.

Dann in Ihrer Unterklasse UICollectionViewFlowLayout müssen Sie einige Methoden Unterklasse. Die docs sind ziemlich gut!

In der layoutAttributesForElementsInRect: Methode müssen Sie super aufrufen und dann einen weiteren Satz von Layoutattributen für Ihre zusätzliche Ansicht hinzufügen.

Dann in der layoutAttributesForSupplementaryViewOfKind:atIndexPath: Methode Sie die Größe der zurückgegebenen Attribute auf die Größe der Sammlungsansicht Inhalt, so dass das Bild füllt den gesamten Inhalt, und nicht nur den Rahmen. Wahrscheinlich möchten Sie auch die z-Reihenfolge festlegen, um sicherzustellen, dass sie sich hinter den Zellen befindet. Lesen Sie die Dokumentation für UICollectionViewLayoutAttributes

@implementation CustomFlowLayout 

    -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 
    { 
     NSMutableArray *attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy]; 

     // Use your own index path and kind here 
     UICollectionViewLayoutAttributes *backgroundLayoutAttributes = [self layoutAttributesForSupplementaryViewOfKind:@"background" atIndexPath:[NSIndexPath indexPathWithItem:0 inSection:0]]; 

     [attributes addObject:backgroundLayoutAttributes]; 

     return [attributes copy]; 
    } 

    -(UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 

     if ([kind isEqualToString:@"background"]) { 
      UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:kind withIndexPath:indexPath]; 
      attrs.size = [self collectionViewContentSize]; 
      attrs.zIndex = -10; 
      return attrs; 
     } else { 
      return [super layoutAttributesForSupplementaryViewOfKind:kind atIndexPath:indexPath]; 
     } 
    } 

@end 

In Ihrer Sammlung Ansicht Datenquelle müssen Sie diese Methode: collectionView:viewForSupplementaryElementOfKind:atIndexPath:

-(void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    // Setup your collection view 
    UICollectionView *collectionView = [UICollectionView initWithFrame:self.view.bounds collectionViewLayout:[CustomFlowLayout new]]; 
    [collectionView registerClass:[BackgroundReusableView class] forSupplementaryViewOfKind:@"background" withReuseIdentifier:@"backgroundView"]; 
} 

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 
{ 
    if ([kind isEqualToString:@"background"]) { 
     BackgroundReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"backgroundView" forIndexPath:indexPath]; 

     // Set extra info 

     return view; 
    } else { 
     // Shouldn't be called 
     return nil; 
    } 
} 

Hoffentlich alles, was du auf dem richtigen Weg bekommen sollte :)

+0

Danke für die Hilfe Rich, das ist großartig, ich werde es versuchen! – th3hamburgler