views interface gráficabacala/android/2-interface gráfica.pdf · o que é a view classe para...
TRANSCRIPT
Views
Interface Gráfica
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
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
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
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
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
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
FrameLayout
8
FrameLayout
Atributos
9
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
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
LinearLayout
12
LinearLayout
Atributos
Pesos
13
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
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
TableLayout
16
TableLayout
Atributos
17
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
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
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
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
RelativeLayout
22
RelativeLayout
Atributos
23
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
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
AbsoluteLayout
26
AbsoluteLayout
Atributos
27
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
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
Layout composto
Observe que layouts podem ser aninhados (colocados
dentro de outro)
30
Aninhando Layouts para obter
layouts complexos
31
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 ….
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>