Ik weet dat RecyclerView
de functionaliteit van de oude ListView
en GridView
heeft vervangen. Ik ben op zoek naar een zeer eenvoudig voorbeeld dat een minimale grid setup laat zien met RecyclerView
. Ik ben niet op zoek naar lange uitleg in tutorial stijl, gewoon een minimaal voorbeeld. Ik stel me voor dat het eenvoudigste raster dat het oude GridView nabootst uit de volgende eigenschappen zou bestaan:
Voor degenen die al bekend zijn met het opzetten van een RecyclerView
om een lijst te maken, is het goede nieuws dat het maken van een grid grotendeels hetzelfde is. Je gebruikt gewoon een GridLayoutManager
in plaats van een LinearLayoutManager
wanneer je de RecyclerView
opzet.
recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
Als je meer hulp nodig hebt dan dat, bekijk dan het volgende voorbeeld.
Het volgende is een minimaal voorbeeld dat eruit zal zien als de afbeelding hieronder.
Begin met een lege activiteit. U zult de volgende taken uitvoeren om het RecyclerView
raster toe te voegen. Het enige wat je hoeft te doen is de code kopiëren en plakken in elke sectie. Later kunt u het aanpassen aan uw behoeften.
Zorg ervoor dat de volgende afhankelijkheden in je app gradle.build
bestand staan:
compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'
U kunt de versienummers bijwerken naar wat de meest actuele is.
Voeg de RecyclerView
toe aan je xml layout.
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>
Elke cel in ons RecyclerView
raster zal slechts een enkele TextView
hebben. Maak een nieuw layout resource bestand.
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>
De RecyclerView
heeft een adapter nodig om de views in elke cel te vullen met je gegevens. Maak een nieuw java bestand.
MijnRecyclerViewAdapter.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);
}
}
Opmerkingen
GridView
en is een veel voorkomende behoefte. Je kunt deze code verwijderen als je het niet nodig hebt.Voeg de volgende code toe aan je hoofdactiviteit.
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);
}
}
Opmerkingen
ItemClickListener
implementeert die we gedefinieerd hebben in onze adapter. Dit stelt ons in staat om cel klik gebeurtenissen af te handelen in onItemClick
.Dat's het. Je zou nu in staat moeten zijn om je project uit te voeren en iets te krijgen dat lijkt op de afbeelding bovenaan.
Afgeronde hoeken
Kolommen automatisch passend maken
Hoewel ik Suragch's antwoord leuk en waardeer, wil ik toch een opmerking achterlaten omdat ik vond dat het coderen van de Adapter (MijnRecyclerViewAdapter
) om de Listener methode onItemClick
te definiëren en bloot te stellen'niet de beste manier is om het te doen, vanwege het niet correct gebruiken van class encapsulation. Dus mijn suggestie is om de Adapter alleen de Listening operaties te laten afhandelen (dat'is zijn doel!) en die te scheiden van de Activiteit die de Adapter gebruikt (MainActivity
). Dus dit is hoe ik de Adapter klasse zou instellen:
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);
}
}
Let op de onItemClick
methode die nu gedefinieerd is in MyRecyclerViewAdapter
dat is de plaats waar u uw taken voor de ontvangen gebeurtenis/actie zou willen coderen.
Er is slechts een kleine wijziging te doen om deze transformatie te voltooien: de Activity hoeft MyRecyclerViewAdapter.ItemClickListener
niet meer te implementeren, want dat wordt nu volledig door de Adapter gedaan. Dit zou dan de laatste wijziging zijn:
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);
}
}
Je moet je recyclerview layoutmanager instellen op Gridlayoutmodus, hiervoor moet je gewoon je code wijzigen wanneer je je RecyclerView LayoutManager wilt instellen:
Opmerking: vervang uw kolommen tellen dat u wilt met ###HELP###
recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));