UITableView com imagens do cabeçalho da seção lateral

Question

O aplicativo de música no iPad tem muitos recursos interessantes de interface do usuário personalizado, um dos quais é a exibição da tabela exibida ao olhar para o Álbuns de um determinado artista.

Possui imagens ao longo de cada seção, quase atuando de maneira muito semelhante às vistas do cabeçalho da seção. Se eu rolar para baixo, a imagem superior permanecerá lá até que a próxima imagem apareça para esbarrar e vice -versa.

Inicialmente, parece impossível sem reimplementar o UitableView de novo, mas acho que é semi-dado, simplesmente subclassificando uma View Uitable para desenhar essas imagens de seção ao lado, fora do UitableView, sempre que chama layoutSubviews (ou seja, sempre que rola). Há pequenos problemas com isso: porque ele desenha fora do UitableView, qualquer automobilização provavelmente desligará todo o layout. E eu realmente não tenho certeza da viabilidade de tudo.

Alguma ideia?

---

EDIT: Acabei de perceber que minha primeira idéia não funcionaria, pois nenhum toque no lado das imagens não seria rastreado pela TableView, para que você não pudesse rolar se tocasse lá. Eu acho que o maior problema aqui é descobrir como propagar os toques para que os toques sejam rastreados em toda a visão.

Answer 1

Depois de pensar nisso aleatoriamente no meio da noite, finalmente descobri uma solução real.

Incorporar o UAableView em um UIScrollView e, quando o usuário rola a visualização, os toques passam pelo pai ScrollView, e não pelo próprio tabela. Praticamente tudo o que você precisa fazer está no método LayoutSubViews; Como o LayoutSubViewS da ScrollView é chamado sempre que o usuário rola a visualização, basta alterar o quadro do TableView para permanecer fixo na tela e altere o conteúdo do TableView para corresponder ao do ScrollView.

Código de exemplo:

- (void) layoutSubviews{
    tableView.frame = CGRectMake(self.contentOffset.x, self.contentOffset.y, tableView.frame.size.width, tableView.frame.size.height);
    tableView.contentOffset = self.contentOffset;   
}

Neste ponto, você pode ajustar a tabela de tabela para um lado e fazer o que quiser do outro.

Answer 2

Você pode verificar em que seção você está no tabela de tabela (ou no topo etc.) de alguma forma, então simplesmente tenha um UIView que é atualizado sempre que a seção muda, minha ideia é um pouco difícil de explicar, mas não teria a ver com Refazer o UabableView, apenas tenha outra visão ao lado da exibição da tabela para fazer as imagens em vez de tentar incorporar essa funcionalidade.

Outra maneira de fazer isso, talvez seja um pouco mais complicado, mas você pode tentar recuar suas células para que elas não comecem à esquerda da visualização da tabela, tornem a TableView muito ampla e tenha uma visão personalizada no cabeçalho da seção que contém isso imagem à sua esquerda e espero que faria corretamente? Boa pergunta e uma divertida para brincar.

Answer 3

Ok, eu fiz algo semelhante ao que o aplicativo de música e a pesquisa do Spotlight fazem.

Eu não subclassei o UitableView, acabei de rastrear as seções através do método ScrollViewDidScroll e adicionei as visualizações do cabeçalho à esquerda da TableView (para que você precise colocar a TableView à direita na visão do ViewController, o que significa que você pode ' t Use UabableViewController).

Este método deve ser chamado no scrollViewDidScroll, ViewDidload e em DidrotateFromInterfaceRientation: (se você suportar a rotação)

Lembre -se de que você terá que abrir espaço à esquerda igual ao tamanho dos cabeçalhos em qualquer orientação da interface que você suporta.

-(void)updateHeadersLocation
{
for (int sectionNumber = 0; sectionNumber != [self numberOfSectionsInTableView:self.tableView]; sectionNumber++)
{
    // get the rect of the section from the tableview, and convert it to it's superview's coordinates
    CGRect rect = [self.tableView convertRect:[self.tableView rectForSection:sectionNumber] toView:[self.tableView superview]];

    // get the intersection between the section's rect and the view's rect, this will help in knowing what portion of the section is showing
    CGRect intersection = CGRectIntersection(rect, self.tableView.frame);

    CGRect viewFrame = CGRectZero; // we will start off with zero

    viewFrame.size = [self headerSize]; // let's set the size

    viewFrame.origin.x = [self headerXOrigin];

    /*

     three cases:

     1. the section's origin is still showing -> header view will follow the origin
     2. the section's origin isn't showing but some part of the section still shows -> header view will stick to the top
     3. the part of the section that's showing is not sufficient for the view's height -> will move the header view up

     */

    if (rect.origin.y >= self.tableView.frame.origin.y)
    {
        // case 1
        viewFrame.origin.y = rect.origin.y;
    }
    else
    {
        if (intersection.size.height >= viewFrame.size.height)
        {
            // case 2
            viewFrame.origin.y = self.tableView.frame.origin.y;
        }
        else
        {
            // case 3
            viewFrame.origin.y = self.tableView.frame.origin.y + intersection.size.height - viewFrame.size.height;
        }
    }

    UIView* view = [self.headerViewsDictionary objectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];

    // check if the header view is needed
    if (intersection.size.height == 0)
    {
        // not needed, remove it
        if (view)
        {
            [view removeFromSuperview];
            [self.headerViewsDictionary removeObjectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];
            view = nil;
        }
    }
    else if(!view)
    {
        // needed, but not available, create it and add it as a subview

        view = [self headerViewForSection:sectionNumber];

        if (!self.headerViewsDictionary && view)
            self.headerViewsDictionary = [NSMutableDictionary dictionary];

        if (view)
        {
            [self.headerViewsDictionary setValue:view forKey:[NSString stringWithFormat:@"%i", sectionNumber]];

            [self.view addSubview:view];
        }
    }


    [view setFrame:viewFrame];
}
}

Também precisamos declarar uma propriedade que manteria as visualizações visíveis:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

Esses métodos retornam o tamanho e o deslocamento do eixo x das visualizações do cabeçalho:

-(CGSize)headerSize
{
return CGSizeMake(44.0f, 44.0f);
}

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

Eu construí o código para que qualquer visualização do cabeçalho que não seja necessária seja removida; portanto, precisamos de um método que retorne a visualização sempre que necessário:

-(UIView*)headerViewForSection:(NSInteger)index
{
UIImageView* view = [[UIImageView alloc] init];

if (index % 2)
{
    [view setImage:[UIImage imageNamed:@"call"]];
}
else
{
    [view setImage:[UIImage imageNamed:@"mail"]];
}

return view;
}

Veja como ficará:

Como ficará em Lanscape, eu usei as contrates para dar 44px à esquerda da tabela de tabela

espero que isto ajude :).