Diseño Flexbox en Android

Posted on by Rudeus Greyrat

Antes de jugar, aprendamos qué es realmente FlexBox. 

Oye, ¿conoces el front-end también? En caso afirmativo, entonces debe saber qué es realmente flexbox en CSS. Para obtener más información sobre el módulo de diseño de caja flexible de CSS , haga clic aquí. Y si no, entonces no te preocupes; aquí está la explicación: 

Aquí la palabra “ Flex ” significa Flexible . En este diseño, los artículos se “flexionarán” a diferentes tamaños para llenar el espacio. Nos ayuda a crear una interfaz de usuario receptiva.

Ahora la pregunta es por qué estamos discutiendo la tecnología Front-end en lugar de Android. Porque en Android también necesitamos hacer una interfaz de usuario receptiva. Al igual que CSS FlexBox Layout, Google también ha creado la biblioteca FlexboxLayout para usar en Android. Discutiremos cinco atributos diferentes de este diseño paso a paso a través de algunos ejemplos simples. Estos cinco atributos son,

  1. flexDirection
  2. envoltura flexible
  3. justificar el contenido
  4. alinear elementos 
  5. alinear contenido

Al principio, mire una descripción general rápida de estos atributos:

1. dirección flexible

Básicamente, el atributo flexDirection determina la dirección del eje principal. Tiene cuatro parámetros posibles y son,

  • fila
  • fila_reversa
  • columna
  • columna_reversa 

Ahora, podemos usar estos parámetros en nuestro diseño de flexbox de las siguientes maneras:

  • En XML,  app:flexDirection=” parámetro “
  • Programáticamente,

                    flexboxLayout.flexDirection = FlexDirection.PARAMETER // Kotlin (sintaxis de acceso a la propiedad)

                   flexboxLayout.setFlexDirection(FlexDirection.PARÁMETRO); //Java

* En lugar de la palabra, parámetro escriba los parámetros relevantes.

Usemos el siguiente diseño de caja flexible para probar todos los parámetros del atributo correspondiente.

XML

<!-- to test flexDirection -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
   
</com.google.android.flexbox.FlexboxLayout>

Veamos el resultado:

2. envoltura flexible

El atributo flexWrap controla si el contenedor flexible es de una sola línea o de varias líneas, y la dirección del eje transversal (perpendicular al eje principal). En palabras simples, es como LinearLayout con saltos de línea admitidos. Tiene tres parámetros posibles y son,

  • ahora rap
  • envolver
  • envolver_reversa

Ahora, podemos usar estos parámetros en nuestro diseño de flexbox de las siguientes maneras:

  • En XML , app:flexWrap=”parámetro”
  • Programáticamente ,

                   flexboxLayout.flexWrap = FlexWrap.PARAMETER // Kotlin (sintaxis de acceso a la propiedad)

                   flexboxLayout.setFlexWrap(FlexWrap.PARÁMETRO); //Java

 * En lugar de la palabra, parámetro escriba los parámetros relevantes.

Usemos el siguiente diseño de caja flexible para probar todos los parámetros del atributo correspondiente. 

XML

<!-- to test flewWrap -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:flexWrap="wrap"
            app:alignContent="flex_start">
 
            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>
 
</com.google.android.flexbox.FlexboxLayout>

Veamos el resultado:

3. justificar contenido

El atributo allowContent controla la alineación a lo largo del eje principal. Tiene seis parámetros posibles y son:
 

  • inicio_flexible
  • flex_end
  • centro
  • espacio entre 
  • espacio_alrededor 
  • space_evenly 

Ahora, podemos usar estos parámetros en nuestro diseño de flexbox de las siguientes maneras:

  • En XML , app:justifyContent=”parámetro”
  • Programáticamente ,

                  flexboxLayout.justifyContent = JustifyContent.PARAMETER // Kotlin (sintaxis de acceso a la propiedad)

                  flexboxLayout.setJustifyContent(JustifyContent.PARAMETER); //Java

      * En lugar de la palabra, parámetro escriba los parámetros relevantes.

Usemos el siguiente diseño de caja flexible para probar todos los parámetros del atributo correspondiente.

XML

<!-- to test justifyContent -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout3"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
        
</com.google.android.flexbox.FlexboxLayout>

Veamos el resultado:

4. alinear elementos

El atributo alignItems controla la alineación a lo largo del eje transversal. Tiene cinco parámetros posibles y son, 

  • inicio_flexible
  • flex_end
  • centro
  • base 
  • tramo 

 Ahora, podemos usar estos parámetros en nuestro diseño de flexbox de las siguientes maneras:

  • En XML , app:alignItems=”parámetro”
  • Programáticamente ,

                 flexboxLayout.alignItems =AlignItems.PARAMETER // Kotlin (sintaxis de acceso a la propiedad)

                 flexboxLayout.setAlignItems(AlignItems.PARÁMETRO); //Java

     * En lugar de la palabra, parámetro escriba los parámetros relevantes.

Usemos el siguiente diseño de caja flexible para probar todos los parámetros del atributo correspondiente.

XML

<!-- to test alignItems -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout4"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
         
</com.google.android.flexbox.FlexboxLayout>

Veamos el resultado:

5. alinear contenido

Este atributo controla la alineación de las líneas flexibles en el contenedor flexible. Si solo tiene un eje, el atributo no funciona. Tiene seis parámetros posibles y son, 

  • flex_start (predeterminado)
  • flex_end
  • centro
  • espacio entre
  • espacio_alrededor
  • tramo

Ahora, podemos usar estos parámetros en nuestro diseño de flexbox de las siguientes maneras: 

En XML , app:alignContent=”parámetro”

Programáticamente ,

                flexboxLayout.alignContent = AlignContent.PARAMETER // Kotlin (sintaxis de acceso a la propiedad)

                flexboxLayout.setAlignContent(AlignContent.PARÁMETRO); //Java

* En lugar de la palabra, parámetro escriba los parámetros relevantes.

Usemos el siguiente diseño de caja flexible para probar todos los parámetros del atributo correspondiente. 

XML

<!-- to test alignContent -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:flexWrap="wrap"
            app:alignContent="flex_start">
 
            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>
 
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>
         
</com.google.android.flexbox.FlexboxLayout>

 
Veamos el resultado:

Ahora, ¿quieres jugar con todos estos atributos en esta aplicación? En primer lugar, puedes intentar hacer esto por tu cuenta. De lo contrario, puede obtener ayuda del código fuente de mi proyecto. Para el código fuente del proyecto -> HAGA CLIC AQUÍ .

Publicación traducida automáticamente

Artículo escrito por the_dir_one y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *