Android – Aprendendo a utilizar o ListView

Olá amigos do The Club, estou de volta com artigos relacionados ao Sistema Android. Apresentarei o “ListView”, sendo um dos componentes  mais utilizados e importantes desta plataforma pelo fato de possibilitar a implementação de funções ligadas ao Banco de Dados, classes ou qualquer coleção de dados.

A documentação On-Line para o desenvolvedor Android descreve o ListView como um grupo de exibição que mostra uma lista de itens com possibilidade de rolagem. Os itens da lista são automaticamente inseridos usando um adaptador que utiliza o conteúdo de uma fonte (uma consulta qualquer ou com banco de dados), convertendo cada item resultando em uma visão que por fim é mostrado ao usuário final.

Este artigo possuirá dois exemplos, o primeiro utilizando a classe ArrayAdapter e o segundo faremos uma pequena implementação nesta classe para personalizar e montar um layout desejado pelo desenvolvedor. Seguiremos os mesmos passos descritos nos artigos anteriores, crie um novo Projeto em Android, defina o nome da atividade principal como “menuescolherAtividade”.

Criando a Classe Clientes

Os dados utilizados para testes nestes exemplos serão oriundos de uma classe com alguns atributos, ou seja, não teremos nenhum Banco de Dados. É importante entender que a origem dos dados não importa neste processo. A estrutura será da seguinte maneira:

Campo	Tipo
Id_Cliente	Integer
Nome	String
Tipo_Pessoa	String
Cnpj_Cpf	String
Email	String
Situacao	String

Para criar uma classe clique com o botão direito sobre o pacote principal escolha “New/Class” definindo como “Clientes.java”. Esta classe possuirá todas as propriedades descritas anteriormente com seus métodos “Getters and Setters”. Para criar estes métodos automaticamente, clique com o botão direito e escolha “Source/Generate Getters and Setters”. Este recurso do Eclipse possibilita a automatização de vários processos, incluindo este. Ver Imagem 01.

Figura 01: Geração automática dos Métodos “Getters and Setters”.   

package pct.Android_ListView;

import java.util.ArrayList;

import java.util.List;

public class Clientes

{

     private int Id_Cliente;

     private String Nome;

     private String Tipo_Pessoa;

     private String Cnpj_Cpf;

     private String Email;

     private String Situacao;

         

     public int getId_Cliente()

     {

         return Id_Cliente;

     }

     public void setId_Cliente(int id_Cliente)

     {

         Id_Cliente = id_Cliente;

     }

     public String getNome()

     {

         return Nome;

     }

     public void setNome(String nome)

     {

         Nome = nome;

     }

     public String getTipo_Pessoa()

     {

         return Tipo_Pessoa;

     }

     public void setTipo_Pessoa(String tipo_Pessoa)

     {

         Tipo_Pessoa = tipo_Pessoa;

     }

     public String getCnpj_Cpf()

     {

         return Cnpj_Cpf;

     }

     public void setCnpj_Cpf(String cnpj_Cpf)

     {

         Cnpj_Cpf = cnpj_Cpf;

     }

     public String getEmail()

     {

         return Email;

     }

     public void setEmail(String email)

     {

         Email = email;

     }

     public String getSituacao()

     {

         return Situacao;

     }

     public void setSituacao(String situacao)

     {

         Situacao = situacao;

     }

    

     public Clientes()

     {

        

     }

     public List<Clientes> ListarClientes()

