android 02 - recycler view adapter
TRANSCRIPT
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
Lista em Apps
Conteúdo
• Bibliotecas no Gradle
• package
• RecyclerLayout
• Item layout
• Adapter
• Debug
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'
• }
Modelo
Dica: Alt+insert para gerar automaticamente get & set
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)
RecyclerView
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)
Item layout
• Layout > New > layout resource file
• Nome: item_list
CardView
• Muito usada em design
atual.
• Fácil de deixar bonito ;)
Layout 101
• Margin -> espaço deixado para “fora”
• Padding -> espaço deixado para “dentro”
Layout 101
• Width -> largura
• Height -> altura
• “match_parent” -> encher a tela
• “wrap_content” -> do tamanho do conteúdo
Layout 101 - ScaleType
• ImageView ScaleType
Layout 101
• Gravity
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
• Propriedades
• Lista dos objetos
• Contexto
• Construtor
• Recebe o contexto e itens
Adapter
• Inflar o layout do item
• Retorna o tamanho da lista
Adapter
• ViewHolder para os itens do layout que
serão usados
Adapter
• Ligar a propriedade do objeto à um item de
view
Adapter
• Substituir “Object” pelo objeto de modelo
• Usar findViewById para os itens de layout
• Setar as informações
View Holder do Produto
Conectando Adapter -> recycler view
• Rode para testar!
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);
Bind completo
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)
OnClickListener
• OnBindViewHolder
Dica: Toast libera uma mensagem curta na tela para o
usuário
OnClickListener
• Iniciando outra ativity
Layout Detalhes
• Criar um layout xml para
a página de detalhes
• Misture os layouts para
chegar no resultado
desejado
Parâmetros entre Activity
• Modo básico – key value
• Passando parâmetro
Parâmetros entre Activity
• Modo básico – key value
• Recuperando parâmetro
Parâmetros entre Activity
• Em casos de objetos complexos fica
cansativo enviar e recuperar as
propriedades uma a uma
• Solução: serialização
Serialização
• Biblioteca GSON
• compile 'com.google.code.gson:gson:2.3.1'
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
Serializar
Recuperando
• (DetalhesActivity)
Action Bar
• Disponibiliza ações ao usuário
ActionBar
Personalizando a ActionBar
Menu ActionBar
• res -> menu_main.xml
Menu Action Bar
• onClick
Resumo
• RecyclerView para implementar listas
• Layout de item em xml
• Adapter
• ClickListener
• Layouts avançados
• Parâmetros entre Activity
