Tudo sobre ListView

Nota Importante: Recomendo que você ainda leia esse artigo.
No entanto, já existe um componente mais moderno para listagem de dados no Android, o RecyclerView.
Já escrevi sobre ele, segue o link abaixo: Artigo RecyclerView

Segue abaixo o artigo sobre ListView…

O ListView é possivelmente o componente de interface gráfica mais utilizado no desenvolvimento de aplicativos para o Android.

Por uma razão muito simples, ele é utilizado para listar os dados.

Sabe a lista de conversas que você encontra no seu aplicativo de bate papo? A lista de amigos que você vê no seu app de contatos? Pois é, ele utiliza esse componente o ListView.

Abaixo o link para a documentação oficial
Documentação oficial

Introdução

Antes de começarmos efetivamente tire um tempo para analisar o seu aplicativo favorito, procure alguma lista nele.
No meu caso, abri o Whats App, e fui redirecionado para a listagem de conversas.

Cada item da lista é uma Conversa, e é representado por um ImageView (A foto da pessoa na qual estou conversando) e dois TextView(O nome da pessoa que estou conversando e a última mensagem da conversa).

Refletindo sobre esse exemplo, podemos destacar duas questões que precisam ser respondidas, antes que comecemos a codificar a nossa lista.

Questão 1: Quais são os itens dessa lista? Que dados eu irei exibir?
No exemplo do Whats App, imagino que eles estão exibindo uma lista de Conversa, seria uma classe que teria as informações de uma conversa (participantes, data de criação, mensagens , dentre outras coisas).

Questão 2: Como queremos exibir esses itens para o usuário?
Vai ter imagem? Qual vai ser a cor? Onde os componentes vão ser disponibilizados?

Ao responder essas duas perguntas nosso trabalho vai estar quase pronto. Pois, o que realmente varia na lista é o item que vai ser exibido (É um carro? É uma pessoa? É um zombie?) e como ele vai ser exibido (Vai ter imagem ou vai ser apenas texto? O texto vai ficar abaixo da imagem? Qual vai ser a cor de fundo?).

Nota: Abaixo segue um site que exibe diversos exemplos de utilização do ListView:
http://android.inspired-ui.com/tagged/lists
Faça uso deste site (e outros relacionados a layout) sempre que for desenhar uma tela nova. Você vai encontrar vários exemplos que irão te inspirar a ter novas ideias no momento de criação de sua Interface Gráfica.

Então, antes de começar a codificar uma tela que contenha uma listagem de dados, pare um pouco e pense no que você deseja exibir e na forma na qual deseja mostrar esses itens para o usuário.

Começando pelo simples

O ListView é uma View que vai compor um determinado layout de uma tela.
Assim como declaramos um Button, TextView, EditText, ou qualquer outro componente gráfico no Layout XML, também declararemos o ListView.

Vamos a um exemplo simples de um layout com um ListView:

<LinearLayout 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:orientation="vertical">
 
    <ListView
        android:id="@+id/minha_lista"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

Este arquivo acima chamaremos de list_zombie.xml.

Acima podemos ver um típico Layout.XML que contem um ViewGroup ( LinearLayout ) e dentro deste ViewGroup temos o nosso ListView que recebeu o ID minha_lista.

Agora precisamos vincular este layout.xml a uma Activity, para termos acesso a este ListView e podermos colocar as informações nele.

Então vamos la, crie uma Activity de nome ListaZombies e coloque o seguinte código abaixo:

public class ListaZombies extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.list_zombie);
		ListView listView = (ListView) findViewById(R.id.minha_lista);
	}
}

O código acima demonstra como a nossa Activity ficou.

Nota: Escolher um bom nome para métodos, atributos e classes é uma boa prática de programação. O nome das classes devem condizer perfeitamente com o que elas fazem. No caso acima, logo ao ler o nome desta classe qualquer desenvolvedor saberá que ali será mostrado uma Lista de Zombies. Não faça abreviações, mais vale um nome longo que ajude a entender o código, do que um curto que não faz sentido nenhum.