     {

List<Clientes> lista_cliente = new ArrayList<Clientes>();

                  

         Clientes cliente = new Clientes();

         cliente.setId_Cliente(1);

         cliente.setNome("Thiago Montebugnoli");

         cliente.setEmail("thiago@theclub.com.br");

         cliente.setCnpj_Cpf("366.999.888-99");

         cliente.setTipo_Pessoa("F");

         cliente.setSituacao("1");

         lista_cliente.add(cliente);

        

         Clientes cliente1 = new Clientes();

         cliente1.setId_Cliente(2);

         cliente1.setNome("Marcos Cesar Silva");

         cliente1.setEmail("marcos@theclub.com.br");

         cliente1.setCnpj_Cpf("166.999.888-99");

         cliente1.setTipo_Pessoa("F");

         cliente1.setSituacao("1");

         lista_cliente.add(cliente1);

        

         Clientes cliente2 = new Clientes();

         cliente2.setId_Cliente(3);

         cliente2.setNome("Bruno");

         cliente2.setEmail("bruno@theclub.com.br");

         cliente2.setCnpj_Cpf("222.222.888-99");

         cliente2.setTipo_Pessoa("J");

         cliente2.setSituacao("1");

         lista_cliente.add(cliente2);

        

         Clientes cliente3 = new Clientes();

         cliente3.setId_Cliente(4);

         cliente3.setNome("Vitor");

         cliente3.setEmail("vitor@theclub.com.br");

         cliente3.setCnpj_Cpf("999.999.999-99");

         cliente3.setTipo_Pessoa("J");

         cliente3.setSituacao("0");

         lista_cliente.add(cliente3);

        

         Clientes cliente4 = new Clientes();

         cliente4.setId_Cliente(5);

         cliente4.setNome("Eduardo");

         cliente4.setEmail("eduardo@theclub.com.br");

         cliente4.setCnpj_Cpf("366.999.888-99");

         cliente4.setTipo_Pessoa("F");

         cliente4.setSituacao("0");

         lista_cliente.add(cliente4);

        

         Clientes cliente5 = new Clientes();

         cliente5.setId_Cliente(6);

         cliente5.setNome("The Club");

         cliente5.setEmail("suporte@theclub.com.br");

         cliente5.setCnpj_Cpf("41.789.789.0001/05");

         cliente5.setTipo_Pessoa("J");

         cliente5.setSituacao("1");

         lista_cliente.add(cliente5);

        

         Clientes cliente6 = new Clientes();

         cliente6.setId_Cliente(7);

         cliente6.setNome("Datasmart");

         cliente6.setEmail("datarmart@theclub.com.br");

         cliente6.setCnpj_Cpf("99.888.898.0001/01");

         cliente6.setTipo_Pessoa("J");

         cliente6.setSituacao("0");

         lista_cliente.add(cliente6);

                  

         return lista_cliente;

     }

}

No método ListarClientes()  é onde alimento esta classe com alguns dados aleatórios e retorno em seguida uma Lista de clientes, ou seja, retorno um conjunto de dados para a Classe Clientes, a qual servirá de exemplo para o uso de nossos exemplos.

Criando a tela principal

Em “res/layout” crie um XML e defina o nome como “menuescolher.xml”. Aproveite também e adicione alguns componentes: Um textBox, dois RadioButtons, Um Button e um ListView. Ver Imagem 02 do Lay-Out Sugerido.

Figura 02: Tela Principal.

Segue também a estrutura XML Correspondente:

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

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

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView android:typeface="sans"

    android:id="@+id/txtPesquisar"

    android:textAppearance="?android:attr/textAppearanceMedium"

    android:layout_width="200dp"

    android:text="Escolher ListView:"

    android:layout_height="wrap_content"

    android:layout_gravity="center"

    android:gravity="center">

    </TextView>

    <RadioGroup android:orientation="horizontal"

    android:id="@+id/rgEscolher"

    android:layout_height="wrap_content"

    android:layout_width="wrap_content"

    android:gravity="center"

    android:layout_gravity="center">

        <RadioButton android:checked="true"

        android:layout_width="wrap_content"

        android:typeface="sans"

        android:id="@+id/rbArrayAdapter"

        android:text="ArrayAdapter"

        android:layout_height="wrap_content">

        </RadioButton>

        <RadioButton android:layout_width="wrap_content"

        android:typeface="sans"

        android:id="@+id/rbTheClubAdapter"

        android:text="TheClubAdapter"

        android:layout_height="wrap_content">

        </RadioButton>

    </RadioGroup>

    <Button android:text="Listar Dados"

    android:onClick="Listar"

    android:id="@+id/btnListar"

    android:typeface="sans"

    android:layout_height="wrap_content"

    android:layout_gravity="center_horizontal"

    android:layout_width="120dp">

    </Button>

    <ListView android:layout_weight="1"

    android:layout_width="match_parent"

    android:layout_height="352dp"

    android:id="@+id/lstSimples">

    </ListView>

