Criando uma lista customizada

Você viu no tutorial anterior como criar uma lista simples. Muitas vezes uma lista simples não atende nossa necessidade, pois queremos mostrar mais dados para um usuário do que simplesmente um texto em uma linha. Muitas listas contemplam mais informações por linha (ou célula) como mostra a imagem abaixo:

Lista Customizada
Lista Customizada

Nesta lista consta um ícone que representa a condição do tempo, tem-se também o nome da cidade, um texto com a condição do tempo descrita e a temperatura atual. Para lidar com este tipo de situação, onde queremos mostrar mais informações em uma lista, usamos as listas customizadas.

A ideia principal de uma lista customizada é que se tenha o layout que represente uma célula (ou linha), e este mesmo se aplicará a todas as outras. Observe a imagem abaixo, a célula destacada em vermelho, representa como faríamos um layout da célula.

Representação de uma célula customizada
Representação de uma célula customizada

 

Primeiro passo: Construção da custom view (célula customizada)

A primeira coisa a fazer é construir um layout que represente cada linha de nossa lista. No exemplo criado para este tutorial, pensei num app que mostrasse uma lista dos produtos que você possui na geladeira, pra que quando você vá ao supermercado saiba o que está faltando.

Começamos então construindo o layout de nossa custom view. Para facilitar o entendimento foi criado este mock-up que representa como ficará nossa custom view.

Mock-up da lista customizada
Mock-up da lista customizada

Este mock-up serve meramente para termos uma base, ele não precisa neste momento estar perfeito, até porque a ideia aqui é o aprendizado. Colocando este mock-up num layout xml:

Segundo passo: Construção da lista que receberá cada linha

Este layout representa cada célula ou linha de nossa lista, agora precisa-se de um layout que receberá a lista. Quando se utiliza uma lista customizada se faz necessário este tipo de prática: dois layouts.

 

Terceiro passo: Construção do Adapter

Como foi visto no post anterior, o Adapter é como uma ponte entre a AdapterView (ListView, GridView) e o dado que estará naquela View, como mostra a figura abaixo:

Definição de Adapter
Definição de Adapter

Existem alguns tipos de adapter, para demonstrar esta utilização de lista customizada será utilizado o BaseAdapter, que é uma implementação de Adapter. O BaseAdapter exige a sobreescrita de 4 métodos:

getCount() – Indica quantos itens ou linhas (rows) que serão apresentados na AdapterView

getItem(int position) – Retorna o dado referente aquele item (linha) da AdapterView, o qual é passado como parâmetro no construtor da classe.

getItemId(int position) – Retorna o id referente ao dado, referente ao item (linha) da AdapterView

getView(int position, View convertView, ViewGroup parent) – Este método cria a view, baseado no dado fornecido e na posição.

Vamos agora ver a implementação de cada método, para que fique mais claro estes conceitos. Crie então uma classe que extenda de BaseAdapter.

No construtor foi passado todos itens que trabalharemos em nossa custom view. Perceba que a imagem é uma lista do tipo Integer, isto porque as imagens são inteiros, e os textos são uma lista de Strings.

ViewHolder

Ao criar uma lista, cada linha (row) é criada no momento em que é mostrada ao usuário. Para evitar problemas com processamento do aparelho, já que cada linha é instanciada dinamicamente, utiliza-se o que chamamos de ViewHolder. O ViewHolder só instancia novos dados, se os mesmos já não estiverem instanciados. Deixando o scroll da lista mais suave, não gerado impacto ao usuário na hora de visualizar a lista.

Agora vamos sobreescrever os métodos que citei acima, que na verdade, são obrigatórios serem implementados.

O último método, getView() deixei por último para que falássemos um pouco mais sobre ele.

A primeira coisa a fazer é utilizar o LayoutInflater para obter o inflater.

Depois disso será criada a nossa View customizada, onde realmente o layout é inflado com o layout que criamos para cada linha. Em outras palavras, quando inflamos estamos na verdade transformando um layout xml em uma View.

Ao mesmo tempo também criamos uma instância da nossa classe ViewHolder,  a qual terá os elementos da View customizada.

Agora você precisa dizer ao Viewholder quais elementos correspondem a cada item que serão instanciados. Usamos o método findViewById(). Veja abaixo:

Nesta caso estamos dizendo que, cada elemento do Viewholder possui um correspondente no xml que criamos. Após isto, utiliza-se um método chamado setTag , que recebe um objeto, para armazenar o Viewholder. Quando utiliza-se este método, é como se estivéssemos atribuindo o objeto a uma tag ou uma chave.

