Começando com o RecyclerView e o CardView no Android

Portuguese (Português) translation by Maurício Eduardo de Oliveira (you can also view the original English article)

Se você estiver interessado em criar um aplicativo para Android que use listas para exibir dados, o Android Lollipop apresenta dois novos widgets para facilitar sua vida, RecyclerView e CardView. Usando esses widgets, é muito fácil dar ao seu aplicativo uma aparência que esteja em conformidade com as diretrizes mencionadas na especificação do material design do Google.

Pré-requisitos

Para acompanhar, você deve usar a versão mais recente do Android Studio. Você pode obtê-lo no site do desenvolvedor Android.

1. Suporte a Versões Antigas

Até o momento, menos de 2% dos dispositivos Android executavam o Android Lollipop. No entanto, graças à v7 Support Library, você pode usar os widgets RecyclerView e CardView em dispositivos que executam versões mais antigas do Android adicionando as seguintes linhas à seção de dependencies no arquivo build.grade do seu projeto:

compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'

2. Criando um `CardView`

Um CardView é um ViewGroup. Como qualquer outro ViewGroup, ele pode ser adicionado à sua Activity ou Fragment usando um arquivo XML de layout.

Para criar um CardView vazio, você teria que adicionar o seguinte código ao XML do layout, conforme mostrado no snippet a seguir:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</android.support.v7.widget.CardView>

Como um exemplo mais realista, vamos agora criar um LinearLayout e colocar um CardView dentro dele. O CardView poderia representar, por exemplo, uma pessoa e conter o seguinte:

um TextView para exibir o nome da pessoa
um TextView para exibir a idade da pessoa
um ImageView para exibir a foto da pessoa

É assim que o XML seria:

<?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:padding="16dp"
    >

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

Se esse XML for usado como o layout de uma Activity, com os campos TextView e ImageView definidos como significativos, é assim que ele seria renderizado em um dispositivo Android:

3. Criando uma `RecyclerView`

Etapa 1: definindo-o em um layout

Usar uma instância do RecyclerView é um pouco mais complicado. No entanto, defini-lo em um arquivo XML de layout é bem simples. Você pode defini-lo em um layout da seguinte maneira:

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rv"
    />

Para obter um identificador para ele em sua Activity, use o seguinte snippet:

RecyclerView rv = (RecyclerView)findViewById(R.id.rv);

Se tiver certeza de que o tamanho da RecyclerView não será alterado, você poderá adicionar o seguinte para melhorar o desempenho:

rv.setHasFixedSize(true);

Etapa 2: usando um `LayoutManager`

Ao contrário de um ListView, um RecyclerView precisa de um LayoutManager para gerenciar o posicionamento de seus itens. Você pode definir seu próprio LayoutManager, estendendo a classe RecyclerView.LayoutManager. No entanto, na maioria dos casos, você poderia simplesmente usar uma das subclasses do LayoutManager predefinidas:

LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager

Neste tutorial, vou usar um LinearLayoutManager. Esta subclasse LayoutManager, por padrão, fará com que seu RecyclerView se pareça com um ListView.

LinearLayoutManager llm = new LinearLayoutManager(context);
rv.setLayoutManager(llm);

Etapa 3: Definindo os dados

Assim como um ListView, um RecyclerView precisa de um adapter para acessar seus dados. Mas antes de criarmos um adapter, vamos criar dados com os quais possamos trabalhar. Crie uma classe simples para representar uma pessoa e, em seguida, escreva um método para inicializar um objeto List de Person:

class Person {
    String name;
    String age;
    int photoId;

    Person(String name, String age, int photoId) {
        this.name = name;
        this.age = age;
        this.photoId = photoId;
    }
}

private List<Person> persons;

// This method creates an ArrayList that has three Person objects
// Checkout the project associated with this tutorial on Github if
// you want to use the same images.
private void initializeData(){
    persons = new ArrayList<>();
    persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma));
    persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery));
    persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie));
}

Etapa 4: Criando um Adapter

Para criar um adapter que se possa usar no RecyclerView, você deve estender o RecyclerView.Adapter. Esse adaptador segue o padrão de design do view holder, o que significa que você define uma classe personalizada que estende RecyclerView.ViewHolder. Esse padrão minimiza o número de chamadas para o método findViewById.

Anteriormente neste tutorial, já definimos o layout XML para um CardView que representa uma pessoa. Vamos reutilizar esse layout agora. Dentro do construtor do nosso ViewHolder personalizado, inicialize as views que pertencem aos itens do nosso RecyclerView.

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{

    public static class PersonViewHolder extends RecyclerView.ViewHolder {  	
		CardView cv;
        TextView personName;
        TextView personAge;
        ImageView personPhoto;

        PersonViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            personName = (TextView)itemView.findViewById(R.id.person_name);
            personAge = (TextView)itemView.findViewById(R.id.person_age);
            personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
	}

}

Em seguida, adicione um construtor ao adapter personalizado para que ele tenha um identificador para os dados que o RecyclerView exibe. Como nossos dados estão na forma de um objeto List de Person, use o seguinte código:

List<Person> persons;

RVAdapter(List<Person> persons){
    this.persons = persons;
}

RecyclerView.Adapter tem três métodos abstratos que devemos substituir. Vamos começar com o método getItemCount. Isso deve retornar o número de itens presentes nos dados. Como nossos dados estão na forma de uma List, só precisamos chamar o método size no objeto List:

@Override
public int getItemCount() {
    return persons.size();
}

Em seguida, substitua o método onCreateViewHolder. Como o próprio nome sugere, esse método é chamado quando o ViewHolder personalizado precisa ser inicializado. Nós especificamos o layout que cada item do RecyclerView deve usar. Isso é feito inflando o layout usando LayoutInflater, passando a saída para o construtor do ViewHolder personalizado.

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
    PersonViewHolder pvh = new PersonViewHolder(v);
    return pvh;
}

Sobrescreva o onBindViewHolder para especificar o conteúdo de cada item do RecyclerView. Esse método é muito semelhante ao método getView de um adapter de ListView. Em nosso exemplo, aqui é onde você deve definir os valores dos campos nome, idade e foto do CardView.

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.personName.setText(persons.get(i).name);
    personViewHolder.personAge.setText(persons.get(i).age);
    personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);
}

Finalmente, você precisa substituir o método onAttachedToRecyclerView. Por enquanto, podemos simplesmente usar a implementação da superclasse deste método como mostrado abaixo.

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

Etapa 5: Usando o Adapter

Agora que o adapter está pronto, inclua o seguinte código em sua Activity para inicializar e usar o adapter chamando o construtor do adapter e o método setAdapter do RecyclerView:

RVAdapter adapter = new RVAdapter(persons);
rv.setAdapter(adapter);

Etapa 6: Compilando e Executando

Quando você executa o exemplo RecyclerView em um dispositivo Android, você deve ver algo semelhante ao seguinte resultado.

Conclusão

Neste tutorial, você aprendeu como usar os widgets CardView e RecyclerView que foram introduzidos no Android Lollipop. Você também viu exemplos de como usar esses widgets em aplicativos com Material Design. Observe que, embora um RecyclerView possa fazer quase tudo que um ListView pode, para conjuntos de dados pequenos, ainda é preferível usar um ListView, pois ele requer menos linhas de código.

Você pode consultar a Referência de Desenvolvedores do Android para obter mais informações sobre as classes CardView e RecyclerView.