RecyclerView: ItemDecoration

Las RecyclerView nos permiten mostrar de una manera visual y agradable grandes colecciones de datos con una gran flexibilidad que hasta ahora no se podía conseguir con las ListView o las GridView. Esto es gracias a que el RecyclerView no hace casi nada por si mismo, si no que aprovecha los componentes complementarios de los que dispone para determinar tanto la forma de acceso, como la manera de visualizar los datos. Antes del salto se pueden ver los componentes más importantes y después del salto entraremos a ver con detalle el ItemDecoration.

 

Los ItemDecoration basicamente sirven para modificar el aspecto que tiene nuestro RecyclerView. Se pueden agregar cuantos ItemDecoration se deseen, pero se tendrán que agregar en el orden que se quiere que aparezcan, ya que cada método de dibujo los llamará en ese orden. Esto nos puede ser útil para añadir separadores entre los diferentes ítems que se muestran, resaltar o crear grupos de ítems.

La clase abstracta RecyclerView.ItemDecoration contiene tres métodos:

  • public void onDraw(Canvas c, RecyclerView parent)
  • public void onDrawOver(Canvas c, RecyclerView parent)
  • public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent)

Hay que tener en cuenta que lo que se dibuje en onDraw(), puede quedar escondido por el contenido de los ítems, mientras que lo dibujado en onDrawOver() se dibujará por encima de estos.

getItemOffset() es llamado por el LayoutManager para calcular el tamaño correcto de cada ítem. dentro de este método, la variable outRect se utiliza para ahorrar recursos, pues el RecyclerView puede utilizar la misma para todas las vistas.

Ejemplo

Hasta aquí la definición del ItemDecoration. Aún así es todo muy abstracto ¿no? Así que vamos a ver como podríamos aplicar esto a una aplicación.

Para ello vamos a utilizar el ItemDecoration DividerItemDecoration.java de Alex Fu que podemos encontrar en GitHub. La descargamos y la agregamos a nuestro proyecto. En mi caso utilizaré el ejercicio de clase RecyclerViewCountry.

Para añadir los separadores a nuestra aplicación, desde la MainActivity instanciamos un objeto de la clase DividerItemDecoration (la clase que descargamos desde GitHub) a la que pasamos el contexto y la orientación del ListView que estamos utilizando (Vertical en mi caso)

rvPaises = (RecyclerView) findViewById(R.id.rvPaises);
rvPaises.setHasFixedSize(true);

CountryAdapter adaptador = new CountryAdapter(paises);

rvPaises.setAdapter(adaptador);

rvPaises.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));

RecyclerView.ItemDecoration decorador = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
rvPaises.addItemDecoration(decorador);

Con estas dos lineas instanciamos el objeto de tipo DividerItemDecoration y se lo añadimos al ReciclerView(rvPaises)

De la clase debemos conocer el método onDraw(), que llama al método correspondiente según la orientación.

@Override
public void onDraw(Canvas c, RecyclerView parent) {
    if (mOrientation == VERTICAL_LIST) {
        drawVertical(c, parent);
    } else {
        drawHorizontal(c, parent);
    }
}
public void drawHorizontal(Canvas c, RecyclerView parent) {
 final int top = parent.getPaddingTop();
 final int bottom = parent.getHeight() - parent.getPaddingBottom();

 final int childCount = parent.getChildCount();
 for (int i = 0; i < childCount; i++) {
 final View child = parent.getChildAt(i);
 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
 .getLayoutParams();
 final int left = child.getRight() + params.rightMargin;
 final int right = left + mDivider.getIntrinsicHeight();
 mDivider.setBounds(left, top, right, bottom);
 mDivider.draw(c);
 }
}

Y el metodo getItemOffsets()

@Override
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
    if (mOrientation == VERTICAL_LIST) {
        outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
    } else {
        outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
    }
}

Si no utilizamos el ItemDecoration, la aplicación tendrá este aspecto:

2015-11-18_00-46-43

 

Cuando lo utilizamos, tendrá este otro:

2015-11-18_00-47-26

 

 

Anuncios
RecyclerView: ItemDecoration

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s