ListView personalizado em Android

O ListView é um componente muito útil no Android para exibir listas de dados, mas o estilo padrão pode não atender às necessidades de uma interface personalizada. Para tornar o ListView mais atrativo e funcional, você pode personalizá-lo criando layouts customizados para os itens da lista e implementando um adaptador personalizado. Neste post, aprenda sobre ListView personalizado em Android.

1. Estrutura básica: O layout do ListView

Comece criando o layout para a Activity que contém o ListView.

<!-- res/layout/activity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <ListView
        android:id="@+id/listViewPersonalizado"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

2. Criando o layout do item da lista

Para personalizar os itens do ListView, você precisa definir um layout específico para cada item. Neste exemplo, vamos criar um layout que exibe um título e uma descrição.

<!-- res/layout/item_lista.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp"
    android:background="?android:attr/selectableItemBackground">

    <TextView
        android:id="@+id/tituloItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="#000" />

    <TextView
        android:id="@+id/descricaoItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="#555" />
</LinearLayout>

3. Criando a classe de dados

Vamos criar uma classe para representar os itens da lista. Essa classe conterá propriedades como titulo e descricao.

// Item.java
public class Item {
    private String titulo;
    private String descricao;

    public Item(String titulo, String descricao) {
        this.titulo = titulo;
        this.descricao = descricao;
    }

    public String getTitulo() {
        return titulo;
    }

    public String getDescricao() {
        return descricao;
    }
}

4. Criando o adaptador personalizado

Agora, vamos criar uma classe ItemAdapter que herda de ArrayAdapter. Essa classe será responsável por inflar o layout personalizado para cada item da lista.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import java.util.List;

public class ItemAdapter extends ArrayAdapter<Item> {

    public ItemAdapter(Context context, List<Item> itens) {
        super(context, 0, itens);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // Verifica se a View já foi criada; caso contrário, infla o layout do item
        if (convertView == null) {
            convertView = LayoutInflater.from(getContext())
                    .inflate(R.layout.item_lista, parent, false);
        }

        // Obtém o item atual
        Item itemAtual = getItem(position);

        // Configura os elementos do layout
        TextView titulo = convertView.findViewById(R.id.tituloItem);
        TextView descricao = convertView.findViewById(R.id.descricaoItem);

        if (itemAtual != null) {
            titulo.setText(itemAtual.getTitulo());
            descricao.setText(itemAtual.getDescricao());
        }

        return convertView;
    }
}

5. Configurando o ListView na activity

Com o layout do ListView, o layout dos itens e o adaptador personalizados prontos, basta configurar o ListView na Activity e adicionar os dados.

import android.os.Bundle;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private List<Item> itens;

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

        listView = findViewById(R.id.listViewPersonalizado);
        
        // Preenchendo a lista com itens
        itens = new ArrayList<>();
        itens.add(new Item("Título 1", "Descrição do item 1"));
        itens.add(new Item("Título 2", "Descrição do item 2"));
        itens.add(new Item("Título 3", "Descrição do item 3"));
        // Adicione mais itens conforme necessário

        // Configurando o adaptador personalizado
        ItemAdapter adaptador = new ItemAdapter(this, itens);
        listView.setAdapter(adaptador);
    }
}

Explicação do código

1. ItemAdapter: Esse adaptador inflaciona o layout item_lista.xml para cada item e insere os dados do objeto Item nos TextViews correspondentes.
   
   
2. ArrayList<Item>: Os itens da lista são carregados em um ArrayList<Item>, que é então passado para o ItemAdapter.
   
   
3. listView.setAdapter(adaptador): Configura o ListView para utilizar o ItemAdapter, exibindo cada item de acordo com o layout personalizado.

6. Interagindo com os itens do ListView

Para adicionar interatividade aos itens do ListView, use o método setOnItemClickListener() para definir ações ao clicar em cada item.

listView.setOnItemClickListener((parent, view, position, id) -> {
    Item itemSelecionado = itens.get(position);
    Toast.makeText(this, "Selecionado: " + itemSelecionado.getTitulo(), Toast.LENGTH_SHORT).show();
});

7. Ajustes e melhorias

• Imagens: Se quiser incluir imagens, adicione um ImageView no layout item_lista.xml e modifique o ItemAdapter para configurar a imagem.
  
  
• Animações: Você pode adicionar animações de entrada e saída para os itens do ListView usando a API de animações do Android.

Outro exemplo prático

