Exemplo simples de grade do Android usando o RecyclerView com GridLayoutManager (como o antigo GridView)


227

Eu sei que RecyclerViewsubstituiu a funcionalidade do antigo ListViewe GridView. Estou procurando um exemplo muito básico que mostra uma configuração de grade mínima usando RecyclerView. Não estou procurando explicações longas sobre o estilo do tutorial, apenas um exemplo mínimo. Eu imagino que a grade mais simples que imita o GridView antigo consistiria nos seguintes recursos:

  • várias células por linha
  • visualização única em cada célula
  • responde a eventos de clique

Respostas:


556

Resposta curta

Para aqueles que já estão familiarizados com a configuração de a RecyclerViewpara fazer uma lista , a boa notícia é que criar uma grade é basicamente o mesmo. Você apenas usa um em GridLayoutManagervez de um LinearLayoutManagerquando configura RecyclerView.

recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));

Se você precisar de mais ajuda do que isso, confira o exemplo a seguir.

Exemplo completo

A seguir, é apresentado um exemplo mínimo, semelhante à imagem abaixo.

insira a descrição da imagem aqui

Comece com uma atividade vazia. Você executará as seguintes tarefas para adicionar a RecyclerViewgrade. Tudo o que você precisa fazer é copiar e colar o código em cada seção. Mais tarde, você pode personalizá-lo para atender às suas necessidades.

  • Adicionar dependências à classificação
  • Adicione os arquivos de layout xml para a atividade e para a célula da grade
  • Faça o adaptador RecyclerView
  • Inicialize o RecyclerView em sua atividade

Atualizar dependências Gradle

Verifique se as seguintes dependências estão no seu gradle.buildarquivo de aplicativo :

compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'

Você pode atualizar os números de versão para o que for mais atual .

Criar layout de atividade

Adicione o RecyclerViewao seu layout xml.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>

Criar layout de célula da grade

Cada célula da nossa RecyclerViewgrade terá apenas uma TextView. Crie um novo arquivo de recurso de layout.

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:padding="5dp"
    android:layout_width="50dp"
    android:layout_height="50dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/colorAccent"/>

</LinearLayout>

Crie o adaptador

É RecyclerViewnecessário um adaptador para preencher as visualizações em cada célula com seus dados. Crie um novo arquivo java.

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private String[] mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the cell layout from xml when needed
    @Override
    @NonNull 
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the TextView in each cell
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.myTextView.setText(mData[position]);
    }

    // total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }


    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    String getItem(int id) {
        return mData[id];
    }

    // allows clicks events to be caught
    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

Notas

  • Embora não seja estritamente necessário, incluí a funcionalidade para escutar eventos de clique nas células. Isso estava disponível no passado GridViewe é uma necessidade comum. Você pode remover esse código se não precisar.

Inicializar RecyclerView na atividade

Adicione o seguinte código à sua atividade principal.

MainActivity.java

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    MyRecyclerViewAdapter adapter;

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

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position);
    }
}

Notas

  • Observe que a atividade implementa o ItemClickListenerque definimos em nosso adaptador. Isso nos permite manipular eventos de clique na célula onItemClick.

Acabado

É isso aí. Agora você poderá executar seu projeto e obter algo semelhante à imagem na parte superior.

Indo

Cantos arredondados

Colunas de ajuste automático

Um estudo mais aprofundado


2
@ MarianPaździoch, Sim, acabei de fazer isso como um exemplo mínimo. Definitivamente poderia usar algum trabalho de embelezamento. Vou tentar atualizar esta resposta em algum momento no futuro.
Suragch 29/08/19

1
Entrei apenas para apontar que pessoas como você mantiveram este portal vivo e chutaram. Fiquei preso por dois dias antes de ver esta solução. thanks a lot
VarunJoshi129

1
@androiddeveloper, Os itens da grade são dispostos da esquerda para a direita, de cima para baixo. A rolagem é vertical quando há mais itens que podem caber na tela.
Suragch

13
Futuros leitores, deixe-me lhe poupar algum tempo, coisa é fundamentalrecyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
daka

1
@daka, bom ponto. Eu editei minha resposta para incluir isso no começo.
Suragch

7

Embora eu goste e aprecie a resposta de Suragch , gostaria de deixar uma observação porque descobri que codificar o Adapter ( MyRecyclerViewAdapter) para definir e expor o método Listener onItemClicknão é a melhor maneira de fazê-lo, devido ao não uso do encapsulamento de classe corretamente. Portanto, minha sugestão é deixar o Adaptador manipular as operações de Escuta apenas (esse é o objetivo dele!) E separá-las da Atividade que usa o Adaptador ( MainActivity). Então é assim que eu definiria a classe Adapter:

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private String[] mData = new String[0];
    private LayoutInflater mInflater;

    // Data is passed into the constructor
    public MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // Inflates the cell layout from xml when needed
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    // Binds the data to the textview in each cell
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String animal = mData[position];
        holder.myTextView.setText(animal);
    }

    // Total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }

    // Stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView myTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            myTextView = (TextView) itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            onItemClick(view, getAdapterPosition());
        }
    }

    // Convenience method for getting data at click position
    public String getItem(int id) {
        return mData[id];
    }

    // Method that executes your code for the action received
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + getItem(position).toString() + ", which is at cell position " + position);
    }
}

Observe que o onItemClickmétodo agora definido MyRecyclerViewAdapteré o local em que você deseja codificar suas tarefas para o evento / ação recebido.

Há apenas uma pequena alteração a ser realizada para concluir essa transformação: a Atividade não precisa MyRecyclerViewAdapter.ItemClickListenermais ser implementada , porque agora isso é feito completamente pelo Adaptador . Essa seria a modificação final:

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MyRecyclerViewAdapter adapter;

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

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }
}

3
E se a atividade precisar ouvir os eventos de clique? por exemplo, passar os dados para o apresentador, fazendo alguma lógica baseada no ponto clicado, acompanhamento, etc.
Ahmad Fadli

Concordo que o Adaptador deve manipular eventos de clique, pois possui os itens com os dados. @AhmadFadli se você precisar fazer algum trabalho no host do adaptador (um Fragmento ou Atividade), deverá criar uma interface de retorno de chamada com os métodos necessários. Seu host implementa essa interface. E então você passa uma instância do seu host para o construtor do Adapter. Tendo a instância do host, você pode chamar seus métodos quando precisar do seu adaptador. E seu host recebe chamadas de retorno. Isso geralmente é usado quando você precisa trabalhar com o ActionMode. Quando você clica para selecionar itens e usar os botões da ActionBar.
Kirill Karmazin

Discordo e acho que os eventos de clique devem ser processados ​​na hospedagem Activity. Porque só é preciso clicar ouvinte pode saber sobre os Activitypontos de vista e outros Fragments, Activitiesetc. O adaptador só pode enviar clique eventos para nível superior. Ele deve ter a interface ItemClickListener com tantos eventos, como muitas visualizações do adaptador de eventos podem produzir. Esta solução foi escrita ainda mais cedo: stackoverflow.com/a/40563598/2914140 .
CoolMind #

4

Você precisa definir o gerenciador de layout da sua reciclagem como Modo de layout de grade, para fazer isso Basta alterar seu código quando desejar Definir o RecyclerView LayoutManager:

Nota: substitua a contagem de colunas que deseja com ### HELP ###

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.