¿Cómo centrar elementos de una vista de reciclador?

4 minutos de lectura

avatar de usuario
Cristian Gómez

Necesito centrar los elementos en cada fila para que queden como en esta maqueta. He estado buscando si hay algún diseño que funcione de esa manera sin mirar. los elementos se centran en sus filas.

Bosquejo

Así es como se ve ahora en mi código.ingrese la descripción de la imagen aquí

  • Suena bastante similar a stackoverflow.com/questions/34206078/…

    – Konstantin Loginov

    13/01/2016 a las 17:30

  • ¿Se ha solucionado este problema?

    – Hoa Le

    18 de enero de 2016 a las 4:03

  • es posible que solo necesite crear un administrador de diseño personalizado ya que GridLayoutManager no ayuda con esto. Publiqué una respuesta, pero no estoy seguro de si es exactamente lo que estás buscando.

    – Mo1989

    18 de enero de 2016 a las 11:16


  • ¿Cómo hacer este diseño?

    – Parth Anjaria

    5 oct 2021 a las 17:28

avatar de usuario
Ravi Yadav

Hacer vista de reciclador width a wrap_content y su contenedor layout_gravity a center_horizontal

 <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <android.support.v7.widget.RecyclerView
           android:id="@+id/recycrer_view"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:paddingLeft="16dp"
           android:paddingRight="16dp" />
 </LinearLayout>

  • Esto evitará que se desplace el RecyclerView desde los lados.

    – franco

    18 mayo 2019 a las 20:58

avatar de usuario
Rajesh

Tomar LinearLayout en tus RecyclerViewel diseño de la fila del artículo y luego dar android:layout_gravity="center" a LinearLayout.

Para cada fila de imágenes tienes que tomar diferentes LinearLayout.

Aquí hay un código de ejemplo:

 <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:orientation="horizontal">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="https://stackoverflow.com/questions/30007956/@drawable/image1" />

            <ImageView
                android:id="@+id/image2"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="@drawable/image2" />

           <ImageView
                android:id="@+id/image3"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="@drawable/image3" />

  </LinearLayout>

  • Tuve que modificar RecyclerView layout_width=”wrap_content” en lugar de match_parent también

    – jernkuan

    26/10/2016 a las 21:00

  • @jemkuan Eso deshabilitará el desplazamiento cuando el usuario pase el dedo por el borde o la región exterior del padre, ya que el ancho de RecyclerView será menor que el ancho del padre.

    – Playa de Elliott

    1 jun 2017 a las 18:10


  • El problema con este enfoque es que la vista del reciclador registrará un evento de clic cuando el usuario toque fuera de las vistas de imágenes.

    – Izak

    17 de febrero de 2019 a las 22:21

avatar de usuario
Pregunta Q

Conseguido con:

recyclerView.adapter = MyAdapter()
val layoutManager = FlexboxLayoutManager(context).apply {
    justifyContent = JustifyContent.CENTER
    alignItems = AlignItems.CENTER
    flexDirection = FlexDirection.ROW 
    flexWrap = FlexWrap.WRAP
}
recyclerView.layoutManager = layoutManager

ingrese la descripción de la imagen aquí

Supongo que estás usando un LinearLayoutManager con un RecyclerView para ListView-efecto de estilo. En ese caso, utilice un horizontal LinearLayout para cada fila, con android:gravity="center" para centrar su contenido.

Usar FlexboxLayout de com.google.android:flexbox biblioteca. Nota la flexwrap y justifyContent valores de propiedad. Luego, establezca layout_wrapBefore = true en la vista que desea envolver la línea de artículos antes.

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:justifyContent="center">

        <View ... />

        <View app:layout_wrapBefore="true" ... />

        <View ... />

    </com.google.android.flexbox.FlexboxLayout>

  • Me gustaría agregar que esta es una forma muy limpia de hacer esto. Especialmente puedes usar la biblioteca como un layoutManager por recyclerview. Todo lo que tiene que hacer es configurar el administrador de diseño con los requisitos de dirección y alineación. No es necesario hacer una vista de reciclador bidimensional como se menciona en la tercera respuesta principal.

    – Juan Méndez

    7 junio 2019 a las 18:20


avatar de usuario
Martín Tournoij

Utilizar el gridLayoutManager = new GridLayoutManager(context,6) y anular setSpanSizeLookup.

Ejemplo:

int totalSize=list.size();
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                    @Override
                    public int getSpanSize(int position) {
                        int span;
                        span = totalSize % 3;
                        if (totalSize < 3) {
                            return 6;
                        } else if (span == 0 || (position <= ((totalSize - 1) - span))) {
                            return 2;
                        } else if (span == 1) {
                            return 6;
                        } else {
                            return 3;
                        }
                    }
                });

Esto funcionará si desea mostrar 3 elementos en una fila y permanecer en el centro de la cuadrícula.

Cambie los recuentos de tramos del administrador de diseño de cuadrícula de acuerdo con sus requisitos.

  • Me gustaría agregar que esta es una forma muy limpia de hacer esto. Especialmente puedes usar la biblioteca como un layoutManager por recyclerview. Todo lo que tiene que hacer es configurar el administrador de diseño con los requisitos de dirección y alineación. No es necesario hacer una vista de reciclador bidimensional como se menciona en la tercera respuesta principal.

    – Juan Méndez

    7 junio 2019 a las 18:20


avatar de usuario
Omar Abdán

puedes usar el nuevo layoutManager de google FlexLayoutManager
le dará mucho control y flexibilidad sobre los elementos del recicladorVer

¿Ha sido útil esta solución?