Android Criando um ListView Personalizado

Cópia fiel de: http://zarelli.wordpress.com/

Custom ListView

Para criar um listView personalizado não é difícil porem é um trabalho chato de se fazer.
O conceito é, preencher uma lista de objetos que contem os dados de seu item e passar essa lista para um adapter que irá preencher o ListView, através desse adapter nós poderemos ter o controle sobre a lista, podendo remover item adicionar e pegar o selecionado.

Primeiro crie o layout de onde ficara seu listView, para isso criei o “main.xml”:

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFFFF"
>
        <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#ECECEC"
        android:dividerHeight="1sp"
        />
</LinearLayout>

Após a criação do layout de apresentação criaremos o Item, vou criar um item bem simples, com uma texto e uma imagem. “item_listview.xml”:

<?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:orientation="horizontal">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="5sp">
        <ImageView
            android:id="@+id/imagemview"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            />

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="5sp"
            android:gravity="center_vertical"
            android:textColor="#FF000000"
        />
    </LinearLayout>
</LinearLayout>

Pronto a parte do XML está feita! agora vamos implementar no código.

Primeiramente criaremos nosso Objeto de acordo com nosso item.

public class ItemListView
{
    private String texto;
    private int iconeRid;

    public ItemListView()
    {
    }

    public ItemListView(String texto, int iconeRid)
    {
        this.texto = texto;
        this.iconeRid = iconeRid;
    }

    public int getIconeRid()
    {
        return iconeRid;
    }

    public void setIconeRid(int iconeRid)
    {
        this.iconeRid = iconeRid;
    }

    public String getTexto()
    {
        return texto;
    }

    public void setTexto(String texto)
    {
        this.texto = texto;
    }
}

Após criado o Objeto vamos criar o Adapter, o coração do ListView.
Vejá como é simples:

public class AdapterListView extends BaseAdapter
{
    private LayoutInflater mInflater;
    private ArrayList<ItemListView> itens;

    public AdapterListView(Context context, ArrayList<ItemListView> itens)
    {
        //Itens que preencheram o listview
        this.itens = itens;
        //responsavel por pegar o Layout do item.
        mInflater = LayoutInflater.from(context);
    }

    /**
     * Retorna a quantidade de itens
     *
     * @return
     */
    public int getCount()
    {
        return itens.size();
    }

    /**
     * Retorna o item de acordo com a posicao dele na tela.
     *
     * @param position
     * @return
     */
    public ItemListView getItem(int position)
    {
        return itens.get(position);
    }

    /**
     * Sem implementação
     *
     * @param position
     * @return
     */
    public long getItemId(int position)
    {
        return position;
    }

    public View getView(int position, View view, ViewGroup parent)
    {
        //Pega o item de acordo com a posção.
        ItemListView item = itens.get(position);
        //infla o layout para podermos preencher os dados
        view = mInflater.inflate(R.layout.item_list, null);

        //atravez do layout pego pelo LayoutInflater, pegamos cada id relacionado
        //ao item e definimos as informações.
        ((TextView) view.findViewById(R.id.text)).setText(item.getTexto());
        ((ImageView) view.findViewById(R.id.imagemview)).setImageResource(item.getIconeRid());

        return view;
    }
}

Pronto. Toda estrutura está feita, agora vamos colocar para funcionar.
Segue o código de implementação na nossa Activity principal:

public class MainActivity extends Activity implements OnItemClickListener
{
    private ListView listView;
    private AdapterListView adapterListView;
    private ArrayList<ItemListView> itens;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //carrega o layout onde contem o ListView
        setContentView(R.layout.main);

        //Pega a referencia do ListView
        listView = (ListView) findViewById(R.id.list);
        //Define o Listener quando alguem clicar no item.
        listView.setOnItemClickListener(this);