Veja que vinculamos o layout.xml criado anteriormente através do método setContentView() e pegamos a referência do objeto ListView através do findViewById.
Seguindo adiante, agora que já temos o nosso ListView, precisamos criar uma classe que irá representar os itens que ficaram dentro desta Lista, no caso os zombies.

E aqui esta a nossa classe Zombie:

public class Zombie {

	private String nome;
	private int idade;
	private int imagem;

	public Zombie() {
	}

	public Zombie(String nome, int idade, int imagem) {
		super();
		this.nome = nome;
		this.idade = idade;
		this.imagem = imagem;
	}

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public int getIdade() {
		return idade;
	}

	public void setIdade(int idade) {
		this.idade = idade;
	}

	public int getImagem() {
		return imagem;
	}

	public void setImagem(int imagem) {
		this.imagem = imagem;
	}	

      @Override
	public String toString() {
		return nome;
	}
}

Agora precisamos criar objetos do tipo Zombie para adicionarmos eles em uma coleção como o ArrayList do Java.

Como podemos ver, para criar um Zombie, é necessário informar um nome, uma idade e uma imagem.

Fique livre para preencher esses dados com a sua imaginação.

No meu caso, a imagem eu peguei na internet, digitei Zombie Faces no Google Image e salvei alguns resultados que apareceram.
Coloquei as imagens na pasta drawable que fica na pasta res da estrutura do seu projeto, desse modo conseguirei pegar a referência delas na Activity através da classe R (A classe R que provê a ligação entre arquivos que estão no Resource com a parte Java do aplicativo).

Logo abaixo segue os métodos que vão criar os nossos zombies, ambos ficaram na nossa Activity ListaZombies:

 
private List<Zombie> gerarZombies() {
        List<Zombie> zombies = new ArrayList<Zombie>();
        zombies.add(criarZombie("Shane", 23, R.drawable.zombie_um));
        zombies.add(criarZombie("Hershel", 23, R.drawable.zombie_dois));
        zombies.add(criarZombie("Glen", 23, R.drawable.zombie_tres));
 
        return zombies;
    }
 
    private Zombie criarZombie(String nome, int idade, int image) {
        Zombie zombie = new Zombie(nome, idade, image);
        return zombie;
    }

 

Depois de criarmos a nossa lista de zombies, precisamos colocar esta lista no nosso ListView para mostrar os itens ao nosso usuário. Para fazermos isso teremos que fazer uso de uma estrutura do Android que se chama Adapter.

Documentação Oficial do Adapter

O Adapter recebe em seu construtor uma lista de dados tal como a nossa lista de zombies, e servirá como ponte entre os dados que queremos exibir e a nossa ListView.

O Adapter é uma interface do Android que é implementada por diversas classes da API do Android, como por exemplo a CursorAdapter que recebe em seu construtor um Cursor (classe do Android que armazena dados recuperados através de uma consulta ao banco de dados).

O Adapter mais comum é o ArrayAdapter justamente por ser o mais simples.
É ele que iremos utilizar junto ao nosso ListView, para exibirmos os nossos zombies, vejamos como fazer isso:

ArrayAdapter<Zombie> zombiesAdapter = new ArrayAdapter<Zombie>(this, android.R.layout.simple_list_item_1, zombies);
listView.setAdapter(zombiesAdapter);

Para criarmos o nosso ArrayAdapter tivemos que informar os seguintes dados:

– Um Context, no caso o this da própria Activity.

– Um layout, representa o layout de cada item da lista, nesse caso usamos um disponível na própria API do Android o android.R.layout.simple_list_item_1.

– Por último e mais importante, os dados, nesse caso a lista de zombies já preenchida.

A nossa Activity ListaZombies neste momento esta assim:

