Android Design: Componentes visuais da plataforma Android

Para quem está chegando de mundos um “pouco” mais limitados em relação à interface gráfica para dispositivos móveis como, por exemplo, o cenário encontrado no desenvolvimento de aplicativos para aparelhos celulares mais antigos, a plataforma Android é um verdadeiro paraíso. Com dezenas de componentes visuais sofisticados, com efeitos e muitas características disponíveis para serem personalizadas, a plataforma Android está se tornando uma referência na quantidade e na qualidade dos componentes visuais existentes.

Vale lembrar que os componentes visuais no Android são definidos a partir de tags no arquivo XML de layout, e possuem classes correspondentes para que possam ser utilizadas no código Java (Activity).

Para um melhor entendimento, pode-se dividir os componentes visuais em seis grupos:

• Views básicas: composto de componentes básicos, como caixa de texto e botões;

• Pickers Views: componentes especiais que permitem ao usuário selecionar os dados a partir de uma fonte de dados específica;

• Views de listas: componentes que mostram uma lista de informações;

• Views para imagens: componentes utilizados para tratamento e apresentação de imagens;

• Menus: formados por opções de menu;

• Extras: componentes especiais com funções muito específicas.

Em uma aplicação móvel, na maioria das vezes são utilizados apenas os componentes Views básicos, sendo que grande parte das necessidades em uma interface visual, como digitação de textos, caixas de escolhas, botões de opções, etc., são supridas com estes componentes.

Já vimos na Mobile uma série de artigos sobre componentes visuais básicos da plataforma Android, aqueles que são usados na maioria das aplicações móveis didáticas, como caixa de texto (EditText), texto estático (TextView) e botões (Button), sendo que estes componentes são usualmente utilizados nas aplicações Android para entrada, saída e processamento de dados.

Nesse artigo serão apresentados outros componentes da plataforma Android, como os componentes para seleção de valores RadioButton e RadioGroup, CheckBox e ToggleButton, componentes Pickers para tratamento de informações temporais, como DatePicker e TimePicker, o componente ImageButton e também componente de listas para apresentar e manipular informações, como ListView, Spinner e AutoCompleteTextView.

Para fazer uso dos componentes visuais avançados, deve-se iniciar um novo projeto Android. Utilizaremos o nome UsandoComponentesAvancados.

Para testar os componentes visuais, será desenvolvido um aplicativo simples, no qual será apresentado na tela o componente visual estudado e um botão que apresentará características deste componente em tempo de execução. A Listagem 1 apresenta o arquivo .xml referente à interface gráfica do aplicativo.

Listagem 1. activity_principal.xml – Interface gráfica do componente.

  01.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  02.      xmlns:tools="http://schemas.android.com/tools"
  03.      android:layout_width="fill_parent"
  04.      android:layout_height="fill_parent"
  05.      android:orientation="vertical"
  06.      tools:context=".PrincipalActivity" >
  07.  
  08.      <!—- declaração do componente visual aqui >
  09.      
  10.      <Button
  11.          android:id="@+id/btTestarComponente"
  12.          android:layout_width="wrap_content"
  13.          android:layout_height="wrap_content"
  14.          android:text="Testar Componente"
  15.          android:onClick="btTestarComponenteOnClick" />
  16.  
  17.  </LinearLayout>

A interface desenvolvida apresentará sempre dois componentes visuais na tela do device Android, ambos organizados por um gerenciador de layout LinearLayout (linha 01) ...