2-Interface Gráfica.pdf

8/9/2019 2-Interface Gráfica.pdf

1/33

Interface Gráfica


2/33

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


3/33

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


4/33

A classe ViewGroup

A classe ViewGroup é a classe mãe de todos osgerenciadores de layout. Os gerenciadores de layoutsão utilizados para organizar a disposição doscomponentes na tela.

4


5/33

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


6/33

Interfaces gráficas - Layouts Opções para definição do layout

Arquivos XML na pasta /res/layout

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


7/33

FrameLayout

Tipo mais comum e simples de layout, utilizado porum 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çoda tela.

Componentes são organizados em pilha O último componente adicionado aparece na frente

7


8/33

FrameLayout

8


9/33

FrameLayout

Atributos

9


10/33

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

10


11/33

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 vertica

ou horizontal

layout_heigth e Layout_width: especifica a altura do componentepode receber como entra um número, fill_parent( ocupa o espaçodisponível no elemento pai) e wrap_content ocupa apenas o espaçonecessário na tela

layout_gravity: utilizado para alinhar elementos na tela. Valor(top,botton,left, right, center, center_vertical, center_horizontal

11


12/33

LinearLayout

12


13/33

LinearLayout Atributos

Pesos

13


14/33

Exercício - LinearLayout Adicione o arquivo linearlayout.xml a seguir

Não esqueça de fazer setContentView(R.layout.linearlayout);

14


15/33

TableLayout

É filho do LinearLayout e pode ser utilizado paraorganizar 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 natela. Utilizado para tabelas com somente uma coluna

shrinkColumns: faz um ajuste na largura da colunaimpedindo que elementos deixem de ser exibidos.

15


16/33

TableLayout

16


17/33

TableLayout

Atributos

17


18/33

Exercício - TableLayout

Adicione outro XML de layout ao projeto (tablelayout.xml)

(continua...)


19/33

Exercício - TableLayout

19


20/33

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


21/33

RelativeLayout

layout_alignParentTop : Alinha ao topo do componenteindicado

layout_alineParentBotton : Alinha abaixo do componenteindicado

layout_marginTop : Utilizado para definir um espaço namargem 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

R l i L


22/33

RelativeLayout

22

R l i L


23/33

RelativeLayout

Atributos

23

E í i R l ti L t


24/33

Exercício - RelativeLayout Adicione outro XML de layout ao projeto (relativelayout.xml)

24

Ab l t L t


25/33

Permite controlar posição exata dos componentes

Permite posicionar os componentes, fornecendo ascoordenadas 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

Ab l t L t


26/33

AbsoluteLayout

26

Ab l t L t


27/33

AbsoluteLayout

Atributos

27

Dimensões


28/33

DimensõesDimensão Descrição

px (pixels) pixels reais da tela

in (polegadas) baseado no tamanho físico da telamm (milímetro) baseado no tamanho físico da tela

pt (pontos_ 1 pt = 1/72 in.

dp/dip (Density-Independent Pixels) unidade abstrata baseada nadendidade física da tela. Mantém sempre o mesmo tamanhoreal, 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 paratelefones celulares. Por exemplo: layout_width = 10sp.

28

Exercício AbsoluteLayout


29/33

Exercício - AbsoluteLayout Adicione outro XML de layout ao projeto (absolutelayout.xm

29

Layout composto


30/33

Layout composto

Observe que layouts podem ser aninhados (colocadosdentro de outro)

30

Aninhando Layouts para obter


31/33

Aninhando Layouts para obterlayouts complexos

31

Exercício ComplexLayout


32/33

Exercício - ComplexLayout

32

Adicione outro XML de layout ao projeto (absolutelayout.xm

CONTINUA ….



33/33


33

Adicione outro XML de layout ao projeto (absolutelayout.xm

Documents

2-Interface Gráfica.pdf