Embed Size (px)
DESCRIPTION
Organizando os componentes visuais.
Citation preview
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!
