Como você poderia implementar uma grade de rolagem em seu aplicativo iPhone?

Question

Eu tenho cerca de 50 imagens de tamanho 50 x 50 pixels cada. Eu quero o usuário para escolher um deles. Então, primeiro eu pensei em um UITableView, mas isso não é apenas a coisa certa. Ele desperdiça muito espaço na tela. Em vez de colocar todas as imagens um abaixo do outro, seria melhor para mostrar uma grade de digamos 6 colunas e n linhas.

Gostaria de usar um UIScrollView e encha-o com objetos UIView que eu automaticamente organizar para que eles apareçam como uma grade. Aquele é o caminho para ir? Ou alguma outra sugestão?

Answer 1

Estou fazendo algo muito semelhante na minha app- uma grade NxN com um baixo imagem, e outro subexibição em cima para desenhar as "linhas", todos de propriedade de um UIScrollView. Eu recomendo ter uma visão separada para desenhar as imagens, algo como:

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

Outro cartaz mencionou que você não será capaz de obter eventos de toque se o seu ponto de vista é de propriedade de um UIScrollView- isso simplesmente não é verdade. Eu tenho que trabalhar. Talvez seja necessário definir as seguintes entanto:

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

Answer 2

O three20 biblioteca tem uma classe que faz isso.

Answer 3

A exibição de tabela não implica necessariamente mostrando uma imagem por linha, como você sugere. células da tabela pode ser personalizado, e uma subclasse de células com seis 50x50 UIImageViews seria muito simples. É talvez menos flexível do que uma exibição de rolagem, mas se seis imagens por fileira é o seu objetivo, em seguida, uma exibição de tabela é a maneira mais rápida para obtê-lo.

Answer 4

three20 é horrível, ive usou, eu não recomendo ... exibindo uma grade é 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)];

}

e se você quiser 6 imagens quando na paisagem - instalação de um BOOL para IsLandscape

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

Se você precisa de um cheque gridView mais avançado fora AQGridView (Google-lo)