Views Interface Gráfica

Transcrição

1 Views Interface Gráfica

2 Interfaces gráficas Visão geral Classe View A classe para componentes visuais Desenha na tela através do método ondraw(canvas) Widgets Classe 2

3 O que é a View Classe para componentes visuais Desenha na tela através do método ondraw(canvas) Ancestral de todos os componentes visuais de uma aplicação Android. Tipos de componentes: Widgets Gerenciadores de layout 3

4 A classe ViewGroup A classe ViewGroup é a classe mãe de todos os gerenciadores de layout. Os gerenciadores de layout são utilizados para organizar a disposição dos componentes na tela. 4

5 Como referenciar recursos no XML Drawable: Identificadores: Definição: Referência: Strings: Cores: Forma direta: android:textcolor="#rrggbb" Forma indireat: Estilos: 5

6 Interfaces gráficas - Layouts Opções para definição do layout Arquivos XML na pasta /res/layout <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:src="@drawable/image" android:id="@+id/imgview" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </FrameLayout> Via código da API FrameLayout layout = new FrameLayout(this); LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); layout.setlayoutparams(params); ImageView imgview = new ImageView(this); params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); imgview.setlayoutparams(params); imgview.setimageresource(r.drawable.image); layout.addview(imgview); setcontentview(layout); 6

7 FrameLayout Tipo mais comum e simples de layout, utilizado por um componente que precisa preencher a tela inteira. O componente inserido no FrameLayout será posicionado no canto esquerdo superior e, dependendo de seu tamanho, ocupará todo o espaço da tela. Componentes são organizados em pilha O último componente adicionado aparece na frente 7

8 FrameLayout 8

9 FrameLayout Atributos 9

10 Exercício - FrameLayout Crie um projeto chamado LayoutSamples Substitua o conteúdo de main.xml por: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android= android:layout_width="match_parent android:layout_height="wrap_content android:background="#8b8b83"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/smile" /> </FrameLayout> Modifique o layout acima usando outros atributos Adicione mais um ImageView. Dica: é possível usar "bottom right" em layout_gravity 10

11 LinearLayout Componentes são organizados lado a lado Organiza os elementos na vertical ou na horizontal (padrão). Propriedades orientation : define o fluxo dos elementos na tela pode ser vertical ou horizontal layout_heigth e Layout_width: especifica a altura do componente pode receber como entra um número, fill_parent( ocupa o espaço disponível no elemento pai) e wrap_content ocupa apenas o espaço necessário na tela layout_gravity: utilizado para alinhar elementos na tela. Valor (top,botton,left, right, center, center_vertical, center_horizontal) 11

12 LinearLayout 12

13 LinearLayout Atributos Pesos 13

14 Exercício - LinearLayout Adicione o arquivo linearlayout.xml a seguir Não esqueça de fazer setcontentview(r.layout.linearlayout); <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="nome do programa" android:layout_gravity="right" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="descrição curta" android:layout_gravity="right" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="2" android:gravity="top"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="detalhes" android:layout_gravity="right" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="3" android:gravity="top"/> </LinearLayout> 14

15 TableLayout É filho do LinearLayout e pode ser utilizado para organizar os componentes em uma tabela, com linhas e colunas. Organiza componentes em linhas e colunas Cada linha é um TableRow (subclase de LinearLayout) Propriedades stretchcolumns: a coluna ocupa o espaço disponível na tela. Utilizado para tabelas com somente uma coluna shrinkcolumns: faz um ajuste na largura da coluna impedindo que elementos deixem de ser exibidos. 15

16 TableLayout 16

17 TableLayout Atributos 17

18 Exercício - TableLayout Adicione outro XML de layout ao projeto (tablelayout.xml) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#505050"> <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content android:stretchcolumns="1" > <TableRow> <TextView android:text="produto A" /> <TextView android:text="r$ 100,00" android:gravity="right" android:background="#808080" /> </TableRow> <TableRow> <TextView android:text="produto B" android:background="#808080"/> <TextView android:text="r$ 100,00" android:gravity="right" /> </TableRow> </TableLayout> (continua...) 18