</LinearLayout>

Criando um exemplo simples

Na Atividade principal definida como: “menuescolherAtividade.java”, inicialmente importe algumas bibliotecas necessárias ao decorrer do desenvolvimento.

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.ListView;

import android.widget.RadioGroup;

public class menuescolherAtividade extends Activity

{

    RadioGroup rgEscolher;

    ListView lstView;

Criamos também algumas variáveis para serem inicializadas no evento “Oncreate()” da Atividade. O RadioGroup para escolher o tipo de visualização do ListView e o ListView que fará as devidas referências. 

   

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.menuescolher);

        InicializaListeners();

    }

     

No evento OnCreate() defina o Layout criado anteriormente e execute o método InicializaListeners(), o mesmo sendo responsável por atribuir os objetos às devidas variáveis.

       public void InicializaListeners()

      {

          rgEscolher = (RadioGroup) findViewById(R.id.rgEscolher);

          lstView = (ListView)  findViewById(R.id.lstSimples);

      }

        

      public void Listar(View v)

      {

          switch (rgEscolher.getCheckedRadioButtonId())

          {

              case R.id.rbArrayAdapter : ListarArrayAdapter();

             break;

                       

              case R.id.rbTheClubAdapter : ListarTheClubAdapter();

              break;

         }

      }

       

Já o método Listar() está ligado ao evento OnClick() do botão. Nesta rotina será feito um Switch/case para verificar qual RadioButton foi selecionado.

       public void ListarArrayAdapter()

      {

         Clientes clientes = new Clientes();

         List<Clientes> lista_clientes = clientes.ListarClientes();

        

         ArrayList<String> cli = new ArrayList<String>();

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

         {

String Id_Cliente = String.valueOf(lista_clientes.get(i).getId_Cliente();

                   String Nome = lista_clientes.get(i).getNome();

                 cli.add(Id_Cliente + " - "+ Nome);

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_2, android.R.id.text1, cli);

               lstView.setAdapter(arrayAdapter);

            }

      }

A função ListarArrayAdapter é a mais importante, pois é com ela que vamos atribuir os dados da classe Clientes ao ListView. Primeiramente instancie a classe Clientes e execute o método ListarClientes() atribuindo a uma variável do tipo List<Clientes>.  Aproveite para criar outra variável do tipo ArrayList que será responsável por armazenar nossos dados. Faremos um Loop para varrer os registros da variável lista_Clientes para obtermos o ID e o Nome concatenado utilizando o método get().

Armazenamos em uma variável do tipo ArrayAdapter<String>, passando por parâmetro: o contexto atual, o tipo de layout que teremos no ListView, o Tipo de Fonte utilizada e o ArrayList com os dados concatenados. Ao compilar e executar a aplicação, ela deverá ficar idêntica a Imagem 03.

Figura 03: Exemplo com ArrayAdapter.

Criando um exemplo personalizado

A Classe ArrayAdapter nos dá uma gama muito grande de possibilidades para implementar recursos personalizados ao ListView por exemplo. Nesta parte do artigo vou criar uma classe sobrescrevendo o método GetView(). Este método é o responsável por exibir os itens na tela, para isto vamos através dele criar um layout em XML específico para esta tarefa. Através deste arquivo vamos “Inflá-lo” e receber o resultado necessário. Dividiremos este processo em 3 etapas, sendo o primeiro responsável pela criação do Lay-Out, seguido pela Classe personalizada e sua devida utilização.

