Android - Personalizando o “Spinner”

Muitas vezes temos a necessidade de personalizar componentes ao decorrer do desenvolvimento de algum projeto. Na realidade é isto que deixa nosso software com um lay-out diferente dos outros. Quando trabalhamos com a programação para Android é inevitável não nos deparar com uma situação destas. Neste artigo irei personalizar um dos principais componentes, o “Spinner”. Ele fornece uma maneira rápida de selecionar um valor a partir de um conjunto de valores. No estado padrão, um “Spinner” mostra seu valor atualmente selecionado. Ao selecioná-lo é exibido um Menu suspenso com todos os outros valores disponíveis, a partir do qual o usuário pode selecionar um novo. Ele se parece com o “Combobox” do Delphi ou o “DropDownList” da plataforma .Net.

Então chega de conversa e vamos por a mão na massa.

Criando um Exemplo Prático

É importante sabermos que para efetuarmos formatações de tamanho, cor ou estilos em geral deste tipo de componente exige configurações diferenciadas, para isto devemos criar um arquivo específico (XML) próprio para cada tipo de configuração. Para fins didáticos, o exemplo se dividirá em 3 (três) etapas, sendo:

1-) Personalização geral do componente;

2-) Personalização do Item do componente;

3-) Personalização para inserção de imagem no item do componente.

O primeiro passo seria criar a Atividade Principal clicando no menu “File/New/Android Application Project” para criar um novo projeto. Na Tabela 1 estão as principais configurações.

Propriedade	Valor	Descrição
Activity Name	MainActivity	Nome da Atividade
Layout Name	Activity_main	Nome do Layout
Navigation Type	None	Tipo de navegação

Tabela 1. Configurações Iniciais do Projeto.

Classe “Cidades.java”

Devemos também programar uma classe padrão que irá nos retornar um Conjunto de valores. No caso nesta classe foram cadastradas algumas cidades de exemplo.

Veja abaixo o código da classe ”Cidades.java”.

package com.example.android_spinner;

import java.util.ArrayList;

public class Cidades

{

     public ArrayList<String> RetornarCidades;

        

     public Cidades()

     {

         RetornarCidades = new ArrayList<String>();

         RetornarCidades.add("AVARÉ");

         RetornarCidades.add("BOTUCATU");

         RetornarCidades.add("CERQUEIRA CÉSAR");

         RetornarCidades.add("FARTURA");

         RetornarCidades.add("ITATINGA");

         RetornarCidades.add("ITAÍ");

         RetornarCidades.add("PIRAJU");

         RetornarCidades.add("SÃO PAULO");

     }

}

Listagem 01: Classe “Cidades.java”.

A função desta classe é nos retornar um “ArrayList” dos valores cadastrados no método “Construtor”. Veremos mais adiante sua utilização.

Activity_Main.xml

O rosto principal do exemplo será composto por 3 (três) Componentes “Spinners”. Ver Imagem 01.

Figura 01: Activity_Main.xml.

O código XML correspondente: (Listagem 02)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <Spinner

        android:id="@+id/spinner1"

        android:layout_width="400dp"

        android:layout_height="50dp"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="22dp" />

    <Spinner

        android:id="@+id/spinner2"

        android:layout_width="400dp"

        android:layout_height="50dp"

        android:layout_alignLeft="@+id/spinner1"

        android:layout_below="@+id/spinner1"

        android:layout_marginTop="42dp" />

    <Spinner

        android:id="@+id/spinner3"

        android:layout_width="400dp"

        android:layout_height="70dp"

        android:layout_alignLeft="@+id/spinner2"

        android:layout_below="@+id/spinner2"

        android:layout_marginTop="58dp" />

</RelativeLayout>

Listagem 02: XML da tela principal.

1-) Personalização geral do componente

Para criar o arquivo XML clique com o botão direito sobre o caminho “../res/layout” escolhendo a opção “New/Other/Android XML File”. Ver Imagem 02.

Figura 02: Criando o arquivo de configuração.