        createListView();
    }

    private void createListView()
    {
        //Criamos nossa lista que preenchera o ListView
        itens = new ArrayList<ItemListView>();
        ItemListView item1 = new ItemListView("Guilherme Biff", R.drawable.biff);
        ItemListView item2 = new ItemListView("Lucas Volgarini", R.drawable.volgarini);
        ItemListView item3 = new ItemListView("Eduardo Ricoldi", R.drawable.ricoldi);
        ItemListView item4 = new ItemListView("Felipe Panngo", R.drawable.panngo);

        itens.add(item1);
        itens.add(item2);
        itens.add(item3);
        itens.add(item4);

        //Cria o adapter
        adapterListView = new AdapterListView(this, itens);

        //Define o Adapter
        listView.setAdapter(adapterListView);
        //Cor quando a lista é selecionada para ralagem.
        listView.setCacheColorHint(Color.TRANSPARENT);
    }

    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)
    {
        //Pega o item que foi selecionado.
        ItemListView item = adapterListView.getItem(arg2);
        //Demostração
        Toast.makeText(this, "Você Clicou em: " + item.getTexto(), Toast.LENGTH_LONG).show();
    }
}

Observação: As imagens foram inseridas na pasta res/drawable/ para quem não saiba, após inserida as imagens lá podemos pegar sua referencia pelo ResId.

Para quem quiser o projeto:
http://dl.dropbox.com/u/15643399/CustomListView.zip

Anúncios

15 comentários em “Android Criando um ListView Personalizado

  1. Fred disse:

    Bem legal seu tutorial, parabéns.Como faço para mostrar a imagem pelo caminho da imagem que está no banco?

  2. Frederico disse:

    Melhor deixar no res/drawable então? Mas como que faço para mostrar a imagem do logo no ListView, você não me disse como. Queria uma ajuda, porque no seu tutorial vc ja seta a imagem manualmente, certo? Como que faço para quando carregar o ListView mostrar a imagem?

    • Para obter o Rid da imagem que você salvou em res/drawable, tente usar getResId(“NOME_DA_IMAGEM”, context, Drawable.class);
      Ou algo tipo: imageView.setImageResource(context.getResources().getIdentifier(“drawable/NOME_DA_IMAGEM”, null, context.getPackageName()));

      Espero ter lhe ajudado. Boa sorte!

  3. Frederico disse:

    Sim, as imagens ja estão no res e o nome no banco de dados.

    • Então ali na imageView que queres colocar a imagem:
      imageView.setImageResource(context.getResources().getIdentifier(“drawable/NOME_DA_IMAGEM_QUE_VOCÊ_OBTEVE_DO_BANCO_DE_DADOS”, null, context.getPackageName()));
      Isso deveria funcionar.

  4. Fred disse:

    Meu código ta assim:

    @Override
    public void onResume(){
    super.onResume();
    DiferencialDAO dao = new DiferencialDAO(getBaseContext());
    lista = dao.getAll();
    ltw.setAdapter(new DiferencialAdapter(getBaseContext(), lista));
    dao.fecha_banco();
    }

    Aqui eu listo os nomes na lista.

    Classe Adapter:

    public class DiferencialAdapter extends BaseAdapter{
    private Context ctx;
    private List lista;

    public DiferencialAdapter(Context ctx, List lista){
    this.ctx = ctx;
    this.lista = lista;
    }

    @Override
    public int getCount() {
    return lista.size();
    }

    @Override
    public Object getItem(int position) {
    return lista.get(position);
    }

    @Override
    public long getItemId(int position) {
    return position;
    }

    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {
    DiferencialVO vo = (DiferencialVO)getItem(position);

    LayoutInflater layout = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View v = layout.inflate(android.R.layout.simple_list_item_checked, null);

    /*
    TextView txtID = (TextView) v.findViewById(com.br.aquavendas.R.id.txtId);
    txtID.setText(vo.getId().toString());
    */

    TextView txtContato = (TextView) v.findViewById(android.R.id.text1);
    txtContato.setText(vo.getTitle());

    return v;
    }

    }

  5. Tiago Hidalgo disse:

    Seu post é muito bom. Parebéns.

  6. Muito bom cara! Ajudou de mais!

  7. Paulo disse:

    Me ajudou muito Vlw.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s