Efecto de cabecera de Parallax con RecyclerView
Quiero cambiar mi ListView que tengo actualmente para usar RecyclerView
así que puedo hacer uso de StaggeredGridLayoutManager
pero RecyclerView no tiene la capacidad de agregar una cabecera como ListView.
Normalmente con un ListView establezco una vista vacía en el encabezado y pongo la imagen debajo de la vista de lista y traduce la imagen inferior con el desplazamiento de la lista para crear el efecto Parallax
.
- RecyclerVer el número de elementos visibles
- RecyclerView add EmptyView
- Cómo recorrer los elementos en Android RecyclerView?
- Anular la animación para notifyItemChanged en RecyclerView.Adapter
- Eliminar elementos basados en el cursor en RecyclerView
Así que con un encabezado ¿cómo puedo crear el mismo efecto de paralaje con RecyclerView
?
- ¿Por qué RecyclerView no tiene onItemClickListener ()?
- RecyclerView onClick notifyItemRemoved no desencadena onBindView
- RecyclerView - saltar a la posición, luego desplazamiento suave hasta la parte superior
- Cómo obtener el elemento del adaptador RecyclerView en Android
- ¿Cómo centrar los elementos de RecyclerView?
- ¿Cómo cambiar el color del elemento Recycler?
- Error al inflar la clase android.support.v7.widget.RecyclerView
- Obtener elementos visibles en RecyclerView
Así que hoy he intentado archivar ese efecto en un RecyclerView
. Yo era capaz de hacerlo, pero como el código es demasiado me pego aquí mi proyecto github y voy a explicar algunos de los puntos clave del proyecto.
https://github.com/kanytu/android-parallax-recyclerview
Primero tenemos que mirar getItemViewType
en la clase RecyclerView.Adapter
. Este método define el tipo de vista con el que estamos tratando. Ese tipo será pasado encendido onCreateViewHolder
y allí podemos inflar diversas visiónes. Así que lo que hice fue: comprobar si la posición es la primera. Si es así entonces infle la cabecera, si no infla una fila normal.
También he añadido un CustomRelativeLayout
que CustomRelativeLayout
la vista para que no tengamos problemas con los divisores y con las filas encima de la cabecera.
A partir de este punto parecen saber el resto de la lógica detrás de él.
El resultado final fue:
EDITAR:
Si necesita insertar algo en el adaptador, asegúrese de notificar la posición correcta agregando 1 en el método notifyItemChanged/Inserted
. Por ejemplo:
public void addItem(String item, int position) { mData.add(position, item); notifyItemInserted(position + 1); //we have to add 1 to the notification position since we don't want to mess with the header }
Otra edición importante que he hecho es la lógica de desplazamiento. El sistema mCurrentOffset
que estaba utilizando no funcionó con la inserción de elementos ya que el desplazamiento cambiará si agrega un elemento. Así que lo que hice fue:
ViewHolder holder = findViewHolderForPosition(0); if (holder != null) ((ParallaxRecyclerAdapter) getAdapter()).translateHeader(-holder.itemView.getTop() * 0.5f);
Para probar esto he añadido un postDelayed
postDelayed, iniciado la aplicación, desplazado hasta el final, añadir el elemento en la posición 0, y desplácese hacia arriba de nuevo. El resultado fue:
Si alguien está buscando otros efectos de paralaje pueden comprobar mi otro repo:
La manera más fácil de hacerlo, está usando debajo onScrollListener
sin depender de ninguna biblioteca.
View view = recyclerView.getChildAt(0); if(view != null && recyclerView.getChildAdapterPosition(view) == 0) { view.setTranslationY(-view.getTop() / 2);// or use view.animate().translateY(); }
Asegúrese de que su segundo elemento viewHolder
tenga un color de fondo que coincida con el fondo del cajón / actividad. Por lo que el desplazamiento parece paralaje.
Esta respuesta es para aquellos curiosos sobre la adición de un encabezado de paralaje a un GridLayoutManager
o un StaggeredGridLayoutManager
Deberá agregar el código siguiente a su adaptador en onBindViewHolder
o onCreateViewHolder
StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) holder.itemView.getLayoutParams(); layoutParams.setFullSpan(true);
Para kotlin, puede configurar la vista del reciclador como a continuación
//setting parallax effects recyclerView.addOnScrollListener(object :RecyclerView.OnScrollListener(){ override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) { super.onScrolled(recyclerView, dx, dy) val view = recyclerView?.getChildAt(0) if (view != null && recyclerView?.getChildAdapterPosition(view) === 0) { val imageView = view.findViewById(R.id.parallaxImage) imageView.translationY = -view.top / 2f } } })
- ¿Cómo imprimo el contenido de la solicitud httprequest?
- Cómo cambiar el nombre del archivo mapping proguard en gradle para el proyecto de Android