Android simplu, grila de exemplu, folosind RecyclerView cu GridLayoutManager (cum ar fi vechi GridView)

Știu asta pentru RecyclerViewa înlocuit funcționalitatea vechiListView " și " GridView. Caut un exemplu foarte de bază, care prezinta un minim de rețea de configurare folosindRecyclerView`. Eu nu sunt în căutarea pentru tutorial lung stil explicații, doar un minim exemplu. Îmi imaginez că cea mai simplă grilă care imită vechi GridView ar consta din următoarele caracteristici:

  • mai multe celule pe rând
  • singur punct de vedere în fiecare celulă
  • răspunde la evenimente click
Soluția

Răspuns scurt

Pentru cei care sunt deja familiarizați cu setarea unei `RecyclerView să facă o listă, vestea bună este că a face o grilă este în mare măsură aceeași. Utilizați doar un GridLayoutManager în loc de LinearLayoutManager când setațiRecyclerView sus.

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

Dacă ai nevoie de mai mult ajutor, apoi a verifica afară de următorul exemplu.

Exemplu complet

Următoarele este un minim exemplu, care va arata ca imaginea de mai jos.

Începe cu un gol de activitate. Va efectua următoarele sarcini pentru a adăuga RecyclerView grilă. Tot ce trebuie să faceți este să copiați și inserați codul în fiecare secțiune. Mai târziu, puteți personaliza pentru a se potrivi nevoilor dumneavoastră.

  • Adăugați dependențele pentru gradle
  • Adauga xml layout fișiere pentru activitate și pentru celulă de rețea
  • Face RecyclerView adaptor
  • Inițializa RecyclerView în activitatea dvs.

Update Gradle dependențe

Asigurați-vă că următoarele dependențe sunt în aplicația `gradle.construi fișier:

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

Puteți actualiza versiunea numere de la ceea ce este cel mai curent.

Creați activitate layout

Adauga `RecyclerView să xml layout.

activity_main.xml

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




Crea celulă de rețea, aspect

Fiecare celulă a noastră RecyclerView grid este doar de gând să aibă o singur TextView. A crea un nou layout resource file.

recyclerview_item.xml

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




Crea adaptor

Anii RecyclerView are nevoie de un adaptor pentru a popula vizualizări în fiecare celulă cu datele tale. Creați un nou fișier 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);
    }
}

Note

  • Deși nu sunt strict necesare, am inclus funcționalitate pentru a asculta pentru evenimente click pe celule. Acest lucru a fost disponibil în vechiul GridView și este o nevoie comună. Puteți elimina acest cod, dacă nu't nevoie de ea.

Inițializa RecyclerView în Activitate

Adăugați următorul cod la activitatea 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);
    }
}

Note

  • Observați că activitatea implementează ItemClickListener pe care am definit-o în adaptor nostru. Acest lucru ne permite să se ocupe de celule faceți clic pe evenimente în onItemClick.

Terminat

Ca's a. Ar trebui să fie capabil de a rula dvs. de proiect și de a obține ceva similar cu imaginea de mai sus.

Întâmplă

Colturi rotunjite

Auto-montaj coloane

Studia în continuare

Comentarii (20)

Deși îmi place și apreciez Suragch's a răspunde, aș dori să las un bilet pentru că am constatat că codificare Adaptor (MyRecyclerViewAdapter) de a defini și de a expune Ascultător metoda onItemClick e't cel mai bun mod de a face asta, din cauza de a nu utiliza clasa de încapsulare corect. Deci, sugestia mea este de a lasa Adaptor se ocupe de operațiunile de Ascultare exclusiv (ca's scopul lui!) și separată a celor din Activitatea care utilizează Adaptor (MainActivity). Deci, acest lucru este cum am ar stabili clasa Adaptor:

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ă rugăm să rețineți onItemClick metoda definite în MyRecyclerViewAdapter care este locul în care ai vrea să-cod sarcinile pentru evenimentul/acțiunea a primit.

Există doar o mică schimbare să fie făcut în scopul de a finaliza această transformare: Activitate nu - 't nevoie pentru a pune în aplicare `MyRecyclerViewAdapter.ItemClickListener mai, pentru că acum se face complet de Adaptor. Aceasta va fi ultima modificare:

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);
    }
}
Comentarii (3)

Trebuie să Setați recyclerview layoutmanager să Gridlayout Modul , Pentru a Face Acest lucru Doar schimba codul dvs. atunci când Doriți Set RecyclerView LayoutManager :

Notă : înlocuiți Coloane Conta Că vrei cu ###AJUT###

recyclerView.setLayoutManager(nou GridLayoutManager(getActivity(),###AJUT###));

Comentarii (0)