es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • GridLayoutManager en RecyclerView con espacio entre elementos y que coincida con el ancho completo.

GridLayoutManager en RecyclerView con espacio entre elementos y que coincida con el ancho completo.

17 Jun, 2023 Programación

Quiero utilizar un administrador de diseño de cuadrícula, los objetos deben estar en 2 columnas. Quiero que cada fila se divida uniformemente entre los objetos y también tenga un poco de espacio alrededor de ellos. Antes hice lo siguiente:

val manager = GridLayoutManager(this, 4)
manager.spanSizeLookup = object: GridLayoutManager.SpanSizeLookup() {
override fun getSpanSize(position: Int): Int = 2
}
recycler.layoutManager = manager

Pero aunque los objetos de cada fila son del mismo tamaño, tienen una enorme brecha entre ellos y no hay espacio con los objetos debajo. ¿Cómo puedo solucionarlo? Por favor, tenga en cuenta que utilicé un ancho/tamaño específico para los objetos inflados en la vista. Supongo que eso es un problema, pero no estoy seguro de qué debería usar para aquellos.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr una distribución uniforme entre los elementos con poco espacio alrededor de ellos, puede configurar la decoración del elemento para agregar el espacio deseado alrededor de cada elemento. Aquí hay un ejemplo:

    1. Cree una clase de decoración de elementos que anule el método getItemOffsets: 
      class GridSpacingItemDecoration(
   private val spanCount: Int,
   private val spacing: Int,
   private val includeEdge: Boolean
) : RecyclerView.ItemDecoration() {

   override fun getItemOffsets(
       outRect: Rect,
       view: View,
       parent: RecyclerView,
       state: RecyclerView.State
   ) {
       val position = parent.getChildAdapterPosition(view) // posición del elemento
       val column = position % spanCount // columna del elemento

       if (includeEdge) {
           outRect.left = spacing - column * spacing / spanCount // espacio - columna * ((1f / spanCount) * espacio)
           outRect.right = (column + 1) * spacing / spanCount // (columna + 1) * ((1f / spanCount) * espacio)
           if (position < spanCount) { // borde superior
               outRect.top = spacing
           }
           outRect.bottom = spacing // borde inferior del elemento
       } else {
           outRect.left = column * spacing / spanCount // columna * ((1f / spanCount) * espacio)
           outRect.right = spacing - (column + 1) * spacing / spanCount // espacio - (columna + 1) * ((1f / spanCount) * espacio)
           if (position >= spanCount) {
               outRect.top = spacing // borde superior del elemento
           }
       }
   }
}
    2. Configure la decoración del elemento en el RecyclerView: 
      val spacing = resources.getDimensionPixelSize(R.dimen.grid_spacing)
val manager = GridLayoutManager(this, 2)
recycler.addItemDecoration(GridSpacingItemDecoration(2, spacing, true))
recycler.layoutManager = manager

      Puede ajustar el valor de spacing para que se ajuste a su diseño.

      Nota: R.dimen.grid_spacing es un recurso de dimensión que puede definir en el archivo dimens.xml.

    3. Asegúrese de que el ancho de los elementos inflados en la vista no sea demasiado ancho y exceda el diseño de la cuadrícula. Puede usar wrap_content o match_parent dependiendo del diseño.

      <imageview android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content"></imageview>

Comments are closed.