19 Exercício - TableLayout <View android:layout_width="wrap_content" android:layout_height="2px" android:background="#000000" /> <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:shrinkcolumns="1" > <TableRow> <TextView android:text="produto A" /> <TextView android:text="descrição curta" /> </TableRow> <TableRow> <TextView android:text="produto B" /> <TextView android:text="este produto possui uma descrição muito grande e não caberia na tela normalmente" android:background="#808080"/> </TableRow> </TableLayout> </LinearLayout> 19

20 RelativeLayout Permite posicionar um componente relativo a outro (abaixo, acima ou ao lado de um componente já existente). Componentes precisam ser identificados: android:id="@+id/id_componente" Propriedades layout_below : Posiciona o elemento abaixo do indicado layout_above : Posiciona o elemento acima do indicado layout_torightof : Posiciona o elemento a direita do indicado layout_toleftof: Posiciona o elemento a esquerda do indicado 20

21 RelativeLayout layout_alignparenttop : Alinha ao topo do componente indicado layout_alineparentbotton : Alinha abaixo do componente indicado layout_margintop : Utilizado para definir um espaço na margem superior do componente. layout_marginright : Utilizado para definir um espaço na margem direita do componente. layout_marginleft : Utilizado para definir um espaço na margem esquerda do componente. 21

22 RelativeLayout 22

23 RelativeLayout Atributos 23

24 Exercício - RelativeLayout Adicione outro XML de layout ao projeto (relativelayout.xml) <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent"> <TextView android:id="@+id/tvlogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:text="usuário:" /> <EditText android:id="@+id/etlogin" android:layout_width="250px" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:text="usuario" android:layout_below="@id/tvlogin" /> <TextView android:id="@+id/tvsenha" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:text="senha:" android:layout_below="@id/etlogin" /> <EditText android:id="@+id/etsenha" android:layout_width="250px" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:text="texto2" android:password="true" android:layout_below="@id/tvsenha" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="logar" android:layout_centerhorizontal="true" android:layout_below="@+id/etsenha" /> </RelativeLayout> 24

25 AbsoluteLayout Permite controlar posição exata dos componentes Permite posicionar os componentes, fornecendo as coordenadas x e y. Pode gerar péssimos resultados em diferentes telas Propriedades layout_x : define a posição na horizontal layout_y: define a posição na vertical 25

26 AbsoluteLayout 26

27 AbsoluteLayout Atributos 27

28 Dimensões Dimensão px (pixels) in (polegadas) mm (milímetro) pt (pontos_ dp/dip Descrição pixels reais da tela baseado no tamanho físico da tela baseado no tamanho físico da tela 1 pt = 1/72 in. (Density-Independent Pixels) unidade abstrata baseada na dendidade física da tela. Mantém sempre o mesmo tamanho real, independente da tela. Exemplo: 0,5 in = 12.7 mm 80 dp. Em 16.0 dpi, 80 dp = 80 px, em 240 dpi 80 dp = 120 px. sp Similar a dp, mas este é o padrão recomendado para telefones celulares. Por exemplo: layout_width = 10sp. 28

29 Exercício - AbsoluteLayout Adicione outro XML de layout ao projeto (absolutelayout.xml) <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android=" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto1" android:layout_x="45px" android:layout_y="87px" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto2" android:layout_x="90px" android:layout_y="12px" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 3" android:layout_x="90px" android:layout_y="250px" /> </AbsoluteLayout> 29

30 Layout composto Observe que layouts podem ser aninhados (colocados dentro de outro) 30

31 Aninhando Layouts para obter layouts complexos 31

32 Exercício - ComplexLayout Adicione outro XML de layout ao projeto (absolutelayout.xml) <?xml version="1.0" encoding="utf-8"?> <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android=" <TableRow> <AbsoluteLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" android:layout_x="10px" android:layout_y="123px" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" android:layout_x="10px" android:layout_y="12px" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" android:layout_x="66px" android:layout_y="67px" /> CONTINUA. 32

33 Exercício - ComplexLayout Adicione outro XML de layout ao projeto (absolutelayout.xml) <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" android:layout_x="120px" android:layout_y="12px" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" android:layout_x="120px" android:layout_y="123px"> </Button> </AbsoluteLayout> <LinearLayout android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view" /> </LinearLayout> </TableRow> </TableLayout> 33