Wie würden Sie ein scrollbares Raster in Ihrer iPhone App implementieren?

Question

Ich habe etwa 50 Bilder von je 50 x 50 Pixel Größe. Ich möchte, dass der Benutzer einen von ihnen auswählt. Also dachte ich zuerst über ein UITableView nach, aber das ist einfach nicht das Richtige. Es verschwendet viel Platz auf dem Bildschirm. Anstatt alle Bilder untereinander zu platzieren, wäre es besser, ein Raster von zB 6 Spalten und n Zeilen zu zeigen.

Ich würde ein UIScrollView verwenden und es mit UIView-Objekten füllen, die ich automatisch anordne, so dass sie wie ein Raster erscheinen. Ist das der Weg? Oder irgendwelche anderen Vorschläge?

Answer 1

Ich mache etwas sehr ähnliches in meiner App - ein NxN-Gitter mit einem Bild darunter und eine weitere Unteransicht oben, um die "Linien" zu zeichnen, die alle Eigentum eines UIScrollView sind. Ich empfehle eine separate Ansicht, die um die Bilder zu zeichnen, so etwas wie:

-(void) drawRect(CGRect rect) { 
    CGRect smallerRect = CGRectMake(x, y, width, height); 
    [yourImage drawRect: smallerRect]; 
    // repeat as needed to draw the grid 
} 

Ein anderes Plakat erwähnt, dass Sie nicht in der Lage sein werden, Touch-Ereignisse zu erhalten, wenn Sie Ihre Ansicht durch eine UIScrollView- gehört das ist einfach nicht wahr. Ich habe es funktioniert. Sie könnten die folgende obwohl festlegen müssen:

[yourScrollView setUserInteractionEnabled: YES] 
[yourGridView setUserInteractionEnabled: YES] 

Answer 2

Die three20 library hat eine Klasse, die dies tut.

Answer 3

Eine Tabellenansicht bedeutet nicht unbedingt, dass Sie ein Bild pro Zeile anzeigen, wie Sie vorschlagen. Tabellenzellen können angepasst werden, und eine Zellenunterklasse mit sechs 50x50 UIImageViews wäre ziemlich einfach. Es ist vielleicht weniger flexibel als eine Bildlaufansicht, aber wenn sechs Bilder pro Zeile Ihr Ziel sind, dann ist eine Tabellenansicht der schnellste Weg, um es zu bekommen.

Answer 4

three20 schrecklich ist, ive verwendet es, nicht ich es empfehlen ... Anzeige ein Gitter einfach ...

- (void) reloadGridView 
    { 

     scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(5, 54, scrollViewWidth, scrollViewHeight8)]; 
     scrollView.delegate = self; 
     scrollView.showsVerticalScrollIndicator = NO; 
     scrollView.showsVerticalScrollIndicator = NO; 
     scrollView.userInteractionEnabled = YES; 
     scrollView.scrollEnabled = YES; 

     [self.view addSubview:scrollView]; 


     int x = 10; 
     int y = 10; 

     divisor = 1; 

     for (int i = 0; i < [self.photosArray count]; i++) { 

      int buttonTag = divisor; 

      UIImage *thumb = [UIImage imageWithContentsOfFile:[self thumbPathAtIndex:i]]; 
      //********* CREATE A BUTTON HERE ********** 
      //********* use the thumb as its backgroundImage ******* 


      if(divisor%4==0){ 
       y+=70; 
       x = 10; 

      }else{ 
       x += 70; 
      } 

      divisor++; 
     } 
     [scrollView setContentSize:CGSizeMake(scrollViewWidth, ([self.photosArray count]%4 == 0) ? y : y+100)]; 

} 

und wenn Sie möchten, 6 Bilder, wenn in der Gegend - Setup ein BOOL für isLandscape

if (isLandscape) { 
    //change the divisor to change @ 6 instead of 4 
} 

, wenn Sie eine erweiterte Grid müssen überprüfen AQGridView (Google it)