Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Llevando flex de la web a tus aplicaciones

Llevando flex de la web a tus aplicaciones 26.OCT.17

Alvaro José Rios Ch
Fundador WebBizarro

Si han usado flex deben saber que es una gran solución para muchos problemas comunes que podemos encontrar al maquetar layouts en la web, sin embargo si eres un desarrollador que hace tanto aplicaciones web como aplicaciones móviles o de escritorio de seguro extrañas las virtudes de flexbox al crear estos layouts.

Yoga es una librería creada por Facebook pensada principalmente para crear sus interfaces que permite implementar algunas de las características más importantes de flexbox que permiten fácilmente crear layouts para aplicaciones en Java, Obective-C, C y C#.

La idea no es llevar todas las características de CSS, de por si hay algunas características que se comportan ligeramente diferente, pero si podemos crear layouts rápidamente con solo algunas líneas de código, a continuación un pequeño ejemplo en Android.

<YogaLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    yoga:yg_justifyContent="stretch">
  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      yoga:yg_flex="1"/>
  <VirtualYogaLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      yoga:yg_paddingAll="20px"
      yoga:yg_flexDirection="row"
      yoga:yg_alignItems="center">
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        yoga:yg_flex="1"
        yoga:yg_marginStart="20px"/>
  </VirtualYogaLayout>
</YogaLayout>

El resultado sería algo como esto:

Lo malo es que por ahora no puedes encontrar la librería en los gestores de paquetes generalmente usados por lo que tendrás que tomarlo desde github, construirlo y agregarlo a tu proyecto.

Yoga es una librería genial, incluso si has usado react native y usas flex para maquetar tus pantallas debes saber que por debajo se usa Yoga para llevar lo que escribes en JavaScript a el código Nativo de la aplicación.

Una muy buena alternativa que de seguro hará tu trabajo un poco más simple y tu vida mucho más feliz, así que la próxima vez que tengas algo de tiempo para probar algo nuevo no dejes de darle la oportunidad a Yoga.