* LinearLayout * RelativeLayout * TableLayout * FrameLayout

1. Copyright © 2016 Janynne Gomes 1
Módulo 2: Interface Gráfica
Aula: Gerenciadores de layout
Desenvolvimento para Dispositivos Móveis

2. Copyright © 2016 Janynne Gomes 2
Janynne Gomes
● Bacharel em Sistemas de Informação
● Pós graduando Engenharia de Software e Gerência de
Projetos
● Professora de programação mobile na ETEIT – Escola
Técnica da Univale – http://univale.br/eteit
● Site: http://janynnegomes.com
● E-mail: janynne.gomes@univale.br
Desenvolvimento para Dispositivos Móveis

3. Copyright © 2016 Janynne Gomes 3
●
Plano de aula
– Gerenciadores de layout
●
O que são
●
Dimensões: Largura e altura
●
Componentes:
– LinearLayout
– RelativeLayout
– TableLayout
– FrameLayout
Aula: Gerenciadores de layout

4. Copyright © 2016 Janynne Gomes 4
●
Gerenciadores de layout
– Componentes que organizam os
elementos visuais tanto no sentido
horizontal quanto no vertical, bem
como em linhas e colunas.
– Esses componentes podem receber
outros componentes dentro deles e
ajustar automaticamente sua
aparência.
– São herdados diretamente da classe
android.view.ViewGroup.
Aula: Gerenciadores de layout
Ilustração da hierarquia de
classe dos elementos
ViewGroup e dos demais
componentes que herdam da
classe View

5. Copyright © 2016 Janynne Gomes 5
●
Gerenciadores de layout
– View
●
A classe android.view.View é a
classe mãe de todos os
componentes visuais do Android.
●
Cada subclasse de View precisa
implementar o método
onDraw(Canvas) para desenhar o
componente na tela.
Aula: Gerenciadores de layout

6. Copyright © 2016 Janynne Gomes 6
●
Gerenciadores de layout
– ViewGroup
●
A classe android.view.ViewGroup é
a classe mãe de todos os
gerenciadores de componentes
visuais do Android.
Aula: Gerenciadores de layout
Diagrama de classe - UML

7. Copyright © 2016 Janynne Gomes 7
●
Gerenciadores de layout
Aula: Gerenciadores de layout
x
Widgets Layouts
Componentes robustos
que herdam diretamente
da classe ViewGroup.
Ex.: LinearLayout,
RelativeLayout,
TableLayout.
Componentes simples
que herdam diretamente
da classe View.
Ex.: Button, TextView,
ImageView.

8. Copyright © 2016 Janynne Gomes 8
●
Dimensões das Views
Aula: Gerenciadores de layout
Parâmetros das views:
● Altura – android:layout_heigth
●
Largura – android:layout_width
Largura: width
Altura: heigth

9. Copyright © 2016 Janynne Gomes 9
●
Dimensões das Views
Aula: Gerenciadores de layout
Largura: width
Altura: heigth
Valores dos parametros
●
Utilizando as constantes:
– fill_parent e match_parent: a view irá ocupar
todo o tamanho definido por seu pai(layout)
– wrap_content: a view irá ocupar apenas o
tamanho necessário para exibir seu conteúdo
na tela, sem esticar.
●
Utilizando número(dp): número inteiro na notação
dp(density independent pixel) especificando o valor
fixo do tamanho a ser ocupado na tela.

10. Copyright © 2016 Janynne Gomes 10
●
Dimensões das Views
Aula: Gerenciadores de layout
A notação dp (density independent pixel) faz a
conversão correta de pixels conforme a
densidade/resolução da tela do dispositivo.
Jamais devemos utilizar a notação px!
Exemplo:
android:layout_width=”100dp”
android:layout_width=”100px”
Largura: width
Altura: heigth

11. Copyright © 2016 Janynne Gomes 11
●
Componentes
– LinearLayout
●
É utilizado para distribuir os componentes na
vertical ou horizontal (por padrão).
●
A classe android.widget.LinearLayout organiza a
orientação através do atributo
android:orientation.
●
O alinhamento dos componentes dentro dele
é feito pelo atributo android:layout_gravity.
●
O atributo android:layout_weigth distribui os
elementos na tela pelo peso (porcentagem).
O mais pesado será o maior.
Aula: Gerenciadores de layout

12. Copyright © 2016 Janynne Gomes 12
●
Componentes: LinearLayout
Aula: Gerenciadores de layout

13. Copyright © 2016 Janynne Gomes 13
●
Componentes
– RelativeLayout
●
A classe android.widget.RelativeLayout
permite posicionar um
componente relativo a outro, por
exemplo, abaixo, acima ou ao lado
de um componente já existente.
●
Os componentes precisam ter um
ID definido, pois o posicionamento
de um depende do outro.
Aula: Gerenciadores de layout

14. Copyright © 2016 Janynne Gomes 14
● Componentes: RelativeLayout
Aula: Gerenciadores de layout

15. Copyright © 2016 Janynne Gomes 15
●
Componentes
– TableLayout
●
É filho do LinearLayout, usado para
organizar os elementos como uma tabela:
com linhas e colunas.
●
A classe android.widget.TableLayout é uma das mais
úteis para construir telas de formulários.
●
Cada linha da tabela é formada por um
componente android.widget.TableRow
● O atributo android:strechColumns
expande(estica) a coluna, como um coslpan
faz no HTML.
Aula: Gerenciadores de layout

16. Copyright © 2016 Janynne Gomes 16
●
Componentes: TableLayout
Aula: Gerenciadores de layout

17. Copyright © 2016 Janynne Gomes 17
●
Componentes
– FrameLayout
●
A classe android.widget.FrameLayout é o
tipo mais comum e mais simples
de layout.
●
Funciona como uma pilha, onde
uma view fica por cima da outra.
●
A posição visual é configurada no
atributo android:layout_gravity.
Aula: Gerenciadores de layout

18. Copyright © 2016 Janynne Gomes 18
●
Componentes: FrameLayout
Aula: Gerenciadores de layout

19. Copyright © 2016 Janynne Gomes 19
●
Componentes: FrameLayout
Aula: Gerenciadores de layout

20. Copyright © 2016 Janynne Gomes 20
●
Orientações
– Baixe em seu portal do aluno o arquivo Aula7.zip, que contém o
projeto Android com todos os exemplos da aula.
– Crie formulários de cadastro de livros utilizando os 4 tipos de
gerenciadores de layout estudados nessa aula. Ao final, envie o
projeto para janynne.gomes@univale.br
Aula: Gerenciadores de layout

21. Copyright © 2016 Janynne Gomes 21
●
Referências
– LECHETA, Ricardo R.;Google Android, Aprenda a criar
aplicações para dispositivos móveis com o Android SDK. São
Paulo, Novatec, 2015. ISBN 978-85-7522-468-7. Páginas 147 a
181.
Aula: Gerenciadores de layout