![Page 1: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/1.jpg)
Views
Interface Gráfica
![Page 2: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/2.jpg)
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
![Page 3: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/3.jpg)
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
![Page 4: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/4.jpg)
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
![Page 5: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/5.jpg)
Como referenciar recursos no XML
Drawable:
android:src="@drawable/nome_drawable"
Identificadores:
Definição: android:id="@+id/identificador"
Referência: android:layout_below="@id/identificador"
Strings:
android:text="@string/nome_string"
Cores:
Forma direta: android:textColor="#RRGGBB"
Forma indireat: android:textColor="@color/nome_cor"
Estilos:
style="@style/nome_estilo“
5
![Page 6: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/6.jpg)
Interfaces gráficas - Layouts Opções para definição do layout
Arquivos XML na pasta /res/layout
Via código da API
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/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>
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
![Page 7: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/7.jpg)
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
![Page 8: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/8.jpg)
FrameLayout
8
![Page 9: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/9.jpg)
FrameLayout
Atributos
9
![Page 10: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/10.jpg)
Exercício - FrameLayout
Crie um projeto chamado LayoutSamples
Substitua o conteúdo de main.xml por:
Modifique o layout acima usando outros atributos
Adicione mais um ImageView.
Dica: é possível usar "bottom|right" em layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android=http://schemas.android.com/apk/res/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>
10
![Page 11: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/11.jpg)
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
![Page 12: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/12.jpg)
LinearLayout
12
![Page 13: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/13.jpg)
LinearLayout
Atributos
Pesos
13
![Page 14: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/14.jpg)
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="http://schemas.android.com/apk/res/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
![Page 15: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/15.jpg)
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
![Page 16: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/16.jpg)
TableLayout
16
![Page 17: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/17.jpg)
TableLayout
Atributos
17
![Page 18: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/18.jpg)
Exercício - TableLayout
Adicione outro XML de layout ao projeto (tablelayout.xml)
(continua...)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/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>
18
![Page 19: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/19.jpg)
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
![Page 20: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/20.jpg)
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
![Page 21: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/21.jpg)
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
![Page 22: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/22.jpg)
RelativeLayout
22
![Page 23: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/23.jpg)
RelativeLayout
Atributos
23
![Page 24: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/24.jpg)
Exercício - RelativeLayout Adicione outro XML de layout ao projeto (relativelayout.xml) <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/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
![Page 25: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/25.jpg)
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
AbsoluteLayout
25
![Page 26: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/26.jpg)
AbsoluteLayout
26
![Page 27: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/27.jpg)
AbsoluteLayout
Atributos
27
![Page 28: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/28.jpg)
Dimensões
Dimensão Descrição
px (pixels) pixels reais da tela
in (polegadas) baseado no tamanho físico da tela
mm (milímetro) baseado no tamanho físico da tela
pt (pontos_ 1 pt = 1/72 in.
dp/dip (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
![Page 29: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/29.jpg)
Exercício - AbsoluteLayout
Adicione outro XML de layout ao projeto (absolutelayout.xml) <?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/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
![Page 30: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/30.jpg)
Layout composto
Observe que layouts podem ser aninhados (colocados
dentro de outro)
30
![Page 31: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/31.jpg)
Aninhando Layouts para obter
layouts complexos
31
![Page 32: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/32.jpg)
Exercício - ComplexLayout
32
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="http://schemas.android.com/apk/res/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 ….
![Page 33: Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para componentes visuais Desenha na tela através do método onDraw(Canvas) Ancestral de](https://reader033.vdocuments.us/reader033/viewer/2022043020/5f3c7a7116cf312d596c8216/html5/thumbnails/33.jpg)
Exercício - ComplexLayout
33
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>