2010-10-05 8 views
30

Ich fange an, eine einfache Anwendung für iOS zu entwickeln, und diese Anwendung ist eine einfache Galerie von einigen Fotos (von einer Website). Das erste Problem, dem ich begegnet bin, ist, wie man die Ansicht für die Galerie erstellt.Wie man eine Galerie auf iOS

Der Blick etwas wie dies sollte (oder das Foto-App) sein: Sample View

jedoch einen Blick auf diese Weise problematisch ist dabei, erstens, weil es feste Dimension verwendet, und ich denke, ist ein bisschen schwierig zu implementieren (für mich).

Der andere Weg ist eine benutzerdefinierte Zelle innerhalb eines Tableview zu verwenden, wie folgt aus: custom cell

aber es ist nach wie vor fester Dimension verwenden.

Was ist der beste Weg, um eine Galerie zu erstellen, ohne eine dritte Teilbibliothek (wie Three20) zu verwenden?

Danke für jede Antwort :)

PS. Ich denke, dass die Verwendung von festen Abmessungen ist schlecht wegen der neuen iphone 4 (mit einer anderen Auflösung), habe ich recht?

Antwort

36

Sie sollten AQGridView überprüfen, die genau das tut, was Sie erreichen möchten. Auch wenn Sie Ihren eigenen benutzerdefinierten Code schreiben möchten, werfen Sie einen Blick auf die AQGridView-Quelle, da es sehr wahrscheinlich ist, dass Sie ein UIScrollView als Basis verwenden müssen.

2

Wenn Sie keine Bibliothek eines Drittanbieters verwenden möchten, sollten Sie dies in UITableView-Zeilen tun. Aufgrund der Art, wie UITableView Zellen zwischenspeichert, ist es im Speicher relativ leicht. Sicherlich mehr als eine möglicherweise sehr große UIView in einem UIScrollView. Ich habe es in beide Richtungen gemacht, und ich war viel glücklicher mit dem UITableView.

Das sagte, nächstes Mal muss ich das tun? Ich plane, AQGridView zu verwenden.

8

Für den Fall, dass Sie Klassen von Drittanbietern verwenden möchten, können die nächsten Tutorials gemischt werden, sie funktionierten für mich. Hier ist eine gute Startansicht:
custom image picker like uiimagepicker

Und wenn du sie asynchron geladen werden soll, verwenden Sie diese: image lazy loading

Beide Tutorials sehr gut beschrieben sind, und den Quellcode haben.

6

Der Unterschied in der Auflösung sollte kein Problem sein, da iOS, wenn ich mich richtig erinnere, UI-Komponenten und Bilder auf die richtige Auflösung skaliert, wenn es eine Retina-Anzeige erkennt. Ein beiseite; Denken Sie daran, Hi/Lo-Res-Versionen Ihrer Grafiken zu erstellen, wenn Sie beide Bildschirmgrößen ohne Qualitätseinbußen unterstützen möchten.

Solange Sie Dinge in Punkten statt in Pixeln entwerfen (so wie es in XCode 4 gemacht wird), kann iOS die Skalierung für Sie transparent handhaben. Auf einem kleinen Bildschirm wird ein Punkt ein Pixel sein, während es auf einem Retina-Display zwei Pixel sein wird. Dies ermöglicht es, Dinge auf Retina-Displays mit einem schärferen Aussehen zu machen. Source

Ich weiß, dass diese Frage alt ist, aber ich sah niemanden, der das Problem der festen Breiten ansprach, also dachte ich, dass ich für einmal beitragen würde.

2

Um, da iOS6 herauskam, ist der richtige Weg, dies zu tun ist mit Sammlung Ansichten:

Apple Docs on CollectionViews

Auch die beiden WWDC 2012 Sitzungen auf ihnen sehen:

Introduction to Collection Views
Advanced Collection Views

Leider enthielt Apple keine einfache Galerie oder Coverflow-Layout, aber es ist ziemlich einfach, eins zu machen.

+0

Ich werde das überprüfen. Funktioniert es unter iOS 5? – patrick

+2

nur Nr. 6, aber zumindest sollten Sie in diese Richtung zeigen. – Rob

+0

irgendwelche Zeiger für ein Galerie-Layout mit UICollectionViews? –

2

Ich schrieb ein Tutorial zum Erstellen einer Mediengalerie mit einem UICollectionView. Es füllt sich aus der Fotobibliothek des Benutzers. Ich denke, es wird perfekt funktionieren für das, was Sie versuchen zu tun.

