Programação V

Android - Java

Pedro Mbote
Sumário

Gerenciadores de layout

2
Gerenciadores de layout

❑ São componentes que organizam os elementos visuais tanto no

sentido horizontal quanto no vertical, bem como em linhas e
colunas.

❑ Esses componentes podem receber outros componentes dentro

deles e ajustar automaticamente sua aparência.

❑ São herdados diretamente da classe android.view.ViewGroup.

3
Gerenciadores de layout

4
Gerenciadores de layout

●
View

● A classe android.view.View é a classe mãe

de todos os componentes visuais do
Android.

Cada● subclasse de View precisa

implementar o método onDraw(Canvas)
para desenhar o componente na tela.

5
Gerenciadores de layout

●
ViewGroup
● A classe android.view.ViewGroup é
a classe mãe de todos os
gerenciadores de componentes
visuais do Android.

6
Gerenciadores de layout

● Componentes

Widgets Layouts

Componentes simples Componentes robustos

x
que herdam que herdam diretamente
diretamente da classe da classe ViewGroup.
View.

Ex.: Button, TextView, Ex.: LinearLayout,

ImageView. RelativeLayout
TableLayout.

7
Dúvidas
LinarLayout

●
Componentes – LinearLayout

●É utilizado para distribuir os componentes na

vertical ou horizontal (por padrão).
A classe android.widget.LinearLayout organiza a
orientação através do atributo
android:orientation.

O alinhamento dos componentes dentro dele é

feito pelo atributo android:layout_gravity.

O atributo android:layout_weigth distribui os

elementos na tela pelo peso (porcentagem). O 9
LinearLayout

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

10
LinearLayout

11
LinearLayout

▶ Atributos

12
LinarLayout

●
Componentes: LinearLayout

13
Dúvidas
RelativeLayout
●
Componentes –RelativeLayout

● A classe android.widget.RelativeLayout
permite posicionar um componente relativo a outro, por exemplo, abaixo,
acima ou ao lado de um componente já existente.

15
RelativeLayout

▶ 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

16
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.

17
RelativeLayout

18
RelativeLayout
RelativeLayout
▶ Atributos

19
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" />

20
RelativeLayout

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

21
RelativeLayout

● Componentes: RelativeLayout

22
Dúvidas
TableLayout

● Componentes –TableLayout

●É filho do LinearLayout, usado para organizar

os elementos como uma tabela: com linhas e
colunas.

●
A classe android.widget.TableLayout é uma das
mais úteis para construir telas de formulários.
●

Cada linha da tabela é formada por um

componente android.widget.TableRow
●

O atributo android:strechColumns
expande(estica) a coluna, como um coslpan faz
no HTML. 24
TableLayout

▶ Propriedades

▶ stretchColumns: a coluna ocupa o espaço disponível na tela

utilizando para tabelas com somente uma coluna.
▶ shrinkColumns: faz um ajuste na largura da coluna
impedindo que elementos deixem de ser exibidos.

25
TableLayout

▶ Atributos

26
TableLayout

27
TableLayout

● Componentes: TableLayout

28
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...) 29
Dúvidas
FrameLayout

● Componentes
–

FrameLayout
● A classe android.widget.FrameLayout é o tipo mais comum e mais
simples de layout.
● Funciona como uma pilha, onde uma view fica por cima da outra.
● A posição visual é configurada no atributo android:layout_gravity.

31
FrameLayout

● Componentes:
FrameLayout

32
FrameLayout

● Componentes: FrameLayout

33
Dúvidas
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

35
AbsoluteLayout

36
AbsoluteLayout

▶ Atributos

37
AbsoluteLayout

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.

38
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"
39
android:layout_x="90px"
Dúvidas
Layout composto

▶ Observe que layouts podem ser aninhados (colocados dentro de

outro)

41
Layout composto

420
Layout composto
▶ 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 ….

43
Layout composto
▶ 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>
44
Dúvidas
Próxima aula

❑ Widgets
Atenção
Referências

● Google and Open Handset Alliance n.d. Android API Guide.

http://developer.android.com/guide/index.html.

● Google and Open Handset Alliance n.d. Android training guide.

http://developer.android.com/training/index.html.

● Lecheta, R. R. Google Android: Aprenda criar plicações para dispositivos móveis

com o Android SDK. 3ª edição. São Paulo: Novatec Editora, 2013.