Enkelt Android-grid-eksempel ved bruk av RecyclerView med GridLayoutManager (som den gamle GridView)

Question

Mer

Kilde Ikke AMP-versjon Rediger

Enkelt Android-grid-eksempel ved bruk av RecyclerView med GridLayoutManager (som den gamle GridView)

Jeg vet at RecyclerView har erstattet funksjonaliteten til de gamle ListView og GridView. Jeg leter etter et veldig grunnleggende eksempel som viser et minimalt rutenettoppsett ved hjelp av RecyclerView. Jeg leter ikke etter lange forklaringer i opplæringsstil, bare et minimalt eksempel. Jeg forestiller meg at det enkleste rutenettet som etterligner det gamle GridView vil bestå av følgende funksjoner:

flere celler per rad
enkelt visning i hver celle
reagerer på klikkhendelser

Suragch

Redigerte spørsmål 31. januar 2017 в 3:19

Programmering

android gridview android-recyclerview gridlayoutmanager

14. november 2016 в 11:02

Ingen visninger ennå

jonypera

Kilde Ikke AMP-versjon Rediger

Selv om jeg liker og setter pris på Suragch s svar, vil jeg gjerne legge igjen et notat fordi jeg fant ut at koding av Adapter (MyRecyclerViewAdapter) for å definere og eksponere lyttermetoden onItemClick ikke er den beste måten å gjøre det på, på grunn av ikke å bruke klasseinnkapsling riktig. Så mitt forslag er å la Adapter håndtere lytteoperasjonene utelukkende (det er hans formål!) Og skille dem fra aktiviteten som bruker Adapter (MainActivity). Så dette er hvordan jeg ville sette Adapter-klassen:

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);
    }
}

Vær oppmerksom på onItemClick-metoden som nå er definert i MyRecyclerViewAdapter, som er stedet der du ønsker å kode oppgavene dine for den mottatte hendelsen/handlingen.

Det er bare en liten endring som må gjøres for å fullføre denne transformasjonen: Activity trenger ikke å implementere MyRecyclerViewAdapter.ItemClickListener lenger, for nå gjøres dette fullstendig av Adapter. Dette vil da være den siste modifikasjonen:

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

Kommentarer (3)

MR Coder

Kilde Ikke AMP-versjon Rediger

Du må sette din recyclerview layoutmanager til Gridlayout-modus, for å gjøre dette, bare endre koden din når du vil angi RecyclerView LayoutManager:

Merk: erstatt antall kolonner du vil ha med ###HELP###.

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

lczapski

Redigert svar 8. november 2019 в 12:26

0

Kommentarer (0)

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

Kort svar

For de som allerede er kjent med å sette opp en RecyclerView for å lage en liste, er den gode nyheten at det å lage et rutenett stort sett er det samme. Du bruker bare en GridLayoutManager i stedet for en LinearLayoutManager når du setter opp RecyclerView.

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

Hvis du trenger mer hjelp enn det, så sjekk ut følgende eksempel.

Fullstendig eksempel

Følgende er et minimalt eksempel som vil se ut som bildet nedenfor.

]2].

Start med en tom aktivitet. Du vil utføre følgende oppgaver for å legge til rutenettet RecyclerView. Alt du trenger å gjøre er å kopiere og lime inn koden i hver seksjon. Senere kan du tilpasse den slik at den passer til dine behov.

Legg til avhengigheter til gradle
Legg til xml-layoutfilene for aktiviteten og for rutenettcellen.
Lag RecyclerView-adapteren
Initialiser RecyclerView i aktiviteten din.

Oppdater Gradle-avhengigheter

Sørg for at følgende avhengigheter finnes i appens gradle.build-fil:

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

Du kan oppdatere versjonsnumrene til det nyeste.

Opprett aktivitetsoppsett

Legg til RecyclerView i xml-layoutet ditt.

activity_main.xml

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

Create grid cell layout

Hver celle i rutenettet RecyclerView skal bare ha en enkelt TextView. Opprett en ny layoutressursfil.

recyclerview_item.xml.

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

Opprett adapteren

RecyclerView` trenger en adapter for å fylle ut visningene i hver celle med dataene dine. Opprett en ny javafil.

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);
    }
}

Notes

Selv om det ikke er strengt nødvendig, inkluderte jeg funksjonaliteten for å lytte etter klikkhendelser på cellene. Dette var tilgjengelig i den gamle GridView og er et vanlig behov. Du kan fjerne denne koden hvis du ikke trenger den.

Initialiser RecyclerView i aktivitet

Legg til følgende kode i hovedaktiviteten din.

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);
    }
}

Notes

Legg merke til at aktiviteten implementerer ItemClickListener som vi definerte i adapteren vår. Dette gjør at vi kan håndtere celleklikkhendelser i onItemClick.

Ferdig

Det er alt. Du bør kunne kjøre prosjektet ditt nå og få noe som ligner på bildet øverst.

Fortsetter

Avrundede hjørner

Bruk en CardView

Automatisk tilpasning av kolonner

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

Ytterligere studier

Android RecyclerView med GridView GridLayoutManager eksempel på veiledning
Android RecyclerView Rutenettoppsett eksempel
Lær RecyclerView med et eksempel i Android [RecyclerView: Rutenett med overskrift
RecyclerView: Rutenett med overskrift
Android GridLayoutManager med RecyclerView i Material Design [Kom godt i gang med RecyclerView
Komme i gang med RecyclerView og CardView på Android Kom i gang med RecyclerView på Android