Geen goed voorbeeld over RecyclerView en StaggeredGridLayoutManager in Android Docs

Ik kon geen beter voorbeeld vinden voor het gebruik van RecyclerViewmet StaggeredGridLayoutManager. Zelfs niet in Android Documenten.

Q1.Ik heb enkele voorbeelden nodig die een goede uitleg kunnen geven over het gebruik van RecyclerViewmet StaggeredGridLayoutManager.

Q2.Kan iemand mij vertellen of het mogelijk is om de volgende lay-out te maken met behulp van RecyclerViewmet StaggeredGridLayoutManager

voorbeeld

Tot nu toe heb ik deze linkgevonden die niet helemaal handig.

Ik vond ook deze linkvoor cardslib, maar het is te complex in implementatie en heeft te veel afhankelijkheden waardoor mijn app-grootte onnodig groter wordt.


Antwoord 1, autoriteit 100%

Voor degenen die nog steeds op deze vraag belanden.

U kunt de volgende code aanpassen aan uw behoeften:

Voeg eerst afhankelijkheidsbibliotheken toe voor Android RecyclerView en CardView

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:recyclerview-v7:23.4.0'

Uw hoofdactiviteitslay-out activity_main.xmlzal er zo uitzien als

<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"
    android:padding="7dp"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
</RelativeLayout>

Definieer de lay-out van een kaart in een lay-outbestand met de naam book_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical">
    <TextView
        android:id="@+id/BookName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />
    <TextView
        android:id="@+id/AuthorName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/country_photo"
        android:background="#1976D2"
        android:gravity="center_horizontal"
        android:paddingBottom="8dp"
        android:paddingTop="8dp"
        android:text="@string/hello_world"
        android:textColor="#ffffff"
        android:textSize="13sp" />
</LinearLayout>
</android.support.v7.widget.CardView> 

Definieer deze lay-out als een klasse ItemObject.java

public class ItemObject
{
    private String _name;
    private String _author;
    public ItemObject(String name, String auth)
    {
        this._name = name;
        this._author = auth;
    }
    public String getName()
    {
        return _name;
    }
    public void setName(String name)
    {
        this._name = name;
    }
    public String getAuthor()
    {
        return _author;
    }
    public void setAuthor(String auth)
    {
        this._author = auth;
    }
}

Definieer een aangepaste adapter SampleRecyclerViewAdapterom de kaarten te vullen

public class SampleRecyclerViewAdapter extends RecyclerView.Adapter<SampleViewHolders>
{
    private List<ItemObject> itemList;
    private Context context;
    public SampleRecyclerViewAdapter(Context context,
        List<ItemObject> itemList)
    {
        this.itemList = itemList;
        this.context = context;
    }
    @Override
    public SampleViewHolders onCreateViewHolder(ViewGroup parent, int viewType)
    {
        View layoutView = LayoutInflater.from(parent.getContext()).inflate(
            R.layout.book_list_item, null);
        SampleViewHolders rcv = new SampleViewHolders(layoutView);
        return rcv;
    }
    @Override
    public void onBindViewHolder(SampleViewHolders holder, int position)
    {
        holder.bookName.setText(itemList.get(position).getName());
        holder.authorName.setText(itemList.get(position).getAuthor());
    }
    @Override
    public int getItemCount()
    {
        return this.itemList.size();
    }
}

We hebben ook een viewholder nodig voor elk ItemObject. Dus definieer een klasse SampleViewHolders

public class SampleViewHolders extends RecyclerView.ViewHolder implements
    View.OnClickListener
{
    public TextView bookName;
    public TextView authorName;
    public SampleViewHolders(View itemView)
    {
        super(itemView);
        itemView.setOnClickListener(this);
        bookName = (TextView) itemView.findViewById(R.id.BookName);
        authorName = (TextView) itemView.findViewById(R.id.AuthorName);
    }
    @Override
    public void onClick(View view)
    {
        Toast.makeText(view.getContext(),
            "Clicked Position = " + getPosition(), Toast.LENGTH_SHORT)
            .show();
    }
}

Wijs nu in MainActivityeen instantie van StaggeredGridLayoutManager toe aan recycler_viewom te definiëren hoe de componenten eruit zullen zien.
Vul de kaarten ook in met de instantie van SampleRecyclerViewAdapter , als volgt

public class MainActivity extends AppCompatActivity
{
    private StaggeredGridLayoutManager _sGridLayoutManager;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        _sGridLayoutManager = new StaggeredGridLayoutManager(2,
            StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(_sGridLayoutManager);
        List<ItemObject> sList = getListItemData();
        SampleRecyclerViewAdapter rcAdapter = new SampleRecyclerViewAdapter(
            MainActivity.this, sList);
        recyclerView.setAdapter(rcAdapter);
    }
    private List<ItemObject> getListItemData()
    {
        List<ItemObject> listViewItems = new ArrayList<ItemObject>();
        listViewItems.add(new ItemObject("1984", "George Orwell"));
        listViewItems.add(new ItemObject("Pride and Prejudice", "Jane Austen"));
        listViewItems.add(new ItemObject("One Hundred Years of Solitude", "Gabriel Garcia Marquez"));
        listViewItems.add(new ItemObject("The Book Thief", "Markus Zusak"));
        listViewItems.add(new ItemObject("The Hunger Games", "Suzanne Collins"));
        listViewItems.add(new ItemObject("The Hitchhiker's Guide to the Galaxy", "Douglas Adams"));
        listViewItems.add(new ItemObject("The Theory Of Everything", "Dr Stephen Hawking"));
        return listViewItems;
    }
}

Uitvoer ziet er ongeveer zo uit
Twee kolommen uitvoer

Voor uw behoefte kunt u een ImageView opnemen in book_list_item.xml en deze dienovereenkomstig invullen in SampleViewHolders

Merk ook op dat als u het aantal kolommen wilt wijzigen van 2 naar 3.

U kunt de aangifte in MainActivity wijzigen als

_sGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(_sGridLayoutManager);

Wat een uitvoer als deze geeft
Uitvoer met drie kolommen

Hier is nog een eenvoudige tutorial


Antwoord 2, autoriteit 20%

Ervan uitgaande dat je al een adapter hebt gemaakt en de RecyclerView hebt geïnitialiseerd, zou de volgende code moeten doen wat je zoekt.

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);

Kijk voor meer referentie en documentatie op de volgende link:
https://developer.android.com/reference/android/support /v7/widget/StaggeredGridLayoutManager.html


Antwoord 3, autoriteit 3%

Onze vrienden “Henry” hebben een goede en eenvoudige uitleg hier.

En ik denk dat onderstaande constructor geschikt is voor de meeste toepassingen:

StaggeredGridLayoutManager(num , LinearLayoutManager.VERTICAL)
// where 'num' is your columns count
// LinearLayoutManager.VERTICAL = 1

Other episodes