Vollständiges Beispiel
Der einzige wirkliche Unterschied zwischen einem vertikalen RecyclerViewund einem horizontalen besteht darin, wie Sie das einrichten LinearLayoutManager. Hier ist das Code-Snippet. Das vollständige Beispiel finden Sie unten.
LinearLayoutManager horizontalLayoutManagaer = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(horizontalLayoutManagaer);
Dieses ausführlichere Beispiel ist meiner vertikalen RecyclerViewAntwort nachempfunden .
Aktualisieren Sie Gradle-Abhängigkeiten
Stellen Sie sicher, dass die folgenden Abhängigkeiten in Ihrer App- gradle.buildDatei enthalten sind:
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:recyclerview-v7:27.1.1'
Sie können die Versionsnummern auf die aktuellsten aktualisieren .
Aktivitätslayout erstellen
Fügen Sie das RecyclerViewIhrem XML-Layout hinzu.
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/rvAnimals"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Elementlayout erstellen
Jeder Artikel in unserem RecyclerViewwird ein einzelnes ein farbiges Viewüber ein haben TextView. Erstellen Sie eine neue Layoutressourcendatei.
recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<View
android:id="@+id/colorView"
android:layout_width="100dp"
android:layout_height="100dp"/>
<TextView
android:id="@+id/tvAnimalName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
Erstellen Sie den Adapter
Sie RecyclerViewbenötigen einen Adapter, um die Ansichten in jeder Zeile (horizontales Element) mit Ihren Daten zu füllen. Erstellen Sie eine neue Java-Datei.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
private List<Integer> mViewColors;
private List<String> mAnimals;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, List<Integer> colors, List<String> animals) {
this.mInflater = LayoutInflater.from(context);
this.mViewColors = colors;
this.mAnimals = animals;
}
// inflates the row 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 view and textview in each row
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
int color = mViewColors.get(position);
String animal = mAnimals.get(position);
holder.myView.setBackgroundColor(color);
holder.myTextView.setText(animal);
}
// total number of rows
@Override
public int getItemCount() {
return mAnimals.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
View myView;
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myView = itemView.findViewById(R.id.colorView);
myTextView = itemView.findViewById(R.id.tvAnimalName);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
}
}
// convenience method for getting data at click position
public String getItem(int id) {
return mAnimals.get(id);
}
// allows clicks events to be caught
public 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);
}
}
Anmerkungen
- Obwohl dies nicht unbedingt erforderlich ist, habe ich die Funktionalität zum Abhören von Klickereignissen für die Elemente hinzugefügt. Dies war in der alten verfügbar
ListViewsund ist ein allgemeines Bedürfnis. Sie können diesen Code entfernen, wenn Sie ihn nicht benötigen.
Initialisieren Sie RecyclerView in Aktivität
Fügen Sie Ihrer Hauptaktivität den folgenden Code hinzu.
MainActivity.java
public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {
private MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
ArrayList<Integer> viewColors = new ArrayList<>();
viewColors.add(Color.BLUE);
viewColors.add(Color.YELLOW);
viewColors.add(Color.MAGENTA);
viewColors.add(Color.RED);
viewColors.add(Color.BLACK);
ArrayList<String> animalNames = new ArrayList<>();
animalNames.add("Horse");
animalNames.add("Cow");
animalNames.add("Camel");
animalNames.add("Sheep");
animalNames.add("Goat");
// set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.rvAnimals);
LinearLayoutManager horizontalLayoutManager
= new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(horizontalLayoutManager);
adapter = new MyRecyclerViewAdapter(this, viewColors, animalNames);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on item position " + position, Toast.LENGTH_SHORT).show();
}
}
Anmerkungen
- Beachten Sie, dass die Aktivität das implementiert
ItemClickListener, was wir in unserem Adapter definiert haben. Auf diese Weise können wir Artikelklickereignisse in verarbeiten onItemClick.
Fertig
Das ist es. Sie sollten jetzt in der Lage sein, Ihr Projekt auszuführen und etwas Ähnliches wie das Bild oben zu erhalten.
Anmerkungen
LinearLayoutManagermit Ausrichtung aufHORIZONTAL.