Defina o nome para o arquivo como: “spinner_theclub.xml” (Este será o nome utilizado como referência mais adiante) Adicionaremos o código para aumentar o tamanho da fonte para “30sp” (textSize) e definirmos a cor para Vermelho (textColor). Note que estamos trabalhando como referência um componente do tipo “TextView”, ou seja, todos os atributos desta classe serão encapsulados para em seguida implementarmos no “Spinner”. Listagem 03.

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/text1"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:textSize="30sp"

    android:textColor="#ff0123" />

Listagem 03: Código XML do “Spinner_theclub”.

2-) Personalização do Item do componente

Devemos seguir os mesmos passos descritos anteriormente, a diferença deste é que definiremos outro nome para o arquivo, como: “spinner_dropdown_theclub.xml” e utilizaremos alguns atributos da classe “CheckedTextView”. Os principais são: “singleline” (Itens do “Spinner” com apenas uma linha) e “textColor” (Cor da Fonte). Ver Listagem 04.

<?xml version="1.0" encoding="utf-8"?>

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/text1"

    style="?android:attr/spinnerDropDownItemStyle"

    android:singleLine="true"

    android:layout_width="match_parent"

    android:layout_height="?android:attr/listPreferredItemHeight"

    android:ellipsize="marquee"

    android:textColor="#ee66ff"/>

Listagem 04: Código XML do “Spinner_dropdown_theclub”.

3-) Personalização para inserção de imagem no item do componente

Por padrão, quando criamos um novo projeto no Android temos uma imagem chamada “ic_launcher.png” localizada no diretório “Drawable”. Utilizaremos esta para fins de aprendizado. Teremos que utilizar o “TableLayout” seguido de uma “TableRow”(Através destes componentes que conseguiremos concatenar dois tipos de valores). Dentro dele utilizaremos uma classe “ImageView” para recuperarmos a imagem outra “TextView” para atribuirmos os valores. Dentro desta segunda classe é primordial utilizar as propriedades “Text” e “Id”, pois é a partir delas que interligamos nossas configurações mais adiante. Ver Listagem 05 para melhores detalhes.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

                     android:orientation="vertical"

                     android:layout_width="fill_parent"

                     android:layout_height="fill_parent">

<TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10px">

        <ImageView android:layout_width="32sp" android:src="@drawable/ic_launcher" android:layout_height="32sp" />

        <TextView android:textSize="22sp" android:text="Cidade" android:textStyle="bold" android:layout_width="fill_parent" android:id="@+id/SpinnerCidadeItem" android:layout_height="fill_parent" android:paddingLeft="5sp" />

</TableRow>

</TableLayout>

Listagem 05: Código XML do “Spinner_imagem_theclub”.

Ao término o projeto terá a seguinte estrutura, Ver Imagem 03.

Figura 03: Arquivos do Exemplo.

MainActivity.java

Para cada exemplo achei melhor criar um Procedimento. O projeto será dividido em 4 (quatro) Procedimentos, sendo:

- InicializaListeners(): Responsável por inicializar os componentes “Spinners” e o objeto “Cidades”.

- ValorPersonalizado(): Personalizar os valores gerais do “Spinner”. (“Spinner_theclub.xml”)

- ItemPersonalizado(): Personalizar especificamente os itens do “Spinner”. (“Spinner_dropdown_theclub.xml”)

- ImagemItemPersonalizado(): Utilizar uma imagem no “Spinner”. (“Spinner_imagem_theclub.xml”)

package com.example.android_spinner;

Utilizaremos algumas bibliotecas adicionais para desenvolver este exemplo, veja abaixo:

import java.util.ArrayList;

import java.util.HashMap;

import android.os.Bundle;

import android.app.Activity;

import android.widget.ArrayAdapter;

import android.widget.SimpleAdapter;

import android.widget.Spinner;

public class MainActivity extends Activity

{

    

     private Spinner spn1, spn2,spn3;

     private Cidades cidades;

Criamos 3 (três) variáveis privadas do tipo “Spinner” e outra para a classe “Cidades”.

     @Override

     protected void onCreate(Bundle savedInstanceState)

