Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Aula 10 04 (Gerenciadores de layouts)

566 views

Published on

Organizando os componentes visuais.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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!

×