iPhone Programming Tutorial: Creating An Image Gallery Like Over – Part 1

Hoffnung, das hilft. Prost!

+0

Danke.Obwohl diese Frage vor zwei Jahren tatsächlich gestellt wurde, könnte Ihr Beitrag immer noch nützlich sein. Übrigens ist es besser, hier die vollständige Lösung zu posten. – patrick

1

Hier ist eine sehr gute Bibliothek FGallery für iOS

-Unterstützt Autorotation

-thumbnail Ansicht

-zoom

-delete

2

ich etwas sehr tat genannt ähnlich zu diesem in einem eigenen Projekt. Ich zeige nur einige Teile des Codes hier, aber wenn Sie den vollständigen Code sehen möchten, können Sie es auf GitHub sehen GitHub Repo

Zuerst habe ich eine benutzerdefinierte Sammlung Ansicht Zelle mit einem Image

in CustomCollectionCell.h

#import <UIKit/UIKit.h> 

@interface CustomCollectionCell : UICollectionViewCell 

@property (nonatomic , retain) UIImageView *imageView; 
@end 

in CustomCollectionCell.m

#import "CustomCollectionCell.h" 

@implementation CustomCollectionCell 
- (id)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 
     [self setupImageView]; 
    } 
    return self; 
} 

#pragma mark - Create Subviews 

- (void)setupImageView { 
    self.imageView = [[UIImageView alloc] initWithFrame:self.bounds]; 
    self.imageView.autoresizingMask = UIViewAutoresizingNone;//UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 
    [self addSubview:self.imageView]; 
} 

@end 

dann in der Ansicht, wo Sie die Thumbnails haben möchten, setzen Sie das Collection bis

in ThumbNailViewController.m (Snippet)

UICollectionView *collectionViewThumbnails; 

in ThumbNailViewController.m (Snippet)

UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init]; 
collectionViewThumbnails=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 50) collectionViewLayout:layout]; 
if (collectionViewThumbnails && layout) 
{ 
    [collectionViewThumbnails setDataSource:self]; 
    [collectionViewThumbnails setDelegate:self]; 
    [collectionViewThumbnails registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:@"cellIdentifier"]; 
    [collectionViewThumbnails setBackgroundColor:[UIColor blackColor]]; 

    [self.view addSubview:collectionViewThumbnails]; 
} 

Dann haben Sie die erforderlichen Methoden für die Sammlung Ansichten. Hier können Sie einrichten, was Sie

//Number of items in the collectionview 
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 
{ 
    return [galleryData count]; 
} 

//Set up what each cell in the collectionview will look like 
//Here is where you add the thumbnails and the on define what happens when the cell is clicked 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    //initialize custom cell for the collectionview 
    CustomCollectionCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath]; 

    [cell.imageView setClipsToBounds:YES]; 

    cell.imageView.contentMode = UIViewContentModeScaleAspectFill; 

    //format url to load image from 
    NSString *url = [NSString stringWithFormat:@"http://andrecphoto.weebly.com/uploads/6/5/5/1/6551078/%@",galleryData[indexPath.item]]; 

    //load thumbnail 
    [cell.imageView setImageWithURL:[NSURL URLWithString:url] 
        placeholderImage:[UIImage imageNamed:@"placeholder.png"]]; 

    //Sets up taprecognizer for each cell. (onlcick) 
    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)]; 
    [cell addGestureRecognizer:tap]; 

    //sets cell's background color to black 
    cell.backgroundColor=[UIColor blackColor]; 
    return cell; 
} 

//Sets size of cells in the collectionview 
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    return CGSizeMake(100, 100); 
} 

//Sets what happens when a cell in the collectionview is selected (onlclicklistener) 
- (void)handleTap:(UITapGestureRecognizer *)recognizer { 
    //gets the cell thats was clicked 
    CustomCollectionCell *cell_test = (CustomCollectionCell *)recognizer.view; 

    //gets indexpath of the cell 
    NSIndexPath *indexPath = [collectionViewThumbnails indexPathForCell:cell_test]; 

    if (isConnectedGal) 
    { 
     //sets the image that will be displayed in the photo browser 
     [photoGallery setInitialPageIndex:indexPath.row]; 

     //pushed photobrowser 
     [self.navigationController pushViewController:photoGallery animated:YES]; 
    } 
} 

Hoffentlich beantwortet das Ihre Frage.

Verwandte Themen