Cómo crear una galería en iOS

Question

Estoy empezando a desarrollar una aplicación simple para iOS, y esta aplicación es una galería simple de una foto (tomada de un sitio web). El primer problema que encontré es cómo crear la vista para la galería.

La vista debe ser algo como esto (o la aplicación de fotos):

sin embargo haciendo una vista de esta manera es problemático, en primer lugar, ya que utiliza la dimensión fija, y creo que es un poco difícil de implementar (para mi).

La otra forma es utilizar una celda personalizado dentro de un tableview, así:

pero sigue utilizando dimensión fija.

¿Cuál es la mejor manera de crear una galería, sin utilizar ninguna lib de tercera parte (como Three20)?

Gracias por cualquier respuesta :)

PS. Creo que usar una dimensión fija es malo debido al nuevo iphone 4 (con una resolución diferente), ¿estoy en lo cierto?

Answer 1

Debe consultar AQGridView, que hace exactamente lo que está tratando de lograr. Incluso si desea escribir su propio código personalizado, eche un vistazo a la fuente AQGridView, ya que es muy probable que necesite utilizar UIScrollView como base.

Answer 2

Si no desea utilizar una biblioteca de terceros, debe hacerlo en las filas de UITableView. Debido a la forma en que UITableView almacena en caché las celdas, su memoria es relativamente liviana. Ciertamente más que una UIView posiblemente muy grande dentro de UIScrollView. Lo hice de las dos maneras, y estaba mucho más feliz con UITableView.

Dicho eso, la próxima vez tengo que hacer esto? Planeo usar AQGridView.

Answer 3

En caso de que desee utilizar clases de terceros, los siguientes tutoriales pueden ser mixtos, funcionó para mí. He aquí una buena vista de cuadrícula:
custom image picker like uiimagepicker

Y si quieres que cargarlos de forma asincrónica, utilice esto: image lazy loading

Ambos tutoriales están muy bien descritas y tienen el código fuente.

Answer 4

La diferencia en la resolución no debería ser un problema ya que iOS, si mal no recuerdo, amplía los componentes de UI e imágenes a la resolución correcta si detecta que tiene una pantalla Retina. Un lado; recuerde comenzar a hacer versiones hi/lo-res de sus gráficos si tiene la intención de admitir ambos tamaños de pantalla sin degradar la calidad.

Siempre que diseñe cosas en términos de puntos en lugar de píxeles (que es la forma en que se hace en XCode 4), iOS podrá manejar la escala de forma transparente. En una pantalla pequeña, un punto será un píxel, mientras que será de dos píxeles en una pantalla retina. Esto le permite renderizar las cosas con una apariencia más nítida en las pantallas retina. Source

Sé que esta pregunta es antigua, pero no vi a nadie abordar la cuestión de los anchos fijos, así que pensé que contribuiría por una vez.

Answer 5

Um, ya iOS6 salió, la manera correcta de hacerlo es con la colección Vistas:

Apple Docs on CollectionViews

También, ver los dos WWDC 2012 sesiones en ellos:

Introduction to Collection Views
Advanced Collection Views

Lamentablemente, Apple no incluyó una galería simple o un diseño de flujo de cobertura, pero es bastante fácil de hacer.

Answer 6

Escribí un tutorial sobre la construcción de una galería multimedia utilizando un UICollectionView. Se rellena desde la biblioteca de fotos del usuario. Creo que funcionará perfectamente para lo que estás tratando de hacer.

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

Espero que ayude. ¡Aclamaciones!

Answer 7

Aquí es una muy buena biblioteca llamada FGallery para iOS

-Compatible con auto-rotación

Ver -thumbnail

-zoom

-delete

Answer 8

hice algo muy similar a esto en un proyecto propio. Yo sólo muestro algunas partes del código aquí, pero si desea ver el código completo que lo pueda ver en GitHub GitHub Repo

Primero hice una colección de células Ver personalizado con un ImageView

en CustomCollectionCell.h

#import <UIKit/UIKit.h> 

@interface CustomCollectionCell : UICollectionViewCell 

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

en 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 

Luego, en la vista en la que desea tener las miniaturas se configura la CollectionView

en ThumbNailViewController.m (fragmento)

UICollectionView *collectionViewThumbnails; 

en ThumbNailViewController.m (fragmento)

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]; 
} 

entonces usted tiene los métodos necesarios para las vistas de recogida. Aquí puede configurar lo que

//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]; 
    } 
} 

Esperemos que responda a su pregunta.