Interface Grfica

Interfaces grficas

Viso geral
Classe
A

View

classe para componentes visuais

Desenha

na tela atravs do mtodo onDraw(Canvas)

Widgets
Classe

O que a View

Classe para componentes visuais

Desenha na tela atravs do mtodo onDraw(Canvas)

Ancestral de todos os componentes visuais de uma

aplicao Android.

Tipos de componentes:
Widgets

Gerenciadores

de layout

A classe ViewGroup

A classe ViewGroup a classe me de todos os

gerenciadores de layout. Os gerenciadores de layout
so utilizados para organizar a disposio dos
componentes na tela.

Como referenciar recursos no XML

Drawable:

Identificadores:

Definio: android:id="@+id/identificador"

Referncia: android:layout_below="@id/identificador"

Strings:

android:src="@drawable/nome_drawable"

android:text="@string/nome_string"

Cores:

Forma direta: android:textColor="#RRGGBB"

Forma indireat: android:textColor="@color/nome_cor"

Estilos:

style="@style/nome_estilo

Interfaces grficas - Layouts

Opes para definio 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

cdigo 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 espao
da tela.

Componentes so organizados em pilha

O ltimo componente adicionado aparece na frente

FrameLayout

FrameLayout

Atributos

Exerccio - FrameLayout
Crie um projeto chamado LayoutSamples
Substitua o contedo 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: possvel usar "bottom|right" em layout_gravity

10

LinearLayout

Componentes so organizados lado a lado

Organiza os elementos na vertical ou na horizontal (padro).

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 nmero, fill_parent( ocupa o espao
disponvel no elemento pai) e wrap_content ocupa apenas o espao
necessrio 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

Exerccio - LinearLayout

Adicione o arquivo linearlayout.xml a seguir

No esquea 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="Descrio 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 espao disponvel 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

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

Exerccio - 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="Descrio curta" />
</TableRow>
<TableRow>
<TextView android:text="Produto B" />
<TextView android:text="Este produto possui
uma descrio muito grande e no 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 espao na

margem superior do componente.

layout_marginRight

: Utilizado para definir um espao na

margem direita do componente.

layout_marginLeft

: Utilizado para definir um espao na

margem esquerda do componente.

21

RelativeLayout

22

RelativeLayout
Atributos

23

Exerccio - 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="Usurio:" />
<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 posio exata dos componentes

Permite posicionar os componentes, fornecendo as

coordenadas x e y.

Pode gerar pssimos resultados em diferentes telas

Propriedades
layout_x

: define a posio na horizontal

layout_y:

define a posio na vertical

25

AbsoluteLayout

26

AbsoluteLayout

Atributos

27

Dimenses
Dimenso

Descrio

px (pixels)

pixels reais da tela

in (polegadas)

baseado no tamanho fsico da tela

mm (milmetro)

baseado no tamanho fsico da tela

pt (pontos_

1 pt = 1/72 in.

dp/dip

(Density-Independent Pixels) unidade abstrata baseada na

dendidade fsica da tela. Mantm 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 padro recomendado para

telefones celulares. Por exemplo: layout_width = 10sp.

28

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

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

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

/>
/>
/>
/>