Aula 09 Criando Layouts Complexos

Prévia do material em texto

Prof. Milton Escóssia 
2018 
PROGRAMAÇÃO PARA 
DISPOSITIVOS MÓVEIS - CCT0080 
Aula – 09 Criando Layouts Complexos 
Criando layouts Complexos 
 Objetivo: 
 Criar uma app Android no Android Studio composto 
aninhamento de ViewGroups. 
 Aprofundar os conhecimentos sobre componentes View. 
 AbsoluteLayout 
 TableLayout 
 Incluir dinamicamente imagens em um Button. 
 Implementar comportamento aos componentes da UI. 
Construindo Layouts com Views 
 Os componentes de interface gráfica são 
representados por: 
 subclasses de android.view.View 
 representam os componentes gráficos (widgets) como 
TextView, Button , TextEdit, RadioButton, Checkbox, etc; 
 
 android.view.ViewGroup, que representa um container de Views 
e também ViewGroups. 
 Ela é a classe base para componentes de layouts, como 
LinearLayout, FrameLayout, AbsoluteLayout, RelativeLayout, 
TableLayout, etc. 
Outros ViewGroups 
 O Android possui vários tipos de ViewGroups. 
 
 Nesta aula serão apresentados 2 outros 
ViewGroups: 
 AbsoluteLayout 
 TableLayout 
ViewGroup AbsoluteLayout 
 Organiza seus componentes conforme um plano 
cartesiano. 
 Baseado no posicionamento absoluto em x e y. 
 
 Este layout deve ser utilizado com cautela: 
 os objetos são sobrepostos 
 comportamento inesperado do layout da aplicação caso 
ela seja desenvolvida para rodar em dispositivos com 
resoluções de telas diferentes. 
Representação Gráfica AbsoluteLayout 
Exemplo AbsoluteLayout 
ViewGroup TableLayout 
 Especialização do LinearLayout. 
 
 Organiza os views filhos em linhas e colunas. 
 Cada linha é definida pela tag “TableRow”. 
 
 Em cada TableRow uma ou mais células podem ser 
adicionados horizontalmente, sendo que cada célula 
pode conter somente um único View . 
 
 O número de colunas é definido pela linha que tiver mais 
células. 
ViewGroup TableLayout 
 A largura de uma coluna é definida pela linha que 
conter a célula mais larga. 
 
 Um nó filho de um TableLayout não pode especificar 
a propriedade "layout_width". 
 A largura (width) será sempre MATCH_PARENT. 
 Se o nó filho for um TableRow, então a altura (height) é 
sempre WRAP_CONTENT. 
 
Representação Gráfica TableLayout 
Definindo linhas de um TableLayout 
 <TableRow> 
 Componente OBRIGATÓRIO que permite adicionar uma 
linha de componentes em um TableLayout. 
TableRow 
 Layout que organiza horizontalmente os componentes 
filhos. 
 
 Deve ser utilizado como um componente filho de um 
TableLayout. 
 Pode ser usado fora de um TableLayout. 
 
 Cada linha de uma tabela é representado por um 
elemento TableRow. 
 Os filhos de um TableRow não precisam especificar os 
atributos android:layout_width e android:layout_height no 
arquivo XML. 
 
 TableRow sempre reforça esses valores a serem 
respectivamente MATCH_PARENT e WRAP_CONTENT. 
Exemplo TableLayout 
Construindo Layouts Complexos 
 Um ViewGroup também ser composto por um ou 
mais ViewGroups, e isso é o fator que permite que 
layouts complexos (layouts aninhados) sejam 
desenvolvidos. 
Ex: Aninhamento de ViewGroups 
 A árvore de componentes de um layout complexo : 
 
Aninhamento de ViewGroups 
 Como seria a árvore de componentes desse layout ? 
 
Aninhamento de ViewGroups 
 A árvore de componentes do layout anterior: 
 
TableLayout 
TableRow 
AbsoluteLayout LinearLayout 
View View View View View View View View View 
Exercício – Criando Layout Complexo por 
Aninhamento de ViewGroups 
 Recrie o layout abaixo em uma tela na orientação 
paisagem (landscape). 
 
Desafio – Construção da Tela do Jogo da 
Velha 
 Como seria então construir a UI 
