GridView con diferentes tamaños de celdas, estilo pinterest

Fondo

GridView es una clase que extiende AdapterView , lo que significa que muestra las celdas en un estilo de cuadrícula de manera eficiente, reciclando viejas vistas para que se muestren como nuevas cuando el usuario lo desplaza.

El problema

A veces, se desea obtener una interfaz de usuario especial, que se asemeja a la Windows Phone Tiles UI, teniendo células de diferentes tamaños en la parte superior de la otra.

Algo como esto:

AABB AACC AADD AADD 

Cada letra representa una parte de su celda, por lo que la celda A es 2×4, la celda B y la celda C toman 2×1 cada una, y la celda D es 2×2.

Podría ser aún más que eso, donde la celda D terminó un poco por encima de lo que he mostrado, y justo debajo de ella hay otra celda por lo que el final de D y el final de A no son necesarios alineados.

Un ejemplo de una aplicación que tiene este estilo es pinterest .

GridView no permite tal cosa.

De hecho, cada solución que he probado tiene problemas. Quisiera preguntar si hay otras alternativas o mejores soluciones.

Lo que he encontrado

Hay varias maneras de manejar este problema:

  1. Como una clase que se extiende AdapterView GridView tiene la capacidad de tener un tipo para cada elemento (utilizando el BaseAdapter ), que le permitiría establecer cómo diseñar la celda.

    Sin embargo, todavía le limita ya que obtendrá filas de elementos, uno debajo de la otra. Usted tiene que tenerlos alineados.

  2. GridLayout es un diseño relativamente nuevo, y es bastante flexible. Google ha publicado una bonita biblioteca de compatibilidad para ello, apoyando API7 y superior.

    Sin embargo, no utiliza ningún reciclado de vistas, por lo que es una mala elección en caso de que desee mostrar una gran cantidad de elementos.

    Si tiene un montón de elementos, tendría que crear todas las vistas para ellos.

  3. QuiltView Library – se extiende desde GridLayout, por lo que básicamente tiene el mismo problema como él.

  4. StaggeredGridView – parece el más prometedor, pero tiene un montón de errores, especialmente al cambiar la orientación. Tales errores incluyen celdas vacías, desplazamiento erróneo y NPE (raro pero todavía sucede). También no estoy seguro de si admite tener celdas personalizadas en lugar de imageViews solo.

  5. Otras soluciones, como menciones aquí .

La pregunta

¿Alguien sabe de otra alternativa a este problema? Tal vez algunas soluciones para cualquiera de las soluciones que he mostrado?


EDIT: Creo que sobre StaggeredGridView, el desplazamiento y las excepciones se pueden resolver mediante un ImageView normal que se establece su tamaño dentro de la getView. Creo que la razón para que funcione de una manera extraña es que el ejemplo actualiza el tamaño de la imagen después de que se cargó desde Internet.

Sin embargo, la emisión de células vacías sigue estando en esta biblioteca. No sólo eso, sino que sus tamaños cambian mucho, incluso sin cambiar la orientación.


EDIT: por ahora, creo que la mejor solución es usar, PinterestLikeAdapterView biblioteca .

No tiene ningún problema que pueda encontrar.

Sin embargo, no puede hacer que los elementos tomen más de 1 ancho de celda. Es muy bueno sin embargo.

EDIT: por desgracia tiene problemas con notifyDataSetChanged. He informado sobre ello aquí .

¿Es un poco tarde para responder?

Compruebe esta biblioteca de etsy. Se ve muy prometedor.

https://github.com/etsy/AndroidStaggeredGrid

Creo que es la versión más reciente de https://github.com/maurycyw/StaggeredGridView

.

Actualizado.

Intente usar RecyclerView StaggeredGridLayoutManager de google en su lugar

  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)); recyclerView.setItemAnimator(new DefaultItemAnimator()); recyclerView.setAdapter(adapter); 

Creo que un RecyclerView con StaggeredGridLayoutManager puede resolver este problema, y ​​que si también desea tener un scroller rápido, puede probar esta biblioteca .

Por lo tanto, no más truco son necesarios, como Google proporcionó una solución …

Es posible que pueda lograr esto con un único ListView, donde cada celda contiene una plantilla de cuadrícula diferente. He hecho algo similar a lo que estás describiendo, usando esta técnica. Si el tamaño de las celdas debe ser único, esto no funcionará, pero debería ser suficiente para el caso descrito:

 AABB AACC AADD AADD 

Crear un puñado de plantillas como esta, con varios arreglos de A, B, C, D, a continuación, puede utilizarlos aleatoriamente como las células ListView y algunos simples matemáticas de desplazamiento permitiría a su adaptador para llenar cada subcélula para lograr algo como lo siguiente:

 AABB AACC AADD AADD BBBB ACCC ADDD ADDD AAAA BBCC BBCC DDDD AABB AACC AADD AADD AABB AACC DDDD DDDD 
  • ¡Ayuda! ¿Cómo puedo crear una aplicación de calendario para Android?
  • GridView del estilo de Google Play Música
  • GridView.setItemChecked (posición, valor)
  • Cambiar la actividad con Swipe
  • Cómo hacer gridview asimétrico?
  • Las imágenes de gridview de Android en caché, en las imágenes de desplazamiento se repiten antes de ser reemplazadas
  • Actualizar GridView / ListView sin volver a rellenar
  • Agregar espacio adicional a la parte inferior de un GridView o ListView
  • Cómo utilizar setScrollListener en StaggeredGridView
  • Cómo hacer que customAdapter rellene la altura de gridview
  • Selector de lista de elementos GridView para varios elementos que no funcionan en Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.