Download - Android 02 - Recycler View Adapter
Slides
• Esta apresentação está disponível em:
http://bit.ly/android01_intro
Trechos de códigos serão disponíveis em:
www.codeshare.io/lyhtt
Objetivo final
• Criar um aplicativo de vendas simples
• Em uma tela inicial, ele irá exibir uma lista de
produtos com imagem e preços diferentes
• Ao clicar em um destes produtos, abrirá uma
nova tela com detalhes e descrição do produto
e um botão para comprar
Objetivo parcial
• Criar classes de modelo, inicializar valores
falsos
• Criar uma lista (Recycler Layout) com itens
personalizados
• Utilizar Picasso para baixar imagens da
internet
build.Gradle
• Importando bibliotecas facilmente no gradle
• Download automático via MavenCentral
Gradle Please
build.Gradle
• RecylerLayout – novo ListView
• CardLayout - Cards
• Picasso – Download async de imagens
• dependencies {
• compile fileTree(dir: 'libs', include: ['*.jar'])
• compile 'com.android.support:appcompat-v7:21.0.2'
• compile 'com.android.support:cardview-v7:21.0.0'
• compile 'com.android.support:recyclerview-v7:21.0.0'
• compile 'com.squareup.picasso:picasso:2.4.0'
• }
Inicializar lista de produtos “falsa”
• Usar para protótipo
• No futuro, essa informação pode vir do Controller
de WebService ou Banco de Dados
RecyclerView
• Lista grande de informações
• Dispõe de forma confortável ao usuário
• Funciona como uma ListView, porém mais
poderoso (podemos definir Lista, grade de
2 colunas, animações facilitadas, etc)
Adapter
ArrayList
Produto 1
Produto 2
Produto 3
Adapter
Nome textView.setText(nome)
Preço textView.setText(preco)
Descrição textView.setText(descricao)
Nome textView.setText(nome)
Preço textView.setText(preco)
Descrição textView.setText(descricao)
Layout 101
• Width -> largura
• Height -> altura
• “match_parent” -> encher a tela
• “wrap_content” -> do tamanho do conteúdo
Item layout
• RelativeLayout
• Height = 10dp
• Background = @color/accent
• Large Text
• Id = txtNome
• Medium Text
• Id = txtPreco
• ImageView
• Id = imageView
• Height = 120dp
• ScaleType = centerCrop
• Src = @drawable/produto_01
Adapter
• Recebe uma lista de objetos e liga cada
um deles à uma View
• “Boiler plate code” – “Receita de bolo”
• Usar o código padrão e apenas adaptar o
necessário
• http://www.codeshare.io/hhQUd
Adapter
• Substituir “Object” pelo objeto de modelo
• Usar findViewById para os itens de layout
• Setar as informações
Picasso
• Download asíncrono de imagens
• Problema de download da internet: Demora!
• Picasso é uma biblioteca que baixa as
imagens e coloca no ImageView facilmente
Picasso
• Picasso.with(context).load(object.getImage_url())
• .fit()
• .centerCrop()
• .placeholder(R.drawable.holder)
• .into(holder.imageView);
OnClickListener
• xxx Não colocar OnClickListener no
RecyclerView inteiro
• Ao clicar em qualquer lugar da lista o método
será disparado, não sabemos qual item foi
clicado!
OnClickListener
• Da mesma forma que fizemos com o
botão, é possível criar um clickListener
dentro do adapter, para a view atual
• Isso dá liberdade de colocar click em
apenas uma parte do item (apenas ao
clicar na foto, um botão para deletar,
favoritar, etc)
Layout Detalhes
• Criar um layout xml para
a página de detalhes
• Misture os layouts para
chegar no resultado
desejado
Parâmetros entre Activity
• Em casos de objetos complexos fica
cansativo enviar e recuperar as
propriedades uma a uma
• Solução: serialização
JSON
• [
• {
• "id": 1,
• "image_url": “http://caminhodaimagen/imagem.jpg",
• "nome": "Loch Ard Gorge",
• "regiao": "Great Ocean Road",
• "pais": "Austrália",
• "curiosidade": “Texto da curiosidade aqui",
• "url": "http://destino.herokuapp.com/destinos/1.json"
• }
• ]
Serialização
• Transforma o objeto “Produto” em uma
string para enviar, e torna fácil a
recuperação do objeto na Activity
Resumo
• RecyclerView para implementar listas
• Layout de item em xml
• Adapter
• ClickListener
• Layouts avançados
• Parâmetros entre Activity