public class ListaZombies extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_zombie);

        ListView listView = (ListView)findViewById(R.id.minha_lista); 

        List<Zombie> zombies = gerarZombies();
        ArrayAdapter<Zombie> zombiesAdapter = new ArrayAdapter<Zombie>(this, android.R.layout.simple_list_item_1, zombies);
        listView.setAdapter(zombiesAdapter);

    }
 
    private List<Zombie> gerarZombies() {
        List<Zombie> zombies = new ArrayList<Zombie>();
        zombies.add(criarZombie("Shane", 23, R.drawable.zombie_um));
        zombies.add(criarZombie("Hershel", 23, R.drawable.zombie_dois));
        zombies.add(criarZombie("Glen", 23, R.drawable.zombie_tres));
 
        return zombies;
    }
 
    private Zombie criarZombie(String nome, int idade, int image) {
        Zombie zombie = new Zombie(nome, idade, image);
        return zombie;
    }
}

Se executarmos este código teremos o seguinte retorno:

Mas poxa vida, esta Lista ficou muito feia!
Só esta aparecendo os nomes dos zombies. Cadê as imagens? Porque não mostra tudo, nome, idade e a imagem do zombie!?

Bom, este é o exemplo mais simples de listagem de dados.
Tudo que esta sendo exibido se encontra no método toString() do objeto Zombie.
Se acrescentarmos no toString() a idade mais o nome, e logo em seguida executarmos novamente, seria exibido essas duas informações (porém tudo no mesmo TextView).

Mas o que precisamos mesmo é mudar o layout de cada item da lista, deixar mais a cara de uma lista de zombies, vejamos como fazer.

Customizando a UI dos itens da Lista

O primeiro passo para customizar um item de um ListView é definir como você quer que ele apareça na lista.
Pegue um lápis e um papel e desenhe como você quer que o item apareça na lista.

A imagem acima é o meu rascunho simples de layout do meu item de lista.

Podemos destacar os seguintes pontos neste esboço:

-A imagem do zombie no lado esquerdo. Essa imagem seria representada pelo componente do Android ImageView.

– O texto grande “Amazing Zombie” seria o nome do Zombie. É representando por um TextView assim como o texto embaixo sobre a idade.

Nota: Os textos chamam a atenção por causa do tamanho e da fonte, utilizei a fonte Papyros.
Para saber como usar fontes externas no Android leia este post:
http://www.androidhive.info/2012/02/android-using-external-fonts/

Agora que já sabemos como queremos os itens da nossa lista, vamos escrever o nosso layout xml com base no esboço acima.

Crie um novo layout XML de nome item_list_zombies.xml na pasta layout do seu projeto.

O código Layout.xml ficou assim:

 
<?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:background="@android:color/black"
    android:orientation="vertical" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:background="@android:color/white"
        android:orientation="horizontal" >
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/image_view_zombie"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:adjustViewBounds="true" />
        </LinearLayout>
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
 
            <TextView
                android:id="@+id/text_view_nome_zombie"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="32sp" />
 
            <TextView
                android:id="@+id/text_view_idade_zombie"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Repare que cada componente que criamos nesse layout possui ID’s que serão utilizados para referenciarmos eles no Adapter e preenche-los com as informações do zombies.

Seguindo adiante, precisamos criar um ArrayAdapter próprio para a nossa necessidade.

Chamaremos esse Adapter de ListaZombiesAdapter, essa classe herdará funcionalidades do ArrayAdapter do Android que usamos anteriormente.

A única coisa que temos que personalizar nesse Adapter é a parte de visualização de cada item, por isso iremos sobrescrever apenas o método, o getView.

Este método da classe ArrayAdapter, tem a responsabilidade de gerar um objeto View para cada item da lista de dados que lhe for passada.
Para fazer isso ele será executado dentro de uma estrutura de repetição do ListView do Android, de modo que cada item da lista passará por ele. Mas não se preocupe com isso, o Android faz isso “por baixo dos panos”.

Dentro desse método nos apenas “inflamos” (Ação de pegar um layout XML e transforma-la em um objeto View do Android) o layout recém criado que chamei de item_list_zombies.xml e preenchemos os componentes de interface gráfica que estão nesse layout com as informações de cada zombie.