Os itens são inseridos na lista usando um Adapter, que obtém o conteúdo de uma origem, que pode ser uma consulta a um banco de dados ou um vetor, por exemplo.

O ListView converte cada resultado de item em uma exibição, que é inserida na lista.

Primeiramente criamos uma classe para estruturar a nossa lista personalizada (MinhaLista.java):

public class MinhaLista {
    private String nome;
    private String descricao;

    public MinhaLista(String nome, String descricao) {
        this.nome = nome;
        this.descricao = descricao;
    }

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

    public String getDescricao() {
        return descricao;
    }

    public void setDescricao(String descricao) {
        this.descricao = descricao;
    }

    @Override
    public String toString() {
        return "Linguagem: " + nome + " Descrição: " + descricao;
    }
}

Criamos o layout da lista (lista_personalizada.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="100dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/lista_personalizada_imagem"
        android:layout_width="100dp"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/lista_personalizada_nome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingHorizontal="5dp"
            android:text="Titulo"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/lista_personalizada_descricao"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingHorizontal="5dp"
            android:text="descriçao"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

(activity_lista_linguagens.xml):

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

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"> 

    <ListView
        android:id="@+id/lista"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView"
        tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout>

Criamos o ListView personalizado para mostrar imagens juntamente com os itens na lista.

Precisamos extender a classe BaseAdapter e implementar View.OnClickListener 
(AdapterListaPersonalizado.java):

public class AdapterListaPersonalizado extends BaseAdapter implements View.OnClickListener {

    private final List<MinhaLista> minhaLista;
    private final Activity act;

    public AdapterListaPersonalizada(List<MinhaLista> minhaLista, Activity act) {
        this.minhaLista = minhaLista;
        this.act = act;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        View view = act.getLayoutInflater().inflate(R.layout.lista_personalizada, viewGroup, false);

        MinhaLista minhaLista = minhaLista.get(position);

        TextView nome = view.findViewById(R.id.lista_personalizada_nome);
        TextView descricao = view.findViewById(R.id.lista_personalizada_descricao);
        ImageView imagem = view.findViewById(R.id.lista_personalizada_imagem);

        nome.setText(minhaLista.getNome());
        descricao.setText(minhaLista.getDescricao());

        String nomeLinguagem = minhaLista.getNome();

        //Mostra imagem de acordo com o nome do ítem do listView
        if(nomeLinguagem.equals("C#"))
            //Definimos as imagens, armazenadas em R.drawable
            imagem.setImageResource(R.drawable.imagemCSharp); 
        else if(nomeLinguagem.equals("Java"))
            imagem.setImageResource(R.drawable.imagemJava);
        else if(nomeLinguagem.equals("PHP"))
            imagem.setImageResource(R.drawable.imagemPHP);
        else if(nomeLinguagem.equals("C"))
            imagem.setImageResource(R.drawable.imagemC);   
        return view;
    }

Mostramos a lista personalizada em uma activity (MainActivity.java):

...

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lista_linguagens);
        
        ListView lista = findViewById(R.id.lista);
        ListList<MinhaLista> linguagens = todasAsLinguagens();
        AdapterListaPersonalizado adapter = new AdapterListaPersonalizado(linguagens, this);
        lista.setAdapter(adapter);        
        
        private List<MinhaLista> todasAsLinguagens() {
           return new ArrayList<>(Arrays.asList(
              new MinhaLista("C#", " Linguagem de programação interpretada multi-paradigma fortemente tipada desenvolvida pela Microsoft."),
              new MinhaLista("Java", "Linguagem de programação interpretada orientada a objetos desenvolvida na década de 90 pela Sun Microsystems."),
              new MinhaLista("PHP", " Linguagem interpretada livre, usada originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no lado do servidor."),
              new MinhaLista("C", "Linguagem de programação compilada de propósito geral, estruturada, imperativa, procedural, padronizada pela ISO, criada em 1972 no AT&T Bell Labs.")
              ));
     }       
      
      ...     

O visual ficará parecido com isso:

Clique aqui para baixar um aplicativo que usa um ListView personalizado.

Personalizar o ListView permite criar interfaces mais envolventes e adaptadas às necessidades do seu aplicativo.

Com o ArrayAdapter e layouts customizados, você pode facilmente modificar a aparência e comportamento dos itens para oferecer uma experiência de usuário mais rica.

Dúvidas ou sugestões sobre ListView personalizado em Android? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: listview android