Oi pessoal,

estive lendo um artigo bem legal que diz como customizar a UITableView sem truques. Como está em inglês, resolvi resumir e escrever aqui para os desenvolvedores brasileiros.

Entendendo a UITableView

Abaixo, algumas coisinhas que devem estar claras sobre a UITableView:

• Para configurar o background da UITableView com algo mais rebuscado que não seja simplesmente uma cor, você precisa "setar" o backgroundColor da tabela para [UIColor clearColor] e usar o background da view, que está por trás dela;

• O tableHeaderView (e também tableFooterView e headers e footers das seções) não precisam ser necessariamente texto, ou seja, você pode inserir a sua própria view e ter a liberdade para criar o layout que quiser;

• UITableViewCell é composta por cinco diferentes subviews. Para conseguir o layout que deseja, customizar as subviews de forma correta é o grande segredo:

1. backgroundView — todo o background da linha;
2. selectedBackgroundView — altera o backgroundView quando a linha está selecionada;
3. image — imagem (que pode ser alterada) situada à esquerda da célula;
4. accessoryView — view customizada situada à direita da célula;
5. contentView — view customizada situada entre image e accessoryView.

Como tudo pode ser customizado, a criatividade pode ser aflorada, porém cuidado, pois quanto mais se utilizar imagens ou efeitos como gradiente maior o consumo de memória, o que pode ocasionar problemas de performance.

Exemplo

Neste artigo que li, existe um exemplo de como customizar uma tabela do zero. Segue abaixo:

Configurando a UITableView e o layout do header

- (void)viewDidLoad {
    //
    // Change the properties of the imageView and tableView
    // (these could be set in interface builder instead).
    //
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    tableView.rowHeight = 100;
    tableView.backgroundColor = [UIColor clearColor];
    imageView.image = [UIImage imageNamed:@"gradientBackground.png"];

    //
    // Create a header view. Wrap it in a container to allow us
    // to position it better.
    //
    UIView *containerView =
         [[[UIView alloc]
            initWithFrame:CGRectMake(0, 0, 300, 60)]
        autorelease];
    UILabel *headerLabel =
        [[[UILabel alloc]
            initWithFrame:CGRectMake(10, 20, 300, 40)]
        autorelease];
    headerLabel.text = NSLocalizedString(@"Header for the table", @"");
    headerLabel.textColor = [UIColor whiteColor];
    headerLabel.shadowColor = [UIColor blackColor];
    headerLabel.shadowOffset = CGSizeMake(0, 1);
    headerLabel.font = [UIFont boldSystemFontOfSize:22];
    headerLabel.backgroundColor = [UIColor clearColor];
    [containerView addSubview:headerLabel];
    self.tableView.tableHeaderView = containerView;
}

Background das células

UIImage *rowBackground;
UIImage *selectionBackground;
NSInteger sectionRows = 
                   [aTableView numberOfRowsInSection:[indexPath section]];
NSInteger row = [indexPath row];
if (row == 0 && row == sectionRows - 1) {
    rowBackground = 
                  [UIImage imageNamed:@"topAndBottomRow.png"];
    selectionBackground = 
                  [UIImage imageNamed:@"topAndBottomRowSelected.png"];
}
else if (row == 0) {
    rowBackground = [UIImage imageNamed:@"topRow.png"];
    selectionBackground = 
                  [UIImage imageNamed:@"topRowSelected.png"];
}
else if (row == sectionRows - 1) {
    rowBackground = [UIImage imageNamed:@"bottomRow.png"];
    selectionBackground = 
                  [UIImage imageNamed:@"bottomRowSelected.png"];
}
else {
    rowBackground = [UIImage imageNamed:@"middleRow.png"];
    selectionBackground = 
                  [UIImage imageNamed:@"middleRowSelected.png"];
}
cell.backgroundView =
    [[[UIImageView alloc] initWithImage:rowBackground] autorelease];
cell.selectedBackgroundView =
    [[[UIImageView alloc] initWithImage:selectionBackground] autorelease];

Layout dentro do contentView

const CGFloat LABEL_HEIGHT = 20;
UIImage *image = [UIImage imageNamed:@"imageA.png"];

//
// Create the label for the top row of text
//
topLabel =
    [[[UILabel alloc]
        initWithFrame:
            CGRectMake(
                image.size.width + 2.0 * cell.indentationWidth,
                0.5 * (aTableView.rowHeight - 2 * LABEL_HEIGHT),
                aTableView.bounds.size.width -
                    image.size.width - 4.0 * cell.indentationWidth
                        - indicatorImage.size.width,
                LABEL_HEIGHT)]
    autorelease];
[cell.contentView addSubview:topLabel];

//
// Configure the properties for the text that are the same on every row
//
topLabel.tag = TOP_LABEL_TAG;
topLabel.backgroundColor = [UIColor clearColor];
topLabel.textColor = 
           [UIColor colorWithRed:0.25 green:0.0 blue:0.0 alpha:1.0];
topLabel.highlightedTextColor = 
           [UIColor colorWithRed:1.0 green:1.0 blue:0.9 alpha:1.0];