Caso a View não esteja nula, ou seja, já tenha sido criada anteriormente, simplesmente chamamos a tag, através do método getTag()

Após feito isto, agora pode-se setar imagens e textos nas Views do Viewholder.

E este método exige que retornemos uma View, que após termos encontrado as views e setados os seus valores, podemos retorná-la.

Agora voltando à activity, precisamos dos itens que farão parte da lista. Somente para efeitos de demonstração, criei as listas na própria activity para facilitar o entendimento.

Primeira coisa a fazer é criar um objeto do tipo ListView e encontrar o id que corresponde a lista, este lista está dentro do layout activity_main.xml, citado anteriormente neste post.

Cria-se então o adapter, que recebe 4 parâmetros: o contexto, lista dos icones, lista da descrição e lista dos itens restantes. Veja:

E agora setamos o adapter, ou seja, dizemos que esta lista receberá em cada uma de suas linhas o adapter criado.

Veja como ficou a MainActivity completa:

E aí está, uma lista customizada. Um dos itens mais utilizados hoje em Android, apresentação dos dados em forma de lista.

Captura de tela: Lista customizada
Captura de tela: Lista customizada

Bom, agora fica mais fácil fazer uma lista conforme a necessidade dos clientes. Veja, a princípio pode parecer mais complicado, mas em termos de manutenção de código, e até mesmo de mudanças repentinas no projeto, este tipo de implementação se torna muito útil. Assim, caso o cliente mudasse ou adicionasse itens afetaria somente o layout row.xml e o adapter. Além de tudo fica um código limpo e fácil de ser entendido.

O link deste projeto encontra-se no meu github: https://github.com/paulacr/ListaCustomizada

Até o próximo.

Anúncios

MyFirstApp – Seu primeiro aplicativo

Olá pessoas, voltando então a postar no blog, hoje vou ensinar como criar um aplicativo. Para não confundir muito a cabeça, vamos começar bem simples, fazendo uma aplicação com um texto e um botão, e vamos fazer com que o botão mude o conteúdo do texto. Entendendo bem os princípios básicos de cada elemento fica fácil depois fazer qualquer projeto.

Bom primeira coisa é criar um projeto. Não vale a pena aqui toda vez ensinar como cria um projeto, mas dá uma olhada aí no blog que tem um post falando sobre isso: https://paulacr.net/2014/11/19/criando-uma-simples-aplicacao-android/

Depois que você criou uma aplicação vamos começar com o layout, para preparar nossa aplicação. Primeira coisa a fazer é abrir o arquivo de layout. Geralmente quando você cria um projeto o próprio android studio já cria uma classe MainActivity.java e um layout activity_main.xml. O layout estará contido dentro da pasta res/layout. A pasta res é a pasta onde contém os recursos usados pela aplicação como imagens, textos, dimensões, etc. Observem a figura abaixo:

Criando layout e adicionando um botão
Criando layout e adicionando um botão

O item 1 mostra onde está alocado o layout criado, caso você queira criar um novo é só clicar no package layout com botão direito e criar um novo. O item 2 mostra um “Button”. Que é o elemento que iremos adicionar, como o android já faz um layout com um Texto basta somente adicionarmos um botão para fazer nosso app. Percebam o seguinte, existem duas formas de criar este arquivo de layout, uma delas é arrastando os itens desta paleta, outra forma é construir layout via código xml, como mostra a figura abaixo.

Construindo layout via código xml
Construindo layout via código xml

Com a prática acaba ficando mais fácil fazer via código mesmo, mas inicialmente comecei arrastando, aí é mais uma questão de escolha mesmo. Perceba no rodapé da figura destacado em vermelho duas abas “Design” e “Text”, é nesta aba que é possível trocar de modo de layout, ou seja, modo design é arrastando os elementos gráficos e modo text para digitar em código xml. O Android Studio também possui uma grande vantagem que é de mostrar em tempo real tudo que você vem fazendo no layout, então assim que você adiciona um item, ou insere algum atributo para este item, ele já mostra no celular posicionado ao lado do código. Você também pode já escolher um celular que seja mais próximo de seu objetivo com a aplicação. Existem diversos modelos disponíveis.

Insira um botão nesta tela, contendo os atributos mostrados na figura abaixo:

Adicionando um botão ao layout
Adicionando um botão ao layout

