web-dev-qa-db-fra.com

Aucun bon exemple sur RecyclerView et StaggeredGridLayoutManager dans Android Docs

Je n'ai pas pu trouver de meilleur exemple d'utilisation de RecyclerView avec StaggeredGridLayoutManager. Pas même dans Android Docs .

Q1. J'ai besoin d'exemples pouvant donner une explication appropriée sur l'utilisation de RecyclerView avec StaggeredGridLayoutManager.

Q2. Quelqu'un peut-il me dire s'il est possible de créer une disposition suivante en utilisant RecyclerView avec StaggeredGridLayoutManager 

example

Jusqu'à présent, j'ai trouvé ce lien qui n'est pas du tout utile.

J'ai aussi trouvé ce lien pour cardslib, mais sa mise en œuvre est trop complexe et comporte trop de dépendances, ce qui augmentera inutilement la taille de mon application.

androidandroid-recyclerviewstaggered-gridview
38
Amrut Bidri

Pour ceux qui se posent encore sur cette question .

Vous pouvez modifier le code suivant selon vos besoins:
D'abord ajouter les bibliothèques de dépendances pour Android RecyclerView et 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'

Votre structure d'activité principale activity_main.xml sera simplement comme

<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>


Définir la mise en page d’une carte dans un fichier de mise en page nommé 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>


Définir cette mise en page en tant que classe 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;
    }
}


Définir un adaptateur personnalisé SampleRecyclerViewAdapter remplir les cartes

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();
    }
}


Nous aurions également besoin d'un spectateur pour chaque ItemObject. Alors définissez une classe 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();
    }
}

Maintenant en Activité principale, affectez une instance de StaggeredGridLayoutManager à recycler_view définir comment les composants vont apparaître.
Remplissez également les cartes en utilisant instance de SampleRecyclerViewAdapter, comme suit

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;
    }
}

La sortie ressemblera à quelque chose comme ceci  Two Colums Output

Selon vos besoins, vous pouvez incorporer un ImageView dans book_list_item.xml et le renseigner en conséquence dans SampleViewHolders
Notez également que vous pouvez changer le nombre de colonnes de 2 à 3.

Vous pouvez changer la déclaration dans MainActivity en tant que

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

Ce qui donnera une sortie comme celle-ci  Three Column Output

Voici un autre tutoriel simple

48
g4th

En supposant que vous ayez déjà créé un adaptateur et initialisé RecyclerView, le code suivant devrait faire ce que vous recherchez.

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

Pour plus de références et de documentation, veuillez consulter le lien suivant: https://developer.Android.com/reference/Android/support/v7/widget/StaggeredGridLayoutManager.html

6
J-me

Nos amis "Henry" ont un bon et simple expliquer ici .

Et je pense que constructeur ci-dessous est adapté à la plupart des utilisations:

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