topLabel.font = [UIFont systemFontOfSize:[UIFont labelFontSize]];

Resultado e Considerações finais

Com o código acima, veja, abaixo, o resultado final. O código do exemplo está disponível no site do artigo.

Ficou de boca aberta quando viu o resultado? Também fiquei, ainda mais porque a gente se sente meio preso com os layouts já existentes. Sabemos que as tabelas são os componentes mais usados em aplicações para iPhone e poder customizá-las do jeito que a gente quer (e o principal: não utilizando bacalhau) é muito bom.

Aproveitem para deixar as suas apps cada vez mais legais, mas não esquecendo de se preocupar com a performance!

Até :)

Sinopse! Bugs resolvidos! Conheça as novidades.

Funcionalidade de Sinopse!!

Como dissemos no nosso artigo em que anunciamos o Cine Mobits para iPhone, estamos começando a trazer as novas funcionalidades para o Cine Mobits da plataforma Java ME. A primeira implementada foi a sinopse. Agora finalmente é possível ver a sinopse dos filmes no seu celular, como mostra o vídeo abaixo:

Cine Mobits em Java com Sinopse from Rafael Quintana on Vimeo

Diferentemente da versão do iPhone que requer a aprovação da Apple para poder ser baixada gratuitamente da App Store (que no nosso caso está demoraaando), a versão em Java já está disponível para download na seção Projetos do nosso site.

Correção de Bugs

Recentemente, recebemos emails de pessoas que estavam encontrando problemas para a utilização do Cine Mobits em aparelhos da LG, como o LG KE990 Viewty. Graças aos feedbacks dos usuários Saulo dos Santos e Marcelo Emery, conseguimos detectar o problema e testar o Cine Mobits nos dispositívos da linha LG. Agora ele já está funcionando para esses aparelhos! \o/

Também recebemos emails de usuários com dificuldades para utilizar o Cine Mobits em aparelhos com o sistema operacional Windows Mobile. Nesse caso, recomendamos a instalação da máquina virtual Midlet Manager, já que esta é mais confiável do que as que vem com a maioria dos aparelhos.

Leia também:

1. Cine Mobits para iPhone - em breve na App Store
2. CineMobits 0.4 lançado!

Para aqueles que ainda não conhecem, o Skype é um programa para chamadas de voz e vídeo ao vivo através da Internet (VoIP). Os custos das chamadas existem somente em ligações para outros celulares, no caso de chamadas de Skype a Skype não há custo da ligação. Ele pode ser usado tanto no computador quanto nos celulares. E recentemente, para aqueles que ainda não sabem, também está disponível para iPhone. Só para se ter uma ideia, desde o seu lançamento na App Store, o software já atingiu mais de 1 milhão de downloads em menos de 48h!

Mas por que estou falando disso? Bom, o produto/serviço por trás do Skype traz consigo um modelo de telefonia mais barato, o que o torna um feroz concorrente para as operadoras. E para não perder mercado, algumas delas já começaram a adotar suas medidas. Prova disso é que, recentemente, a operadora T-Mobile na Alemanha bloqueou o uso de Skype nos iPhones comercializados por ela, em sua rede, dando o argumento de que o tráfego gerado pelo Skype pode comprometer as conexões de outros usuários, além de que o aplicativo ainda não funciona perfeitamente, o que faria com que os usuários colocassem a culpa na operadora pela má qualidade do serviço.

Para a Comissão Européia, as operadoras não podem usar seu poder de mercado para barrar inovações tecnológicas, em detrimento dos usuários. Uma regulamentação será discutida para que as operadoras européias mudem seus contratos. E além disso, no iPhone, o bloqueio a essa função ficaria a cargo da operadora, de acordo com a permissão de cada país.

Esse só foi um dos primeiros casos, o que mostra o indício de que fortes emoções já estão vindo por aí, onde quem ganhará no final seremos nós - os consumidores.

bjs

Caros,

depois de muita programação, e um bocado de burocracia da Apple, conseguimos terminar o Cine Mobits versão 1.0 para o iPhone. O aplicativo é uma solução que já existia para celulares com Java desde o meio do ano passado, e que serve para consultar a programação dos cinemas em diversas cidades do Brasil em tempo real. Esta versão para o iPhone vem com várias novas funcionalidades, dentre elas:

• Sinopse dos filmes
• Salvando os cinemas no celular, evitando conexões extras
• Salvar novas localizações baseadas no GPS
• Trailer do filme

O legal disso é que muitas dessas novas funcionalidades poderão ser aproveitadas em versões futuras do atual Cine Mobits em Java. Uma delas, a campeã de pedidos, é a sinopse dos filmes. Outro ponto levantado é a questão de salvar os cinemas, e que também estamos estudando uma maneira de implementar isso na versão Java.

Quanto à versão para iPhone, estamos agora no aguardo da aprovação da Apple. Tivemos alguns percalços até conseguir enviar o aplicativo, mas isso será tema para outro post. Por hora, fique com os screenshots do programa. Aguarde e confira!

Leia também:

1. Cine Mobits: mais de 1500 downloads
2. Cine Mobits 0.4 lançado!