Capítulo 08 - desenvolvimento de layouts customizados

Capítulo 08: Layouts customizados

M.Sc. Márcio Palheta

Instrutor

● Programador desde 2000

● Aluno de doutorado

● Mestre em informática pelo ICOMP/UFAM

● Especialista em aplicações WEB – FUCAPI

● [email protected]

● sites.google.com/site/marciopalheta

mailto:[email protected]


3/35

Agenda

● Na estrada, até aqui

● Novo layout para a listagem de alunos, usando:

– Foto e Nome do Aluno● Arquivo de cores: res/values/colors.xml

● Layout para itens da ListView: res/layout/item.xml

● Adapters customizados: ListaAlunoAdapter.java

● Injeção de dependências em Android


4/35

Na estrada, até aqui.

● A nossa lista de alunos apresenta o nome dos alunos

● Essa lista é baseada em um layout do próprio Android:

– android.R.layout.simple_list_item_1

● Esse layout é usado pelo ArrayAdapter par vincular a lista de alunos (List<Aluno>) à nossa ListView


5/35

Hora de melhorar o layout

● Mas agora, temos a foto do aluno, armazenada no device

● O caminho para a foto está armazenado no SQLite

● Queremos uma listagem onde:

– Sejam exibidos foto e nome do aluno; e

– Cada linha da tabela seja de uma cor (zebrada)● Para isso, precisamos definir um arquivo de Cores e outro

para o Novo Layout

● Vamos começar por esses dois XMLs


6/35

Exercício 01: Arquivo de cores

● Crie o arquivo /res/values/colors.xml, onde vamos definir cores para a borda da imagem, para linhas pares e para linhas ímpares:


7/35

Exercício 02: res/layout/item.xml


8/35


ImageView paraexibir a Foto


9/35



Efeito deborda da Imagem


10/35



TextView paraexibir o Nome

Efeito deborda da Imagem


11/35

Adapter customizado - BaseAdapter

● Agora que temos nosso layout pronto para ser inflado, precisamos ensinar ao Android:

– Como carregar a foto na ImageView; e

– Como colocar o nome do aluno no TextView;● Para resolver o problema, vamos criar o nosso próprio

Adapter

● No Android, temos a classe abstrata BaseAdapter, que já traz os métodos abstratos necessários à exibição da lista na tela


12/35

Métodos da classe BaseAdapter

● Indica quantos itens temos para exibir na listagem. Com isso, o Android calcula o tamanho inicial da ListView.

● Podemos receber a coleção de alunos pelo construtor e usar o método size()

● Retorna um identificador único para o item da lista.

● Vamos retorna o id do aluno:

– listaAlunos.get(posicao).getId()

public int getCount()

public long getItemId(int posicao)


13/35

Métodos da classe BaseAdapter

● Retorna um item da lista, de acordo com a posição

– listaAlunos.get(posicao)

● Retorna um objeto View, representando a linha da ListView que será exibida na tela do device

● Para usar o layout gerado, vamos precisar de uma Activity, onde teremos acesso ao seu getLayoutInflater()

● Vamos receber, também, a Activity pelo construtor

public Object getItem(int posicao)

public View getView(int posicao, View convertView, ViewGroup parent)


14/35

Exercício 03: ListaAlunoAdapter.java

● Cria a classe ListaAlunoAdapter, no pacote adapter

● Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)


15/35




Novo pacote para classes Adapter


16/35





Classe filha de BaseAdapter


17/35





Classe filha de BaseAdapterDependências do

nosso Adapter


18/35





Classe filha de BaseAdapterDependências do

nosso Adapter

Método construtor paraInjeção de Dependências


19/35

Exercício 04: Atualização do Adapter

● Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter


20/35



Retorna o totalde itens da lista


21/35




Método que retorna o ID de

um item


22/35




Método que retorna o ID de

um item

Retorna o Aluno que

representa um item da

ListView


23/35

Exercício 05: Gerar a linha da ListView

● Implemente o método ListaAlunoAdapter.getView(...):


24/35


● Implemente o método ListaAlunoAdapter.getView(...):Método que retorna o item

que será exibido na ListView


25/35



que será exibido na ListViewO item da ListView é

carregado com onovo layout


26/35





Pega uma referência para Aluno


27/35





Pega uma referência para Aluno Configuração de

Cor de fundo daslinhas da ListView


28/35

Exercício 05: final do método getView()


29/35

Exercício 05: final do método getView()Configuração do nome


30/35


Configuração da foto


31/35


Configuração da foto

Retorna a linhada ListView


32/35

Execute a App e veja o novo Layout


33/35

O que vem a seguir?

● Serviços de background: Receber SMS e Tocar MP3

● Integração via JSON

● Tarefas assíncronas e Barra de progresso

● Fragments

● Google Maps e GPS


34/35

Referências

● www.caelum.com.br● d.android.com● LECHETA, Ricardo. Google Android, 3a edição,

Novatec, São Paulo, 2013● Código fonte completo:

https://github.com/marciopalheta/cursosandroid

http://www.caelum.com.br/

https://github.com/marciopalheta/cursosandroid

Capítulo 08: Layouts customizados

Education

Capítulo 08 - desenvolvimento de layouts customizados