Android grid layout gleiche spalten größe

GridView: Eine ViewGroup , die die Elemente in einem zweidimensionalen Bildlaufraster anzeigt. In der Rasteransicht hat jedes Raster die gleiche Größe, dh Höhe und Breite jedes Rasters sind gleich. Es zeigt symmetrische Elemente in den Ansichten. 

Staggered GridView: Diese ViewGroup ist die Erweiterung der Grid-Ansicht. In dieser Ansicht hat das Raster eine unterschiedliche Größe, dh seine Höhe und Breite kann variieren. Es zeigt asymmetrische Elemente in den Ansichten. Es stellt die Elementansichten automatisch entsprechend ihrer Höhe und Breite ein.

Um RecyclerView zum Erstellen von Staffelungsrasteransichten zu verwenden, müssen wir StaggeredGridLayoutManager verwenden. LayoutManager ist für das Messen und Positionieren von Artikelansichten in der RecyclerView verantwortlich und recycelt auch die Artikelansichten, wenn sie für den Benutzer nicht mehr sichtbar sind. Es gibt drei Arten von integrierten Layout-Managern.

1. LinearLayoutManager: Wird verwendet, um Elementansichten in einer vertikalen und horizontalen Liste anzuzeigen.
2. GridLayoutManager: Es wird verwendet, um Gitteransichten von Elementansichten anzuzeigen.
3. StaggeredLayoutManager: Wird verwendet, um Elementansichten in gestaffelten Ansichten anzuzeigen.

Wir können auch einen benutzerdefinierten Layout-Manager mit der RecyclerView.LayoutManager-Klasse erstellen.

StaggeredGridLayoutManager (int spanCount, int-Ausrichtung) 

• Erstellt ein gestaffeltes Rasterlayout mit den angegebenen Parametern
• Der erste Parameter, spanCount, wird verwendet, um die Anzahl der Spalten in vertikaler Ausrichtung oder die Anzahl der Zeilen in horizontaler Ausrichtung festzulegen
• Der zweite Parameter, direction, wird verwendet, um die vertikale oder horizontale Ausrichtung einzustellen

Gestaffeltes Raster mit vertikaler Ausrichtung

RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

// StaggeredGridLayoutManager mit 3 Spalten und vertikaler Ausrichtung

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);

// Setze das Layout der Recycler-Ansicht auf ein gestaffeltes Raster

recyclerView.setLayoutManager (staggeredGridLayoutManager);
 

Versetztes Raster mit horizontaler Ausrichtung

RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

// StaggeredGridLayoutManager mit 3 Zeilen und horizontaler Ausrichtung

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.HORIZONTAL);

// Setze das Layout der Recycler-Ansicht auf ein gestaffeltes Raster

recyclerView.setLayoutManager (staggeredGridLayoutManager);
 

Beispiel

In diesem Beispiel würden wir Daten in ArrayList speichern, die zum Auffüllen von RecyclerView verwendet wird . Danach stellen wir den Layout-Manager von RecyclerView als gestaffelte Rasteransicht ein und dann stellen wir den Adapter für RecyclerView so ein, dass er Artikelansichten anzeigt. Ein Beispiel-GIF ist unten angegeben, um eine Vorstellung davon zu bekommen, was wir in diesem Artikel tun werden. Beachten Sie, dass wir dieses Projekt mit der Java -Sprache implementieren werden. 

Schritt für Schritt Umsetzung

Schritt 1: Erstellen Sie ein neues Projekt

Informationen zum Erstellen eines neuen Projekts in Android Studio finden Sie unter So erstellen/starten Sie ein neues Projekt in Android Studio . Beachten Sie, dass Sie Java als Programmiersprache auswählen .

Schritt 2: Abhängigkeiten hinzufügen

Wir werden RecyclerView verwenden. Also müssen wir die Abhängigkeit davon hinzufügen. Um die Abhängigkeit hinzuzufügen, gehen Sie zu Gradle Scripts > build.gradle(Module: app) und fügen Sie die folgenden Abhängigkeiten hinzu. Nachdem Sie diese Abhängigkeiten hinzugefügt haben, müssen Sie auf Jetzt synchronisieren klicken .

Abhängigkeiten {

  Implementierung „androidx.recyclerview:recyclerview:1.1.0“

}

Bevor wir fortfahren, fügen wir einige Farbattribute hinzu, um die App-Leiste zu verbessern. Gehen Sie zu app > res > values ​​> colors.xml und fügen Sie die folgenden Farbattribute hinzu. 

XML