Nosso Adapter customizado ficou assim:

 
public class ListaZombiesAdapter extends ArrayAdapter<Zombie> {
 
    private Context context;
    private List<Zombie> zombies = null;
 
    public ListaZombiesAdapter(Context context,  List<Zombie> zombies) {
        super(context,0, zombies);
        this.zombies = zombies;
        this.context = context;
    }
 
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        Zombie zombie = zombies.get(position);
 
        if(view == null)
            view = LayoutInflater.from(context).inflate(R.layout.item_list_zombies, null);
 
        ImageView imageViewZombie = (ImageView) view.findViewById(R.id.image_view_zombie);
        imageViewZombie.setImageResource(zombie.getImagem());
 
        TextView textViewNomeZombie = (TextView) view.findViewById(R.id.text_view_nome_zombie);
        textViewNomeZombie.setText(zombie.getNome());
 
        TextView textViewIdade = (TextView)view.findViewById(R.id.text_view_idade_zombie);
        String textoIdade = String.valueOf(zombie.getIdade()) + " " + context.getString(R.string.anos_idade);
        textViewIdade.setText(textoIdade);
 
        return view;
    }
}

Agora que criamos o Adapter customizado, vamos vincula-lo a nossa Activity, substituindo o ArrayAdapter antigo por esse novo.

O novo onCreate da nossa Activity ListaZombies ficou assim:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_zombie);
 
        ListView listView = (ListView)findViewById(R.id.minha_lista); 
        List<Zombie> zombies = gerarZombies();
 
        final ListaZombiesAdapter zombiesAdapter = new ListaZombiesAdapter(this,  zombies);
        listView.setAdapter(zombiesAdapter);
    }

Se executarmos o aplicativo novamente teremos o seguinte resultado:

Agora você já sabe como fazer uma lista bonita no Android. 🙂

Mas existe mais coisas a serem aprendidas sobre listagem de dados nessa tecnologia.
Como faremos para executar determinada ação quando alguém selecionar algum elemento da lista?

O Android adotou o padrão de projetos Observer para atender esta necessidade.
Assim como fazemos com qualquer View, como o Button, ImageView, TextView dentre outros.

Devemos passar para o nosso ListView um objeto que implementa a interface chamada de OnItemClickListener, fazemos essa referencia através do métodos setOnItemClickListener presente no nosso ListView.

Esta interface(OnItemClickListener) obriga a implementação de um método apenas, o onItemClick.
Este método será executado, sempre quando alguém selecionar um elemento de nossa lista.

A  implementação logo abaixo exemplifica o que acabamos de explicar.
Este código esta presente no método onCreate da nossa Activity(ListaZombies).

listView.setOnItemClickListener(new OnItemClickListener() {
 
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
      Zombie zombie = zombiesAdapter.getItem(position);
      Toast.makeText(ListaZombies.this,zombie.getNome(), Toast.LENGTH_SHORT).show();
    }
});

Antes de prosseguir, faça um teste, selecione um item da lista e veja se apareceu uma mensagem com o nome do zombie que você selecionou.

Conhecendo a ListActivity

A nossa classe ListaZombies esta herdando funcionalidades da classe Activity.
Porém, o uso de lista é tão comum, que o Android tem uma Activity própria para tratar listagem de dados é a ListActivity.

Documentação Oficial da ListActivity

A ListActivity é uma classe do Android que herda da classe Activity e possui funcionalidades úteis para listagem de dados.

Para utilizar essa classe no seu layout XML o ListView deve ter o ID próprio da API do Android o @android:id/list fazendo isso o Android já faz a ligação direta da sua ListActivity com o ListView do seu layout.xml sem precisar usar o método findViewById.

Outra funcionalidade interessante provida pelo ListView, é que podemos definir em nosso layout uma View que será exibida apenas quando a lista esta vazia.
Basta criar uma View e passar o seguinte id @android:id/empty, fazendo isso estamos assumindo que sempre que o ListView não tiver qualquer dados esse componente irá aparecer.

