PROGRAMAÇÃO PARADISPOSITIVOS 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:layout_width e android:layout_height

FrameLayoutUtilizado 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"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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

LinearLayoutPosiciona os componentes na vertical ou

horizontal (default).

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>

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>

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>

TableLayoutPosiciona os componentes em uma tabela.

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>

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.

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>

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>

RelativeLayoutPosiciona um componente relativo ao outro.

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>

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.

RelativeLayout...

android:layout_below => abaixo; android:layout_above => acima; android:layout_toRightOf => à direita; android:layout_toLeftOf => à esquerda; android:layout_alignParentTop => no

topo; ...

RelativeLayout...

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

AbsoluteLayoutPosiciona 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!