PROGRAMAÇÃO PARA
DISPOSITIVOS MÓVEIS
Aula 3 – View (parte 1)
Objetivos da aula
 Views – Gerenciadores de layouts
Classe mãe de todos os
componentes visuais...
Widgets!
Gerenciadores de layouts!
Você também pode criar seus componentes visuais.
Basta estender android.view.View e
sobrescrever onDraw(Canvas canvas).
Principais classes...
 FrameLayout;
 LinearLayout;
 TableLayout;
 RelativeLayout;
 AbsoluteLayout.
Todos têm: android...
FrameLayout
Utilizado quando a tela tem apenas um
componente que pode preencher a tela
inteira.
1. <FrameLayout android:layout_width="wrap_content"
2. android:layout_height="wrap_content"
3. android:background="#8B8B83...
1. <FrameLayout android:layout_width="wrap_content"
2. android:layout_height="wrap_content"
3. android:background="#8B8B83...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height="wrap_content"
3. android:background="#8B8B83"...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height="wrap_content"
3. android:background="#8B8B83"...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
1. <FrameLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"
...
LinearLayout
Posiciona os componentes na vertical ou
horizontal (default).
1. <LinearLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83"...
1. <LinearLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“...
1. <LinearLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“...
TableLayout
Posiciona os componentes em uma tabela.
1. <TableLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“
...
1. <TableLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“
...
1. <TableLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“
...
1. <TableLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B83“
...
RelativeLayout
Posiciona um componente relativo ao outro.
1. <RelativeLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B8...
1. <RelativeLayout android:layout_width="fill_parent"
2. android:layout_height=“fill_parent"
3. android:background="#8B8B8...
RelativeLayout...
 android:layout_below => abaixo;
 android:layout_above => acima;
 android:layout_toRightOf => à direi...
RelativeLayout...
 Cuidado ao modificar os componentes;
 É necessário conhecer bem os atributos.
AbsoluteLayout
Posiciona os componentes baseando-se nas
coordenadas x e y.
AbsoluteLayout...
 Problemático em virtude da imensa
quantidade de dispositivos com diferentes
resoluções de tela.
Obrigado!
Aula 10 04 (Gerenciadores de layouts)
Aula 10 04 (Gerenciadores de layouts)
Aula 10 04 (Gerenciadores de layouts)
Aula 10 04 (Gerenciadores de layouts)
Upcoming SlideShare
Loading in …5
×

Aula 10 04 (Gerenciadores de layouts)

468 views

Published on