     {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         InicializaListeners();

         ValorPersonalizado();

         ItemPersonalizado();

         ImagemItemPersonalizado();

     }

No método OnCreate() é onde invocaremos os procedimentos descritos anteriormente.

    

     public void InicializaListeners()

     {

          spn1 = (Spinner) findViewById(R.id.spinner1);

          spn2 = (Spinner) findViewById(R.id.spinner2);

          spn3 = (Spinner) findViewById(R.id.spinner3);

          cidades = new Cidades();

     }

    

Como o próprio nome já diz, inicializamos todas as variáveis declaradas anteriormente com o método “FindViewById”.

     public void ValorPersonalizado()

     {       

         ArrayAdapter<String> arrayAdapter1 = new ArrayAdapter<String>(this,R.layout.spinner_theclub, cidades.RetornarCidades);

         spn1.setAdapter(arrayAdapter1);

     }

A Classe “ArrayAdapter<string>” receberá a lista de cidades cadastradas na classe Cidades junto com as configurações. O primeiro parâmetro é o Contexto da aplicação, o segundo seria o “XML” criado por nós (É neste exato momento que nosso “Spinner” assumirá o formato que desejamos) e o último valor seria a lista de cidades. Definimos para o componente usando o método “setAdapter”. Ver Imagem 04.

Figura 04: Método ValorPersonalizado().

     public void ItemPersonalizado()

     {

         ArrayAdapter<String> arrayAdapter2 = new ArrayAdapter<String>(this,R.layout.spinner_theclub, cidades.RetornarCidades);

         arrayAdapter2.setDropDownViewResource(R.layout.spinner_dropdown_theclub);

         spn2.setAdapter(arrayAdapter2);

     }

Nesta função teremos como base o item anterior, personalizando o valor e o item selecionado. O método “setDropDownViewResource()” irá carregar o arquivo de configuração “spinner_dropdown_theclub”. Ver Imagem 05.

 

Figura 05: Método ItemPersonalizado().

     public void ImagemItemPersonalizado()

     {

ArrayList<HashMap<String, String>> alist = new  ArrayList<HashMap<String, String>>();

HashMap<String, String> map = new HashMap<String, String>();

          

for(int i=0; i < cidades.RetornarCidades.size(); i++)

        {

           map = new HashMap<String,String>();

map.put("Cidades", cidades.RetornarCidades.get(i).toString());

             alist.add(map);

          }

        

        SimpleAdapter simpleAdapter = new SimpleAdapter(

this, alist,R.layout.spinner_imagem_theclub, new String[] {"Cidades"},

          new int[] {R.id.SpinnerCidadeItem});

        spn3.setAdapter(simpleAdapter);

     }

}

Para inserirmos uma imagem no “Spinner”, teremos um trabalho a mais para fazer. Primeiramente devemos declarar um “ArrayList” utilizando o tipo de dados “HashMap”. Quando utilizamos este tipo devemos obrigatoriamente informar o par “chave/valor”. Para preencher os itens do “Spinner” faremos um laço e em seguida usar a classe “SimpleAdapter” contendo os parâmetros: - Contexto da aplicação, - o “Arraylist” com os campos chave/valor, - o arquivo de configuração “spinner_imagem_theclub.xml”, a chave “Cidades” e por final o “SpinnerCidadeItem” contido no arquivo de configuração (Nesta referência é onde será armazenada os dados oriundos do “ArrayList”). Ver Imagem 06.

Figura 06: Método ImagemItemPersonalizado().

Conclusões

A linguagem Java + XML nos proporciona diversos tipo de recursos no desenvolvimento de aplicativos para a plataforma Android. Neste artigo, achei necessário explorar um pouco mais deste componente, o “Spinner”. O “Spinner” é um dos componentes mais utilizados quando precisamos retornar dados de diversas fontes (Neste artigo usamos uma classe com dados estáticos para esta tarefa). Pudemos “enfeitar” e deixar com uma aparência muito mais agradável alterando tamanho e cor de fontes, Imagens, estilos, entre outras coisas. Vou ficando por aqui, Abraços e até o mês que vem!