Actualidad, Android, Tecnología, Tutoriales

Tutorial De Constraint Layout Android

Constraint Layout es la nueva tecnología de Android Studio para crear interfaces de usuario en distintos tamaños y resoluciones. Similar como pasa en xCode con los storyboards. Ahora bastará crear una vista e implementar los constraints para crear una interfaz de usuario de todos los tamaños de pantalla que existen en el mercado.

Empecemos Creando Nuestro Proyecto

Creamos un proyecto nuevo en Android Studio y le pondremos el nombre de TestingContraintLayout, puedes guardarlo donde quieras:

crear_proyecto_android_studio_firebase

Ya sabes, escoges tu Api, Seleccionamos un EmptyActivity y dejamos que el resto lo haga el IDE por nosotros:

creando_proyecto_android_firebase

¿Cómo implementar Constraint Layout?

Para lograr esto iremos al SDK Manager y nos situaremos en la pestaña de SDK Tools:

configurando_sdk_firebase

Puedes ver: ¿Qué es y para que sirve Android SDK?

 

En el renglón de Support Repository, marcamos la casilla <<ConstraintLayout for Android>> y <<Solver for ConstraintLayout>>. Presiona en aplicar y acepta los términos para instalar las librerías. Por cierto, debes poner atención a que versión de librería estás descargando, así al momento de implementar la dependencia tenga coherencia con el SDK.

En mi caso tengo la versión 1.0.2 de Contraint Layout por lo cual implementaremos la siguiente dependencia dentro mi archivo app.gradle

compile ‘com.android.support.constraint:constraint-layout:1.0.1’

Luego presionas el boton de sincronizar y con eso ya tenemos implementado Constraint Layout en nuestro proyecto.

dependencia_constraint_layout_android

Convirtiendo nuestro Layout a Constraint

Convertir tu clásico Linear Layout o Relative Layout a un Constraint no es tan complicado, sin embargo yo recomiendo que Constraint Layout se implemente en nuevos proyecto.

En los proyectos que se encuentran desarrollados y muy bien optimizados, no es tan aconsejable implementar esta tecnología, por el simple motivo que tendrían que mover todas las vistas y rediseñar la app (llevaría mucho tiempo).

Ahora situémonos en res/layout/activity_main.xml y abrimos el archivo.

xml_widgets_constraint_layout

En <<Component Tree>> marcamos con clic derecho nuestro layout (sea Linear o Relative) y seleccionamos la opción Convert layout to ConstraintLayout.

convertir_layout_constraint

Listo con eso hemos convertido nuestro layout a ConstraintLayout.

¿Cómo Agregar Una Constraint Android?

Los desarrolladores de Google quisieron implementar una nueva forma más intuitiva para interactuar con los constraints al estilo DRAG AND DROP, puedes crear tus constraints fácil y rápido.

Hay dos maneras de crear los contraint Layout, al igual que en muchos casos, puedes hacerlo de forma manual o de forma automatizada. En este tutorial te enseñare de manera manual, ya que para mí es más fiable que hacerlo de manera automática además que no es tan automático como lo vende Android Studio, tendremos que mover datos y hace que sea doble trabajo al final de cuentas.

Vamos a hacer que nuestro xml tenga los siguientes widgets y que se vean de esta manera:

constraint_layout_android

Bueno ya sabés lo sencillo que es colocar los widgets de Android. Aquí viene la parte que todos queremos saber, cada widgets ahora tendrá una especie de chibolitas en cada uno de sus extremos.

Tan sencillo como presionar el círculo y jalar hacia donde quieres que tomen márgenes y listo. Lo sé es bastante simple y extraño, y con los demás widgets procedemos de igual manera.

Recuerda que los widgets deben tener coherencia con cada uno de los widgets y márgenes. Si deseas tener más ilustraciones de los constraint layout, te recomiendo que revises la documentación oficial de Contraint Layout en Android para que no te queden dudas al respecto.
Es cuestión de práctica, cuando domines la lógica de los constraint se te haré súper fácil desarrollar interfaces de usuario ¡increíbles! en Android Studio con Constraint Layout.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s