Assim então ficará o layout e os atributos de cada elemento. Percebam que além dos atributos que já estavam gerados pela IDE pelo fato de ja ter layout pronto, foram adicionado o id. Vou explicar um pouco cada atributo. O android exige que você determine sempre a altura e comprimento do elemento, nem que seja 0dp, é preciso ser informada. O atributo width por exemplo possui o valor “wrap_content”, que significa dizer que o tamanho do meu botão depende da quantidade de texto que ele tiver. Já se o valor for match_parent significa que a dimensão assumirá a mesma dimensão do layout pai.

O id é necessário para que possamos identificar estes elementos gráficos na nossa classe java, e assim fazer com que o texto mude seu conteúdo após pressionarmos o botão.

Então agora vamos a parte legal: vamos trabalhar em nossa classe java para vermos funcionando. Abra a classe java onde iremos implementar a lógica do nosso código, como mostra a figura abaixo:

Criando a lógica na classe java
Criando a lógica na classe java

Dentro da pasta java, temos o package do app, neste caso temos um só package, mas em projetos normalmente temos vários. E ali temos nossa classe: MainActivity.java, abra esta classe, e vamos a alguns detalhes aqui.

Esta classe é herdada da classe ActionBarActivity que nos mostra que ela é uma activity, ou seja, uma activity representa uma tela (em raríssimos casos não será uma tela). E para ser uma tela eu preciso informar pra ela qual arquivo de layout representa a tela, por isso, no Android é separado entre layout e lógica do app. Existe a possibilidade de criar cada elemento visual do layout em tempo de execução, porém, até mesmo o Google recomenda o uso de layouts em formato xml.

Sublinhei em vermelho uma linha de comando super importante, setContentView(R.layout.activity_main), usando este comando chamamos o nosso layout. Todo elemento gráfico e layout criado possui um correspondente dentro da classe R, caso eu altere, o android gera novamente na classe R. É uma classe onde não devemos mexer, mas toda vez que precisarmos localizar qualquer elemento faremos por ela.

Bom, agora se você tentar rodar a aplicação, ela irá realmente rodar e aparecerá o nosso layout, claro que por enquanto nenhum botão e texto possui nenhuma ação.

Faça isso, plugue seu aparelho na porta usb, e dê o play, caso não possua um aparelho android, siga esta documentação do Google para configurar um. (https://developer.android.com/tools/devices/managing-avds.html).

Rodando a aplicação pela primeira vez
Rodando a aplicação pela primeira vez

OK, agora vamos implementar a lógica que possibilitará pressionarmos o botão e mudar o texto. Volta lá para sua classe java MainActivity.java, e vamos continuar.

Primeira coisa vamos “encontrar” os elementos na classe java, lembra daquele Id que falei anteriormente, no layout xml, então agora ele será muito útil. Para fazer isto, você precisa dar um nome a sua view (todos os elementos gráficos acabam sendo uma view), e encontrar o id. Por exemplo:

Button meuBotao = (Button) findViewById(R.id.botao)

Fazemos isso para os dois elementos: botão e texto (textview), como mostra a figura abaixo:

Encontrando cada elemento gráfico
Encontrando cada elemento gráfico

É necessário fazer um “cast” porque como estes elementos são views, preciso encontrar dentro da classe view o elemento específico que desejo. Agora estou dizendo especificamente quero o botão e texto que estão no layout.

Agora também vamos gerar o evento de pressionar o botão. É necessário implementar a interface de clickListener, pode ser feito direto no código. Mais pra frente mostrarei de outra forma, mas agora vamos pelo mais fácil de entender:

Setando um texto a partir do evento de click do botão
Setando um texto a partir do evento de click do botão

Criamos então um evento para o click do botão. Perceba que, quando o botão for clicado o que estiver dentro do método onClick será executado. Aí vai da necessidade da aplicação, pode ser um edittext, botão, loading, enfim, usem a criatividade. Executa o app aí que você vai ver o que acontece quando clicar no botão.

Rodando o app e pressionando o botão
Rodando o app e pressionando o botão

Então pessoal, aí está o nosso click de botão sendo interceptado por um evento. Pode ser utilizada esta mesma lógica para várias aplicações, com outros componentes de view também, uma boa parte dos componentes permitem essa interação, utilizando o clickListener.

Espero ter ajudado, e dúvidas e sugestões podem entrar em contato, adicionar nas redes sociais.

Até a próxima!!!!