Aula 10 Criando Layouts Complexos part2

Prévia do material em texto

Prof. Milton Escóssia 
2018 
PROGRAMAÇÃO PARA 
DISPOSITIVOS MÓVEIS - CCT0080 
Aula – 10 Usando Layouts Complexos 
Criando layouts Complexos 
 Objetivo: 
 Criar apps Android no Android Studio composto pelos 
ViewGroups: 
 GridLayout 
 ContraintLayout 
 Manipulação de imagens com ImageView, ImageButton. 
 Uso de Animações 
 Implementar comportamento de Drag-and-drop nos 
componentes da UI. 
 Utilização de Thread para temporizadores. 
View ImageView 
 Componente que permite a visualização de imagens 
dentro dele. 
 
 Suporta imagens no formato JPEG, GIF e PNG. 
 
 A propriedade “srcCompat” (source) identifica qual o 
arquivo de imagem a ser exibido. 
 Nas versões anteriores do componentes usava-se a 
propriedade “src”. 
 Faz uso da notação @drawable ou @mipmap para 
indicar o arquivo de imagem a ser exibido. 
View ImageView 
 O método “setImageResource( int )” permite atribuir 
uma imagem ao ImageView. 
 Ex: imageView.setImageResource(R.drawable.bugdroid); 
 
 O método “getIDrawable( )” permite obter uma 
imagem do ImageView. 
 Ex: imageView.getIDrawable( ); 
 
 Responde a eventos de click através da interface 
“OnClickListener”. 
 
 
Atenção 
 O padrão de nomenclatura dos arquivos de recursos 
contidos na pasta “res” é: 
 Iniciar com letras. 
 Usar letras minúsculas. 
 Palavras compostas separadas por sublinhado 
(underscore) “_”. 
 
 Se utilizar caracteres inválidos, a imagem não será 
exibida pelo ImageView e exibirá a seguinte 
mensagem de alerta: 
Atenção – O erro !!! 
Atenção – O correto !!! 
Trocando a Imagem ao Clicar sobre Ela 
 Para realizar a troca da imagem em tempo de 
execução deve-se: 
 Associar o tratamento de evento de click ao componente 
ImageView (aqui será utilizado a propriedade onClick do 
componente) 
 No método de tratamento do evento do click deve-se 
utilizar o método “setImageResource( )” informando a 
referência da nova imagem a ser exibida. 
Trocando a Imagem ao Clicar sobre Ela 
 Trocando a imagem “a_espada” para “a_ouro” ao 
clicar no componente ImageView. 
click 
Recursos do Projeto - Imagens 
O Arquivo de Layout 
O Código da Activity 
Exercício 1 
 Implemente a solução composta por 3 imagens em que 
ao clicar sobre a imagem corrente o sistema muda para 
a imagem seguinte, repetindo esse processo de forma 
cíclica a cada click sobre a imagem. 
inicia 
click 
click 
click 
ImageButton 
Componente composto por um ImageView e um Button. 
 
Permite criar um componente com a aparência de uma 
imagem e comportamento de botão. 
 
Propriedades: 
src: 
indica que imagem exibir 
onClick: 
indica que método será executado no Activity quando ocorrer o 
evento de click. 
 
Obs: Não possui a propriedade TEXT. 
 
Exemplo ImageButton 
exemplo 
Exercício 2 
 Implemente uma app que contenha 3 ImageButtons com 
as imagens que devem ser exibidas em um ImageView. 
Ao clicar sobre um ImageButton então deve-se exibir na 
ImageView a respectiva imagem. 
Usando GridLayout 
 Organiza os componentes view em linhas e colunas, 
formando um disposição em grade. 
 
 Disponível a partir da versão 4.0 (Ice Cream Sandwich) 
 
 Cada linha da grade é referenciada por índices, que são 
numeradas a partir de 0 contando de baixo para cima. 
 
 As células (linha/coluna) também tem numeração e 
começam em 0 a partir do da célula no canto superior 
esquerdo da grade. 
Usando GridLayout 
Usando GridLayout 
 Atributos do GridLayout: 
 rowCount 
 columnCount 
 Orientation (horizontal, vertical) 
 
 Atributos nos componentes view: 
 layout_row 
 layout_column 
 
 Outros atributos nos componentes view: 
 layout_rowSpan 
 layout_columnSpan 
 layout_gravity ( center, fill, left, right, top, bottom ) 
 layout_rowWeight 
 layout_columnWeight 
 
 
 
Exemplo 
rowCount= 
columnCount = 
layout_row= 
layout_column= 
layout_gravity= 
android:layout_columnWeight= 
layout_row= 
layout_column= 
layout_gravity= 
android:layout_rowWeight= 
Exemplo 
rowCount= 
columnCount = 3 
layout_gravity= 
layout_gravity= 
layout_columnSpan= 
Aplicação do GridLayout 
 Construção de telas do tipo Dashboard. 
 Painel de Fotos 
 Jogo da Memória 
 Puzzle (Quebra-cabeça) 
Exercício - Construir o Jogo da Memória 
 Utilizando o GridLayout e o componente ImageView 
Implemente um jogo da memória de 5 colunas por 6 
linhas, conforme imagem abaixo: 
Exercício – Jogo da Memória 
 Construção da tela do jogo 
 Montar a grid com Imagens 
 
 Implementar a lógica do Jogo 
 Tratar evento de clique para trocar imagem. 
 Ao clicar no 2º botão verificar se as imagens são iguais. 
 Se iguais então bloqueia as imagens e adiciona 1 ponto ao placar. 
 Se diferentes então troca a imagem para a imagem original. 
 
 Deverá adicionar uma pausa de 2 segs antes de iniciar a 
verificação e liberar a nova jogada. 
 
 Permitir reiniciar o jogo após a mensagem de fim, ou sair da 
app.