In der Welt der Android-Entwicklung ist effizientes Layout ein entscheidender Faktor für eine benutzerfreundliche Anwendung. Eine beliebte Methode, um Inhalte in einer Rasteransicht anzuzeigen, ist die Verwendung von GridLayoutManager in Verbindung mit RecyclerView. In diesem Tutorial werden wir einen Überblick über die Verwendung von GridLayoutManager geben und zeigen, wie man damit eine Rasteransicht in einer Android-Anwendung implementiert.
Projektstruktur
Bevor wir uns in die Implementierung vertiefen, werfen wir einen Blick auf die Projektstruktur. Unser Beispielprojekt besteht aus einer Activity (MainActivity.java), einem Adapter (RecyclerViewAdapter.java), einer Datenmodellklasse (DataModel.java) und einer benutzerdefinierten GridLayoutManager-Klasse (AutoFitGridLayoutManager.java).
// DataModel.java
package com.journaldev.recyclerviewgridlayoutmanager;
public class DataModel {
public String text;
public int drawable;
public String color;
public DataModel(String t, int d, String c ) {
text=t;
drawable=d;
color=c;
}
}
// RecyclerViewAdapter.java
package com.journaldev.recyclerviewgridlayoutmanager;
import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class RecyclerViewAdapter extends RecyclerView.Adapter {
private ArrayList mValues;
private Context mContext;
private ItemListener mListener;
public RecyclerViewAdapter(Context context, ArrayList values, ItemListener itemListener) {
mValues = values;
mContext = context;
mListener = itemListener;
}
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public TextView textView;
public ImageView imageView;
public RelativeLayout relativeLayout;
DataModel item;
public ViewHolder(View v) {
super(v);
v.setOnClickListener(this);
textView = v.findViewById(R.id.textView);
imageView = v.findViewById(R.id.imageView);
relativeLayout = v.findViewById(R.id.relativeLayout);
}
public void setData(DataModel item) {
this.item = item;
textView.setText(item.text);
imageView.setImageResource(item.drawable);
relativeLayout.setBackgroundColor(Color.parseColor(item.color));
}
@Override
public void onClick(View view) {
if (mListener != null) {
mListener.onItemClick(item);
}
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_view_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.setData(mValues.get(position));
}
@Override
public int getItemCount() {
return mValues.size();
}
public interface ItemListener {
void onItemClick(DataModel item);
}
}Die Datenmodellklasse DataModel hält die Details für jedes Element in der Rasteransicht. Der Adapter RecyclerViewAdapter bindet die Daten an die RecyclerView und behandelt Klickereignisse.
Passende Infrastruktur bei centron
Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →
Benutzerdefinierte GridLayoutManager-Klasse
// AutoFitGridLayoutManager.java
package com.journaldev.recyclerviewgridlayoutmanager;
import android.content.Context;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
public class AutoFitGridLayoutManager extends GridLayoutManager {
private int columnWidth;
private boolean columnWidthChanged = true;
public AutoFitGridLayoutManager(Context context, int columnWidth) {
super(context, 1);
setColumnWidth(columnWidth);
}
public void setColumnWidth(int newColumnWidth) {
if (newColumnWidth > 0 && newColumnWidth != columnWidth) {
columnWidth = newColumnWidth;
columnWidthChanged = true;
}
}
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
if (columnWidthChanged && columnWidth > 0) {
int totalSpace;
if (getOrientation() == VERTICAL) {
totalSpace = getWidth() - getPaddingRight() - getPaddingLeft();
} else {
totalSpace = getHeight() - getPaddingTop() - getPaddingBottom();
}
int spanCount = Math.max(1, totalSpace / columnWidth);
setSpanCount(spanCount);
columnWidthChanged = false;
}
super.onLayoutChildren(recycler, state);
}
}Die benutzerdefinierte AutoFitGridLayoutManager-Klasse berechnet automatisch die Anzahl der Spalten basierend auf der verfügbaren Breite und dem definierten Spaltenbreitenwert.
Implementierung
In der MainActivity wird die RecyclerView initialisiert und mit Daten gefüllt. Durch Implementierung des RecyclerViewAdapter.ItemListener-Interfaces können Klickereignisse direkt in der Activity behandelt werden, was die Modularität des Codes verbessert.
// MainActivity.java
package com.journaldev.recyclerviewgridlayoutmanager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements RecyclerViewAdapter.ItemListener {
RecyclerView recyclerView;
ArrayList arrayList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
arrayList = new ArrayList<>();
arrayList.add(new DataModel("Item 1", R.drawable.battle, "#09A9FF"));
arrayList.add(new DataModel("Item 2", R.drawable.beer, "#3E51B1"));
arrayList.add(new DataModel("Item 3", R.drawable.ferrari, "#673BB7"));
arrayList.add(new DataModel("Item 4", R.drawable.jetpack_joyride, "#4BAA50"));
arrayList.add(new DataModel("Item 5", R.drawable.three_d, "#F94336"));
arrayList.add(new DataModel("Item 6", R.drawable.terraria, "#0A9B88"));
RecyclerViewAdapter adapter = new RecyclerViewAdapter(this, arrayList, this);
recyclerView.setAdapter(adapter);
// Benutzerdefinierte GridLayoutManager verwenden
AutoFitGridLayoutManager layoutManager = new AutoFitGridLayoutManager(this, 500);
recyclerView.setLayoutManager(layoutManager);
}
@Override
public void onItemClick(DataModel item) {
Toast.makeText(getApplicationContext(), item.text + " is clicked", Toast.LENGTH_SHORT).show();
}
}Die MainActivity implementiert das RecyclerViewAdapter.ItemListener-Interface und behandelt Klickereignisse direkt. Die RecyclerView wird mit Daten gefüllt und der benutzerdefinierte AutoFitGridLayoutManager wird verwendet, um die Rasteransicht dynamisch an die Bildschirmgröße anzupassen.
Fazit
GridLayoutManager ist eine leistungsstarke Option für die Implementierung einer Rasteransicht in Android-Anwendungen. Durch die Kombination mit RecyclerView und einem gut strukturierten Adapter können Entwickler benutzerfreundliche Anwendungen erstellen, die sich dynamisch an verschiedene Bildschirmgrößen und -ausrichtungen anpassen.
Mit diesem Tutorial haben Sie einen grundlegenden Einblick in die Verwendung von GridLayoutManager erhalten und können nun damit beginnen, Rasteransichten in Ihren eigenen Android-Anwendungen zu implementieren.
Testen Sie Ihr Setup auf ccloud³
Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.