Views Interface Gráficabacala/ANDROID/2-Interface Gráfica.pdf · O que é a View Classe para...

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>