quinta-feira, 1 de dezembro de 2011

Android - ListView Parte 3

Olá,

Dando sequência a série sobre ListView, esse que é um dos recursos mais importantes do Android, estamos chegando a parte 3.

O exemplo de hoje será uma variação da parte 2, onde será criado um ListView com alguns estados brasileiros com múltipla escolha, a diferença está por conta do layout, que terá fixo no rodapé dois botões, que irão informar ao usuário quais estados foram marcados e quais não foram marcados.

Vamos por logo a mão na massa, abaixo segue o código fonte do arquivo lista3.java:

package br.com.empresa;

import android.app.Activity;
import android.os.Bundle;
import android.util.SparseBooleanArray;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class list3 extends Activity {
    private String[] lstEstados;
    ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.lista3);

        listView = (ListView) findViewById(R.id.lista3);
        
        //Criar um array de String
        lstEstados = new String[] {"São Paulo", "Rio de Janeiro", "Minas Gerais", "Rio Grande do Sul", "Santa Catarina", "Paraná", "Mato Grosso", "Amazonas"};

        //Criar um ArrayAdapter do tipo String, que vai fazer aparecer as Strings acima
        //em seu ListView do tipo que checked
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
            android.R.layout.simple_list_item_checked, lstEstados);
        
        //Associar o adapter ao listview
        listView.setAdapter(adapter);
    }

    //Este evento foi definido no arquivo de layout xml
    public void btnMarcados_click(View view){
        String lstrEstadosSelecionados = "";

        //Cria um array com os itens selecionados no listview
        SparseBooleanArray checked = listView.getCheckedItemPositions();

        for (int i = 0; i < checked.size(); i++){
            //pega os itens marcados
            lstrEstadosSelecionados += lstEstados[checked.keyAt(i)] + ",";
        }
        Toast.makeText(this, "Estados marcados : " + lstrEstadosSelecionados, Toast.LENGTH_LONG).show();
    }

    //Este evento foi definido no arquivo de layout xml
    public void btnDesmarcados_click(View view){
        String lstrEstadosSelecionados = "";

        for (int i = 0; i < listView.getCount(); i++){
            //pega os itens desmarcados
            if (listView.isItemChecked(i) == false){
                lstrEstadosSelecionados += lstEstados[i] + ",";
            }
        }
        Toast.makeText(this, "Estados desmarcados : " + lstrEstadosSelecionados, Toast.LENGTH_LONG).show();
    }    
}

Para esse exemplo será necessário criar um arquivo de layout, até porque estaremos incluindo dois botões nesse layout e eles ficarão fixos no rodapé do layout.

Abaixo segue o código fonte do arquivo lista3.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ListView 
        android:choiceMode="multipleChoice" 
        android:id="@+id/lista3" 
        android:layout_above="@+id/buttons" 
        android:layout_alignParentTop="true" 
        android:layout_height="fill_parent" 
        android:layout_width="fill_parent"/>

    <LinearLayout 
        android:id="@+id/buttons" 
        android:layout_alignParentBottom="true" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:orientation="horizontal">

        <Button 
            android:id="@+id/btnMarcados" 
            android:layout_height="wrap_content" 
            android:layout_weight="50" 
            android:layout_width="fill_parent" 
            android:onClick="btnMarcados_click" 
            android:text="Marcados"/>

        <Button 
            android:id="@+id/btnDesmarcados" 
            android:layout_height="wrap_content" 
            android:layout_weight="50" 
            android:layout_width="fill_parent" 
            android:onClick="btnDesmarcados_click" 
            android:text="Desmarcados"/>

    </LinearLayout>
</RelativeLayout>


Para explicação do layout xml acima temos o seguinte:
  • Criamos um LinearLayout com 2 botões dentro de um RelativeLayout que contém o ListView
  • ListView android:choiceMode="multipleChoice" - Informamos que teremos seleção em nossa lista
  • ListView android:layout_alignParentTop="true"  - O ListView ficará alinhado no topo de nosso xml
  • Button android:onClick="btnMarcados_click" - Dizemos qual função irá receber o evento click do botão
  • Button android:layout_weight="50" - Dizemos que o tamanho do botão será de 50% da tela

Como resultado final teremos a seguinte tela:
ListView

Em breve estarei postando mais opções relacionadas a layout e listview.

Desenv com qualidade!

2 comentários:

Lucas de Tassis Ramos disse...

Muto bom o tutorial, mas vi um problema ao reproduzir a função de listar os itens selecionados, se eu marco e logo depois desmarco o item parece que fica gravado como marcado, e ao mostrar no Toast ele aparece mesmo estando desmarcado.
pode me ajudar? e se possível pode enviar a sugestão por e-mail (lucastassis2@gmail.com)?

Paulo S. Ramos disse...

Muito bom esse tutorial cara, bem simples, didático e prático para aprender.

Estou estudando android e estava com uma tremendo problema para criar layouts e seu tutorial veio em excelente hora. Parabéns!