¿Cómo implementarías una cuadrícula desplazable en tu aplicación de iPhone?

Question

Tengo alrededor de 50 imágenes de 50 x 50 píxeles de tamaño cada una. Quiero que el usuario elija uno de ellos. Así que primero pensé en un UITableView, pero eso no es lo correcto. Se desperdicia mucho espacio en la pantalla. En lugar de poner todas las imágenes una debajo de la otra, sería mejor mostrar una cuadrícula de, digamos, 6 columnas y n filas.

Usaría un UIScrollView y lo llenaría con los objetos UIView que organizo automáticamente para que aparezcan como una cuadrícula. ¿Es ese el camino a seguir? ¿O alguna otra sugerencia?

Answer 1

Estoy haciendo algo muy similar en mi aplicación: una cuadrícula de NxN con una imagen debajo y otra subvista en la parte superior para dibujar las "líneas", todas propiedad de un UIScrollView. Recomiendo tener una vista separada para dibujar las imágenes, algo como:

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

Otro póster mencionó que no podrá obtener eventos táctiles si su vista es propiedad de un UIScrollView; esto simplemente no es cierto. Lo tengo funcionando. Es posible que tengas que configurar lo siguiente:

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

Answer 2

La biblioteca three20 tiene una clase que hace esto.

Answer 3

Una vista de tabla no implica necesariamente mostrar una imagen por fila, como sugieres. Las celdas de la tabla se pueden personalizar, y una subclase de celda con seis UIImageViews de 50x50 sería bastante simple. Tal vez sea menos flexible que una vista de desplazamiento, pero si su objetivo es seis imágenes por fila, una vista de tabla es la forma más rápida de obtenerla.

Answer 4

three20 es horrible, lo he usado, no lo recomiendo ... mostrar una cuadrícula es fácil ...

    - (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)];

}

y si desea 6 imágenes cuando está en horizontal: configure un BOOL para isLandscape

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

si necesita un gridView más avanzado, consulte AQGridView (Google it)