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

Question

Mais

Fonte Versão sem AMP Editar

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

Eu sei que o RecyclerView substituiu a funcionalidade dos antigos ListView e GridView. Eu estou procurando por um exemplo muito básico que mostra uma configuração mínima de grid utilizando RecyclerView. Eu não estou procurando por longas explicações de estilo tutorial, apenas um exemplo mínimo. Eu imagino que a grade mais simples que imita o GridView antigo consistiria nas seguintes funcionalidades:

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

Suragch

Pergunta editada :em

Programação

android gridview android-recyclerview gridlayoutmanager

14º novembro 2016 в 11:02

1 vista

jonypera

Fonte Versão sem AMP Editar

Embora eu goste e aprecie Suragch's answer, eu gostaria de deixar uma nota porque eu descobri que codificar o Adaptador (MyRecyclerViewAdapter) para definir e expor o método Listener onItemClick é't a melhor maneira de fazê-lo, devido à não utilização correta do encapsulamento de classes. Então minha sugestão é deixar o Adaptador lidar com as operações de escuta somente (que's seu propósito!) e separar aquelas da Atividade que utiliza o Adaptador (MainActivity). Então é assim que eu definiria a classe do Adaptador:

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter {

    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 o método onItemClick agora definido em MyRecyclerViewAdapter que é o lugar onde você gostaria de codificar suas tarefas para o evento/ação recebida.

Há apenas uma pequena mudança a ser feita para completar esta transformação: o Activity não'não precisa mais implementar MyRecyclerViewAdapter.ItemClickListener, porque agora isso é feito completamente pelo Adapter. Esta seria então 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);
    }
}

7

0

Comentários (3)

MR Coder

Fonte Versão sem AMP Editar

Você tem que configurar seu gerenciador de layout RecyclerView para o modo Gridlayout , Para fazer isso Basta alterar seu código quando você quiser configurar seu gerenciador de layout RecyclerView :

Nota : substitua a sua contagem de colunas que você quer por ###HELP####

   recyclerView.setLayoutManager(novo GridLayoutManager(getActivity(),####HELP#####));

lczapski

Resposta editada :em

0

Comentários (0)

Suragch · Accepted Answer · 2016-11-14T11:02:32+00:00

Resposta curta

Para aqueles que já estão familiarizados com configurar um RecyclerView para fazer uma lista, a boa notícia é que fazer uma grade é em grande parte a mesma coisa. Você apenas utiliza um GridLayoutManager ao invés de um LinearLayoutManager quando você configura o RecyclerView.

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

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

Exemplo completo

O seguinte é um exemplo mínimo que se parecerá com a imagem abaixo.

Comece com uma actividade vazia. Você irá executar as seguintes tarefas para adicionar a grade RecyclerView. Tudo o que você precisa fazer é copiar e colar o código em cada seção. Mais tarde você pode customizá-lo de acordo com suas necessidades.

Adicionar dependências ao graduar
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 de graduação

Certifique-se de que as seguintes dependências estão no seu arquivo app gradle.build:

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

Você pode atualizar os números das versões para o que quer que seja o mais atual.

Criar layout de atividades

Adicione o RecyclerView ao seu layout xml.

activity_main.xml

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

Criar o layout das células da grelha

Cada célula em nossa grade 'RecyclerView' terá apenas um único 'TextView'. Crie um novo arquivo de recurso de layout.

recyclerview_item.xml

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

Criar o adaptador

O RecyclerView precisa de um adaptador para preencher as vistas em cada célula com os seus dados. Crie um novo arquivo java.

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter {

    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 de ouvir os eventos de clique nas células. Isto estava disponível no antigo GridView e é uma necessidade comum. Você pode remover este código se você não't precisar dele.

Initializar o ReciclerView em atividade

Adicione o seguinte código à sua actividade 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 ItemClickListener que nós definimos no nosso adaptador. Isto nos permite lidar com eventos de clique de célula no `onItemClick'.

Finalizado

Isso's it. Você deve ser capaz de executar o seu projeto agora e obter algo semelhante à imagem no topo.

Continuando

Cantos arredondados

Use a CardView

Colunas de encaixe automático

https://stackoverflow.com/questions/33575731/gridlayoutmanager-how-to-auto-fit-columns

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

Resposta curta

Exemplo completo

Atualizar dependências de graduação

Criar layout de atividades

Criar o layout das células da grelha

Criar o adaptador

Initializar o ReciclerView em atividade

Finalizado

Continuando

Outro estudo