Organizando os componentes visuais.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
468
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 10 04 (Gerenciadores de layouts)

  1. 1. PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS Aula 3 – View (parte 1)
  2. 2. Objetivos da aula  Views – Gerenciadores de layouts
  3. 3. Classe mãe de todos os componentes visuais...
  4. 4. Widgets!
  5. 5. Gerenciadores de layouts!
  6. 6. Você também pode criar seus componentes visuais. Basta estender android.view.View e sobrescrever onDraw(Canvas canvas).
  7. 7. Principais classes...  FrameLayout;  LinearLayout;  TableLayout;  RelativeLayout;  AbsoluteLayout. Todos têm: android:layout_width e android:layout_height
  8. 8. FrameLayout Utilizado quando a tela tem apenas um componente que pode preencher a tela inteira.
  9. 9. 1. <FrameLayout android:layout_width="wrap_content" 2. android:layout_height="wrap_content" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" /> 9. 10. </FrameLayout>
  10. 10. 1. <FrameLayout android:layout_width="wrap_content" 2. android:layout_height="wrap_content" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" /> 9. 10. </FrameLayout>
  11. 11. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height="wrap_content" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" /> 9. 10. </FrameLayout>
  12. 12. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height="wrap_content" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" /> 9. 10. </FrameLayout>
  13. 13. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" /> 9. 10. </FrameLayout>
  14. 14. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content“ 9. android:background="#ADFF2F" /> 10. 11. </FrameLayout>
  15. 15. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content“ 9. android:background="#ADFF2F" /> 10. 11. </FrameLayout>
  16. 16. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width=“fill_parent" 8. android:layout_height="wrap_content“ 9. android:background="#ADFF2F" /> 10. 11. </FrameLayout>
  17. 17. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width=“fill_parent" 8. android:layout_height="wrap_content“ 9. android:background="#ADFF2F" /> 10. 11. </FrameLayout>
  18. 18. 1. <FrameLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="FrameLayout“ 7. android:layout_width=“fill_parent" 8. android:layout_height="fill_parent“ 9. android:background="#ADFF2F" /> 10. 11. </FrameLayout>
  19. 19. LinearLayout Posiciona os componentes na vertical ou horizontal (default).
  20. 20. 1. <LinearLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83" 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text=“PrimeiroLayout“ 7. android:background="#ADFF2F" /> 8. 9. <TextView android:text=“SegundoLayout“ 10. android:background="#E32636" /> 11. 12. </LinearLayout>
  21. 21. 1. <LinearLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. android:orientation=“vertical" 5. tools:context=".Exercicio3"> 6. 7. <TextView android:text=“PrimeiroLayout“ 8. android:background="#ADFF2F" /> 9. 10. <TextView android:text=“SegundoLayout“ 11. android:background="#E32636" /> 12. 13. </LinearLayout>
  22. 22. 1. <LinearLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. android:orientation=“vertical" 5. tools:context=".Exercicio3"> 6. 7. <TextView android:text=“PrimeiroLayout“ 8. android:layout_gravity="center_horizontal" 9. android:background="#ADFF2F" /> 10. 11. <TextView android:text=“SegundoLayout“ 12. android:layout_gravity=“right" 13. android:background="#E32636" /> 14. 15. </LinearLayout>
  23. 23. TableLayout Posiciona os componentes em uma tabela.
  24. 24. 1. <TableLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. tools:context=".Exercicio3"> 5. 6. <TableRow> 7. <TextView android:text="Coluna 1“ android:background="#ADFF2F" /> 8. <TextView android:text="Coluna 2" android:background="#E32636" /> 9. </TableRow> 10. 11. <TableRow> 12. <TextView android:text="Coluna 1" android:background="#FFFF00" /> 13. <TextView android:text="Coluna 2" android:background="#800000" /> 14. </TableRow> 15. 16. </TableLayout>
  25. 25. 1. <TableLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. android:stretchColumns="1" 5. tools:context=".Exercicio3"> 6. 7. <TableRow> 8. <TextView android:text="Coluna 1“ android:background="#ADFF2F" /> 9. <TextView android:text="Coluna 2" android:background="#E32636" /> 10. </TableRow> 11. 12. <TableRow> 13. <TextView android:text="Coluna 1" android:background="#FFFF00" /> 14. <TextView android:text="Coluna 2" android:background="#800000" /> 15. </TableRow> 16. 17. </TableLayout> 1° posição é 0.
  26. 26. 1. <TableLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. android:stretchColumns="1" 5. tools:context=".Exercicio3"> 6. 7. <TableRow> 8. <TextView android:text="Coluna 1“ android:background="#ADFF2F" /> 9. <TextView android:text="Coluna 2" android:background="#E32636" /> 10. </TableRow> 11. <TableRow> 12. <TextView android:text="Coluna 1" android:background="#FFFF00" /> 13. <TextView android:text="Coluna 2" android:background="#800000" /> 14. </TableRow> 15. <TableRow> 16. <Button android:text=“Cadastrar” /> 17. </TableRow> 18. 19. </TableLayout>
  27. 27. 1. <TableLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. android:stretchColumns="1" 5. tools:context=".Exercicio3"> 6. 7. <TableRow> 8. <TextView android:text="Coluna 1“ android:background="#ADFF2F" /> 9. <TextView android:text="Coluna 2" android:background="#E32636" /> 10. </TableRow> 11. <TableRow> 12. <TextView android:text="Coluna 1" android:background="#FFFF00" /> 13. <TextView android:text="Coluna 2" android:background="#800000" /> 14. </TableRow> 15. <TableRow android:gravity="right"> 16. <Button android:text=“Cadastrar” /> 17. </TableRow> 18. 19. </TableLayout>
  28. 28. RelativeLayout Posiciona um componente relativo ao outro.
  29. 29. 1. <RelativeLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. tools:context=".Exercicio3"> 5. 6. <TextView android:text="Ricardo" 7. android:background="#ADFF2F" 8. android:layout_width="wrap_content“ 9. android:layout_height="wrap_content" /> 10. 11. <TextView android:text="Longa" 12. android:background="#E32636" 13. android:layout_width="wrap_content“ 14. android:layout_height="wrap_content" /> 15. 16. </TableLayout>
  30. 30. 1. <RelativeLayout android:layout_width="fill_parent" 2. android:layout_height=“fill_parent" 3. android:background="#8B8B83“ 4. tools:context=".Exercicio3"> 5. 6. <TextView android:id="@+id/idRequerido" 7. android:text="Ricardo" 8. android:background="#ADFF2F" 9. android:layout_width="wrap_content“ 10. android:layout_height="wrap_content" /> 11. 12. <TextView android:text="Longa" 13. android:background="#E32636" 14. android:layout_below="@id/idRequerido" 15. android:layout_width="wrap_content“ 16. android:layout_height="wrap_content" /> 17. 18. </TableLayout> Os componentes se referenciam-se através dos Ids. O componente referenciado deve estar declarado acima do componente que o referencia.
  31. 31. RelativeLayout...  android:layout_below => abaixo;  android:layout_above => acima;  android:layout_toRightOf => à direita;  android:layout_toLeftOf => à esquerda;  android:layout_alignParentTop => no topo;  ...
  32. 32. RelativeLayout...  Cuidado ao modificar os componentes;  É necessário conhecer bem os atributos.
  33. 33. AbsoluteLayout Posiciona os componentes baseando-se nas coordenadas x e y.
  34. 34. AbsoluteLayout...  Problemático em virtude da imensa quantidade de dispositivos com diferentes resoluções de tela.
  35. 35. Obrigado!

×