Organizando os componentes visuais.

1. PROGRAMAÇÃO PARA
DISPOSITIVOS MÓVEIS
Aula 3 – View (parte 1)

2. Objetivos da aula
 Views – Gerenciadores de layouts

4. Classe mãe de todos os
componentes visuais...

5. Widgets!

6. Gerenciadores de layouts!

7. Você também pode criar seus componentes visuais.
Basta estender android.view.View e
sobrescrever onDraw(Canvas canvas).

8. Principais classes...
 FrameLayout;
 LinearLayout;
 TableLayout;
 RelativeLayout;
 AbsoluteLayout.
Todos têm: android:layout_width e android:layout_height

9. FrameLayout
Utilizado quando a tela tem apenas um
componente que pode preencher a tela
inteira.

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. 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>

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. 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>

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.
10. </FrameLayout>

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. 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>

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. 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>

19. 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>

20. LinearLayout
Posiciona os componentes na vertical ou
horizontal (default).

21. 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>

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:background="#ADFF2F" />
9.
10. <TextView android:text=“SegundoLayout“
11. android:background="#E32636" />
12.
13. </LinearLayout>

23. 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>

24. TableLayout
Posiciona os componentes em uma tabela.

25. 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>

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.
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.

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>
16. <Button android:text=“Cadastrar” />
17. </TableRow>
18.
19. </TableLayout>

28. 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>

29. RelativeLayout
Posiciona um componente relativo ao outro.

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: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>

31. 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.

32. RelativeLayout...
 android:layout_below => abaixo;
 android:layout_above => acima;
 android:layout_toRightOf => à direita;
 android:layout_toLeftOf => à esquerda;
 android:layout_alignParentTop => no topo;
 ...

33. RelativeLayout...
 Cuidado ao modificar os componentes;
 É necessário conhecer bem os atributos.

34. AbsoluteLayout
Posiciona os componentes baseando-se nas
coordenadas x e y.

37. AbsoluteLayout...
 Problemático em virtude da imensa
quantidade de dispositivos com diferentes
resoluções de tela.

39. Obrigado!