personalizado - Ningún buen ejemplo sobre RecyclerView y StaggeredGridLayoutManager en Android Docs

recyclerview android studio ejemplo

Question

No pude encontrar un mejor ejemplo para usar RecyclerView con StaggeredGridLayoutManager . Ni siquiera en Android Docs .

Q1. Necesito algunos ejemplos que puedan dar una explicación adecuada sobre cómo usar RecyclerView con StaggeredGridLayoutManager .

Q2. ¿Alguien puede decirme si es posible crear el siguiente diseño usando RecyclerView con StaggeredGridLayoutManager

Hasta ahora he encontrado este link que no es del todo útil.

También encontré este link para cardslib pero es demasiado complejo en la implementación y tiene demasiadas dependencias que aumentarán innecesariamente el tamaño de mi aplicación.

Answer 1

Nuestros amigos "Henry" tienen una explicación buena y simple here .

Y creo que debajo de constructor es adecuado para la mayoría de los usos:

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

Answer 2

Para aquellos que todavía están llegando a esta pregunta.

Puede modificar el siguiente código según sus necesidades:
Primero agregue bibliotecas de dependencia para Android RecyclerView y 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''

Su diseño de actividad principal activity_main.xml simplemente será como

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

Definir el diseño de una tarjeta en un archivo de diseño llamado 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>

Defina este diseño como una clase 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;
}
}

Defina un adaptador personalizado SampleRecyclerViewAdapter para rellenar las tarjetas

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

También necesitaríamos un visor para cada ItemObject . Así que defina una clase 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();
}
}

Ahora en MainActivity , asigne una instancia de StaggeredGridLayoutManager a recycler_view para definir cómo aparecerán los componentes.
También rellene las tarjetas con la instancia de SampleRecyclerViewAdapter , de la siguiente manera

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 salida se verá algo como esto

Para su requerimiento, puede incorporar un ImageView en book_list_item.xml y llenarlo según corresponda en SampleViewHolders
También tenga en cuenta, para cambiar el número de columnas de 2 a 3.

Podría cambiar la declaración en MainActivity como

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

Lo cual dará un resultado como este

Aquí hay otro tutorial simple

Answer 3

Suponiendo que ya ha creado un adaptador e inicializado el RecyclerView, el siguiente código debería hacer lo que está buscando.

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

Para obtener más referencias y documentación, consulte el siguiente enlace: https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html