Android - Design de IU

Neste capítulo, veremos os diferentes componentes da IU da tela do Android. Este capítulo também cobre as dicas para fazer um design de IU melhor e também explica como projetar uma IU.

Componentes da tela da IU

Uma interface de usuário típica de um aplicativo Android consiste em uma barra de ação e na área de conteúdo do aplicativo.

Barra de ação principal
Ver controle
Área de conteudo
Barra de ação dividida

Esses componentes também são mostrados na imagem abaixo -

Compreendendo os componentes da tela

A unidade básica do aplicativo Android é a atividade. Uma IU é definida em um arquivo xml. Durante a compilação, cada elemento no XML é compilado em uma classe GUI Android equivalente com atributos representados por métodos.

Exibir e Exibir grupos

Uma atividade consiste em visualizações. Uma visualização é apenas um widget que aparece na tela. Pode ser botão, etc. Uma ou mais visualizações podem ser agrupadas em uma GroupView. Exemplo de ViewGroup inclui layouts.

Tipos de layout

Existem muitos tipos de layout. Alguns dos quais estão listados abaixo -

Layout Linear
Layout absoluto
Layout da mesa
Layout da moldura
esquema relativo

Layout Linear

O layout linear é dividido em layout horizontal e vertical. Isso significa que ele pode organizar visualizações em uma única coluna ou em uma única linha. Aqui está o código do layout linear (vertical) que inclui uma visualização de texto.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

O AbsoluteLayout permite que você especifique a localização exata de seus filhos. Pode ser declarado assim.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

O TableLayout agrupa visualizações em linhas e colunas. Pode ser declarado assim.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

Esquema relativo

O RelativeLayout permite que você especifique como as visualizações filhas são posicionadas em relação umas às outras. Ele pode ser declarado assim.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

O FrameLayout é um espaço reservado na tela que você pode usar para exibir uma única visualização. Pode ser declarado assim.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Além desses atributos, existem outros atributos que são comuns a todas as visualizações e grupos de visualizações. Eles estão listados abaixo -

Sr. Não	Ver & descrição
1	layout_width Especifica a largura do View ou ViewGroup
2	layout_height Especifica a altura do View ou ViewGroup
3	layout_marginTop Especifica o espaço extra na parte superior do View ou ViewGroup
4	layout_marginBottom Especifica espaço extra na parte inferior do View ou ViewGroup
5	layout_marginLeft Especifica o espaço extra no lado esquerdo do View ou ViewGroup
6	layout_marginRight Especifica o espaço extra no lado direito do View ou ViewGroup
7	layout_gravity Especifica como as vistas filhas são posicionadas
8	layout_weight Especifica quanto espaço extra no layout deve ser alocado para a Visualização

Unidades de medida

Ao especificar o tamanho de um elemento em uma IU do Android, você deve se lembrar das seguintes unidades de medida.

Sr. Não	Unidade e descrição
1	dp Pixel independente de densidade. 1 dp é equivalente a um pixel em uma tela de 160 dpi.
2	sp Pixel independente de escala. Isso é semelhante ao dp e é recomendado para especificar tamanhos de fonte
3	pt Ponto. Um ponto é definido como 1/72 de polegada, com base no tamanho físico da tela.
4	px Pixel. Corresponde a pixels reais na tela

Densidades de tela

Sr. Não	Densidade e DPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

Otimizando layouts

Aqui estão algumas das diretrizes para a criação de layouts eficientes.

Evite aninhamento desnecessário
Evite usar muitas visualizações
Evite aninhamento profundo