1 - Criando o “Lay-Out” personalizado 

Este lay-Out possuirá campos referentes ao Nome, Cnpf/Cpf, Email, Tipo de Pessoa e Situação do Cadastro. Para iniciar crie um arquivo XML e defina o nome como “theclubadaper.xml”, Adicionando 3 TextView, 2 RadioButtons e 1 CheckBox. Ver Imagem 04.

Figura 04: Lay-Out Sugerido.

A seguir o código XML correspondente.

<?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="70dip"

    android:paddingTop="5dip"

    android:paddingBottom="5dip" android:orientation="vertical">

   <LinearLayout android:id="@+id/linearLayout1"

   android:layout_width="wrap_content"

   android:layout_height="match_parent"

   android:orientation="horizontal">

       <LinearLayout android:orientation="vertical"

       android:layout_width="135dp"

       android:layout_height="match_parent">

           <TextView android:id="@+id/txtNome"

           android:layout_width="match_parent"

           android:layout_height="20dp">

           </TextView>

           <TextView android:id="@+id/txtEmail"

           android:layout_width="match_parent"

           android:layout_height="20dp">

           </TextView>

           <TextView android:id="@+id/txtCnpjCpf"

           android:layout_width="match_parent"

           android:layout_height="20dp">

           </TextView>

       </LinearLayout>

       <LinearLayout android:gravity="center_vertical"

       android:orientation="horizontal"

       android:layout_width="wrap_content"

       android:layout_height="match_parent">

           <RadioGroup android:layout_width="wrap_content"

           android:orientation="horizontal"

           android:layout_height="wrap_content"

           android:layout_marginRight="15dip"

           android:id="@+id/radios">

               <RadioButton android:layout_height="wrap_content"

               android:text="Física"

               android:id="@+id/rbFisica"

               android:layout_width="wrap_content"

               android:textSize="8dip">

               </RadioButton>

               <RadioButton android:layout_height="wrap_content"

               android:text="Jurídica"

               android:id="@+id/rbJuridica"

               android:layout_width="wrap_content"

               android:textSize="8dip">

               </RadioButton>

           </RadioGroup>

       </LinearLayout>

       <LinearLayout android:gravity="right|center_vertical"

       android:orientation="vertical"

       android:layout_width="40dip"

       android:layout_height="50dp">

           <TextView android:id="@+id/txtStatus"

           android:textSize="8dip"

           android:textAppearance="?android:attr/textAppearanceSmall"

           android:layout_width="wrap_content"

           android:layout_gravity="center_horizontal"

           android:text="Ativo"

           android:layout_height="wrap_content">

           </TextView>

           <CheckBox android:layout_width="wrap_content"

           android:id="@+id/cxSituacao"

           android:layout_height="wrap_content">

           </CheckBox>

       </LinearLayout>

   </LinearLayout>

</LinearLayout>

2 - Criando a Classe “theclubAdapter.java”

Para criar a classe “theclubAdapter.java” siga os mesmos passos descritos anteriormente clicando com o botão direito no item  “New/Class”. Importe os pacotes necessários e em seguida faça a herança para a classe “ArrayAdapter<Clientes>” para implementar os métodos necessários. Segue o código fonte comentado.

package pct.Android_ListView;

import java.util.List;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.CheckBox;

import android.widget.RadioButton;

import android.widget.TextView;

public class theclubadapter extends ArrayAdapter<Clientes>

{

    private final LayoutInflater inflater;

    private final int recursoId;

Variáveis utilizadas ao decorrer da implementação, sendo a primeira responsável por montar o Layout do ListView e a segunda sendo uma identificação do “theclubadapter.XML”.

public theclubadapter(Context context, int resource, List<Clientes> objects)