ilustrada ao lado? 
Árvore de Componentes 
LinearLayout 
LinearLayout TableLayout 
Button 
(Novo Jogo) 
Button 
(Sair) 
TableRow TableRow TableRow 
Button 
Button 
Button 
Button 
Button 
Button 
TextView 
(Jogo da Velha) 
Button 
Button 
Button 
Tela Inicial – Iniciando a criação do projeto. 
Clique aqui para iniciar 
um novo projeto Android. 
Dados para criação do projeto Android 
 Application Name: 
 App Jogo da Velha 
 Company Domain: 
 br.estacio.fic.pdm 
 Package Name: 
 pdm.br.estacio.fic.appjogodavelha 
 
 Target Android Device: 
 Phone and Table 
 Minimum SDK: 
 API 18: Android 4.3 (Jelly Bean) 
 
 
 
 
 
 
 
Dados para criação do projeto Android 
 Activity Template: 
 Empty Activity 
 
 Activity Name: 
 JogoDaVelhaActivity 
 Layout Name: 
 activity_jogo_da_velha 
 
 
 
 
 
Determinando a cor e espaçamento interno 
de um View 
 android:background 
 Determina a cor/imagem de fundo de um View. 
 
 android:padding 
 Determina o espacejamento interno de uma View. 
 
PaddingRight PaddingLeft 
PaddingTop 
PaddingBottom 
Padding x Margin 
Conteúdo 
PaddingRight PaddingLeft 
PaddingTop 
PaddingBottom 
MarginTop 
MarginBottom 
MarginRight 
MarginLeft 
A propriedade Weight dos Views 
 Propriedade: android:layout_weight 
 
 Determina um peso para dimensionamento para um view em 
relação a outros views. 
 
 Atribui um valor de "importância" para uma view em termos de 
quanto espaço ele deve ocupar na tela. 
 
 Um valor maior peso permite que ela se expanda para preencher 
qualquer espaço restante na view principal. 
 
 Views filhas podem especificar um valor de peso, e, em seguida, 
todo o espaço restante no grupo da view é atribuído a view filha 
na proporção do seu peso declarado. 
 
 Peso padrão é zero. 
 
A propriedade Weight dos Views 
 Exemplo: 
 
 Se houver três campos de texto e dois deles declarar um peso 
de 1, enquanto que o outro é dado nenhum peso, o terceiro 
campo de texto sem peso não crescerá e só irá ocupar o 
espaço requerido pelo seu conteúdo. 
 
 Os outros dois irão expandir-se igualmente a preencher o 
espaço restante depois de todos os três campos são medidos. 
 
 Se o terceiro campo é então dado um peso de 2 (em vez de 0- 
ZERO), então agora é declarada mais importante do que os 
outros dois, por isso, recebe metade do espaço total restante, 
enquanto as duas primeiras partes do resto de forma igual. 
A propriedade Weight dos Views 
 
 
 
 
 Caso 1: 
 
 
 
 Caso 2: 
 
 
 
 
 
 
View-1 View-2 View-3 
View-1 View-2 View-3 
View-1 View-2 View-3 
0 0 0 
1 1 0 
1 1 2 
A propriedade Weight dos Views 
 Views Filhas igualmente ponderados 
 
 Para criar um layout linear em que cada criança usa a 
mesma quantidade de espaço na tela, defina: 
 
 android: layout_height de cada view a “0dp“ – ZERO 
dp (para uma apresentação vertical) 
 
 ou o android: layout_width de cada view para "0dp" – 
ZERO dp ( para um layout horizontal). 
 
 Em seguida, defina o android: layout_weight de cada 
fim de "1" 
Tela Final do Jogo da Velha 
Layout XML da Tela do Jogo da Velha 
Layout XML da Tela do Jogo da Velha 
Layout XML da Tela do Jogo da Velha 
Codificando o Jogo da Velha 
Determinando qual símbolo exibir 
Manipulando cada View Filho 
Dinamicamente 
 ViewGroup.getChildCount() : int 
 Método que retorna o número de views filhos de um 
componente ViewGroup. 
 
 ViewGroup.getChildAt(indice : int) : View 
 Método que retorna um determinado view, filho de um 
componente ViewGroup. 
 O índice é um número inteiro (iniciado em0 - ZERO) 
Manipulando cada View Filho 
Dinamicamente 
Fechando a tela (Saindo do Jogo) 
Para complementar o jogo com IA 
 Inteligência Artificial - Jogo da Velha c/ 
Procedimento Minimax 
 ttps://www.youtube.com/watch?v=cwzKjFkSyIE