Exemplo de utilização

Supondo que a nossa lista de zombies seja preenchida on-line. Poderíamos ter um ViewGroup com o ID empty, e este ViewGroup teria um TextView com os dizeres: “Nenhum item encontrado, tente novamente” e abaixo dele teria um Button com os dizeres “Tente Novamente”. Quando esse botão for clicado uma nova chamada ao servidor seria feita com o intuito de preencher a lista.

Exemplificando o uso da ListActivity

Veja como ficou a nossa classe ListaZombies agora herdando da classe ListActivity.

public class ListaZombies extends ListActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_zombie);
 
        List<Zombie> zombies = gerarZombies();
 
        final ListaZombiesAdapter zombiesAdapter = new ListaZombiesAdapter(this,  zombies);
        setListAdapter(zombiesAdapter);
 
        getListView().setOnItemClickListener(new OnItemClickListener() {
 
            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
              Zombie zombie = zombiesAdapter.getItem(position);
              Toast.makeText(ListaZombies.this,zombie.getNome(), Toast.LENGTH_SHORT).show();
            }
        });
    }
 
    private List<Zombie> gerarZombies() {
        List<Zombie> zombies = new ArrayList<Zombie>();
        zombies.add(criarZombie("Shane", 23, R.drawable.zombie_um));
        zombies.add(criarZombie("Hershel", 23, R.drawable.zombie_dois));
        zombies.add(criarZombie("Glen", 23, R.drawable.zombie_tres));
 
        return zombies;
    }
 
    private Zombie criarZombie(String nome, int idade, int image) {
        Zombie zombie = new Zombie(nome, idade, image);
        return zombie;
    }
}

Repare que pequenas coisas foram mudadas, não precisamos de usar o findViewById para recuperar a instancia da nossa ListView, e também podemos usar o método setListAdapter ao invés de vincular o Adapter diretamente ao ListView.

Para fazer isso funcionar tivemos que trocar o ID da nossa ListView que antes era minha_lista para android:id/list.

Agora vamos testar a funcionalidade de mostrar uma outra View caso a ListView esteja vazio.
Altere o layout XML da sua lista (list_zombie), para o abaixo:

<LinearLayout 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:orientation="vertical">
 
    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <TextView
        android:id="@android:id/empty"
        android:layout_gravity="center"
        android:text="UFA! Nenhum zumbie foi encontrado =D"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="22sp"
         />
 
    <!--
    Atenção para as boas práticas:
    O texto "Nenhum zumbie foi encontrado" deveria estar no Strings.xml
    Fiz isso para agilizar a explicação.
    -->
 
</LinearLayout>

Agora ao invés de passar a lista gerada pelo método gerarZombies, passe um ArrayList vazio, tal como o exemplo abaixo:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.list_zombie);
 
    List<Zombie> zombies = new ArrayList<Zombie>();//gerarZombies();
 
    final ListaZombiesAdapter zombiesAdapter = new ListaZombiesAdapter(this,  zombies);
    setListAdapter(zombiesAdapter);
 
    getListView().setOnItemClickListener(new OnItemClickListener() {
 
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
          Zombie zombie = zombiesAdapter.getItem(position);
          Toast.makeText(ListaZombies.this,zombie.getNome(), Toast.LENGTH_SHORT).show();
        }
    });
}

O resultado tem que ser igual a imagem abaixo:

 

Pronto agora você já sabe os fundamentos básicos do ListView.

 

Pra finalizar, vou colocar o AndroidManifest.xml deste projeto:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="br.com.lvc.listview"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="br.com.lvc.listview.ListaZombies"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Pronto! Agora você já tem um exemplo bem legal de como utilizar um ListView no Android.

Obs: Faça download do projeto apresentado acima através do link abaixo:

https://www.dropbox.com/s/cd9x2e96h5hydxv/ListViewComplet.zip

Abraço e até a próxima.