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
<?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>

 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
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:
<?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>

 Modifique o layout acima usando outros atributos

 Adicione mais um ImageView.
 Dica: é possível usar "bottom|right" em layout_gravity

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)
<?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>

(continua...)
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
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
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
 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 ….

32
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