<resources>  
    <color name="colorPrimary">#0F9D58</color>  
    <color name="colorPrimaryDark">#16E37F</color>  
    <color name="colorAccent">#03DAC5</color>  
</resources>

Schritt 3: Arbeiten mit der Datei activity_main.xml

In diesem Schritt erstellen wir ein RecyclerView-Layout in der Datei activity_main.xml . Gehen Sie zu app > res > layout > activity_main.xml und fügen Sie das folgende Code-Snippet hinzu. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Schritt 4: Erstellen Sie eine neue Layoutdatei list_item.xml für die Listenelemente von RecyclerView

Gehen Sie zur App > res > Layout > Rechtsklick > Neu > Layout-Ressourcendatei und benennen Sie sie als list_item. Die Layoutdatei list_item.xml enthält eine ImageView , die zum Füllen der Zeilen von RecyclerView verwendet wird.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="4dp">
  
    <!--For image src we have used ic_launcher
        it is used only for reference how it will look"-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />
      
</RelativeLayout>

Schritt 5: Adapterklasse für RecyclerView erstellen

Jetzt erstellen wir eine Adapter.java-Klasse , die RecyclerView.Adapter mit ViewHolder erweitert. Gehen Sie zu app > java > package > klicken Sie mit der rechten Maustaste und erstellen Sie eine neue Java-Klasse und benennen Sie sie als Adapter . In der Adapter-Klasse überschreiben wir die onCreateViewHolder()- Methode, die das list_item.xml-Layout aufbläht und an View Holder weitergibt. Dann die Methode onBindViewHolder() , bei der wir mit Hilfe von View Holder Daten zu den Views setzen. Unten ist das Code-Snippet für die Adapter.java -Klasse.

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
  
// Extends the Adapter class to RecyclerView.Adapter
// and implement the unimplemented methods
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    ArrayList images;
    Context context;
  
    // Constructor for initialization
    public Adapter(Context context, ArrayList images) {
        this.context = context;
        this.images = images;
    }
  
    @NonNull
    @Override
    public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflating the Layout(Instantiates list_item.xml layout file into View object)
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
  
        // Passing view to ViewHolder
        Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
        return viewHolder;
    }
  
    // Binding data to the into specified position
    @Override
    public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
        // TypeCast Object to int type
        int res = (int) images.get(position);
        holder.images.setImageResource(res);
    }
  
    @Override
    public int getItemCount() {
        // Returns number of items currently available in Adapter
        return images.size();
    }
  
    // Initializing the Views
    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView images;
  
        public ViewHolder(View view) {
            super(view);
            images = (ImageView) view.findViewById(R.id.imageView);
        }
    }
}

Schritt 6: Arbeiten mit der MainActivity.java-Datei

In der Klasse MainActivity.java erstellen wir eine ArrayList zum Speichern von Bildern. Diese Bilder werden im Drawable-Ordner abgelegt ( app > res > drawable ). Sie können stattdessen beliebige Bilder verwenden. Und dann erhalten wir die Referenz RecyclerView und legen den LayoutManager als StaggeredGridLayoutManager und Adapter fest, um Elemente in RecyclerView anzuzeigen. Unten ist der Code für die MainActivity.java-Datei.

Java

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
  
public class MainActivity extends AppCompatActivity {
      
    RecyclerView recyclerView;
  
    // Using ArrayList to store images data
    ArrayList images = new ArrayList<>(Arrays.asList(R.drawable.img_1, R.drawable.img_2, R.drawable.img_3,
            R.drawable.img_4, R.drawable.img_5, R.drawable.img_6, R.drawable.img_7, R.drawable.img_8,
            R.drawable.img_9, R.drawable.img_10));
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Getting reference of recyclerView
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
  
        // Setting the layout as Staggered Grid for vertical orientation
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
  
        // Sending reference and data to Adapter
        Adapter adapter = new Adapter(MainActivity.this, images);
  
        // Setting Adapter to RecyclerView
        recyclerView.setAdapter(adapter);
    }
}

Ausgabe: Auf Emulator ausführen

https://media.geeksforgeeks.org/wp-content/uploads/20201113000122/RecyclerView-as-Staggered-Grid-in-Android.mp4

Möchten Sie eine schnellere und wettbewerbsfähigere Umgebung, um die Grundlagen von Android zu erlernen?

Klicken Sie hier , um zu einem Leitfaden zu gelangen, der von unseren Experten speziell kuratiert wurde, um Ihre Branche in kürzester Zeit bereit zu machen!

Wie viele Dimensionen werden in einem grid Layout angegeben?

Was ist Inline grid?

Was macht Display grid?

Was ist 1fr?