    {

       super(context, resource, objects);

       this.inflater = LayoutInflater.from(context);

       this.recursoId = resource;

    }

No constructor da classe passamos alguns parâmetros responsáveis respectivamente pelo Contexto, Identificação do Lay-out XML e a Lista contendo os dados dos Clientes.

     

    @Override

    public View getView(int position, View convertView, ViewGroup parent)

    {

        Clientes cliente = getItem(position);

       convertView = inflater.inflate(recursoId, parent, false);

TextView txtNome = (TextView) convertView.findViewById(R.id.txtNome);

TextView txtEmail = (TextView) convertView.findViewById(R.id.txtEmail);

TextView txtCnpjCpf = (TextView) convertView.findViewById(R.id.txtCnpjCpf);

RadioButton rbFisica = (RadioButton) convertView.findViewById(R.id.rbFisica);

RadioButton rbJuridica = (RadioButton) convertView.findViewById(R.id.rbJuridica);

CheckBox checkSituacao = (CheckBox)    convertView.findViewById(R.id.cxSituacao);

      

       txtNome.setText(cliente.getNome());

       txtEmail.setText(cliente.getEmail());

       txtCnpjCpf.setText(cliente.getCnpj_Cpf());

      

       if(cliente.getTipo_Pessoa() == "J")

       {

            rbJuridica.setChecked(true);

       }

       else

       {

            rbFisica.setChecked(true);

       }

      

       if(cliente.getSituacao() == "1" )

       {

            checkSituacao.setChecked(true);

       }

       else

       {

           checkSituacao.setChecked(false);

       }

      

       return convertView;

   }

}

Efetuamos a Sobrescrita do evento GetView(), é neste momento que montamos o lay-out desejado. Utilize a classe Clientes para obter o registro e logo em seguida utilizar o método inflate, responsável por "inflar" uma view e ter acesso aos seus atributos. Através da View capturada atribuímos cada campo para um tipo de variável e em seguida obtermos o resultado nestas mesmas variáveis. Os campos Nome, Email, Cnpj_Cpf apenas inserimos o valores, já para o Tipo de Pessoa fazemos um If identificando se é Jurídica ou Física e na Situação outro para verificar se o cliente está ativo ou não. Por final retornamos uma View para ser utilizada adiante.

3- Utilizando a Classe “theclubAdapter.java”

Esta é a parte mais fácil do artigo, utilize a mesma Atividade criada para programar o primeiro exemplo e crie uma função chamada ListarTheClubAdapter().

public void ListarTheClubAdapter()

{

      Clientes clientes = new Clientes();

List<Clientes> lista_clientes = clientes.ListarClientes();

ArrayAdapter<Clientes> ad = new theclubadapter(this,    R.layout.theclubadapter, lista_clientes);

      lstView.setAdapter(ad);

}

Nesta função instanciamos a classe clientes, jogamos em uma List<Clientes> e por final vamos fazer uso da classe “theclubadapter”, passando por parâmetro o contexto, o XML theclubadapter.xml e a lista de clientes. Por último atribuímos a um ListView. O resultado ficará idêntico ao da Figura 05.

Figura 05: Exemplo com TheClubAdapter.

Conclusão

O ListView se torna um componente indispensável quando trabalhamos com o Sistema Android se comparando ao DbGrid do Delphi, o GridView do Asp.Net. O ListView se destaca no aspecto de personalização do Lay-Out, sendo possível “brincar” da maneira e da forma que desejarmos.  Utiliza um “Adapter”, que trocando em miúdos seria um adaptador que usa o conteúdo vindo de uma fonte de dados, sendo que a mesma poderá vir de diversas origens. Espero que estes dois pequenos exemplos sirvam de base para o conhecimento básico aos senhores, Abraço e até o mês que vem!

Referências

http://developer.android.com/guide/topics/ui/layout/listview.html