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

5 thoughts on “Tutorial De Constraint Layout Android”

  1. anna@ du must mal auf die klarolinefanseiten gucken und es gibt so viele, das ist eine grosse fangemeinschaft, die julie da entäuscht und allen ist hayley ein dorn im auge.das mit den hassmails könnte deswegen auch sein. aber eigentlich würde er eher trauermails bekommem ,denn viele sind echt niedergeschlagen , können es nicht fassen , das julie uns klarolinefans das antut.

  2. Hola.. Tengo un problema…Estoy utilizando el “Constrint Layuot ” porque actualicé mi versión de Android. Al diseñar una actuvity, en el xml la vista me la muestra bien diseñada y organizada pero al simularla en la maquina virtual de android studio y en Genimotion me muestra todos los botones y editText UNOS ENCIMA DE LOS OTROS. A alguien le ha pasado esto?? saben por que es?? Saben cómo puedo solucionarlo??
    Graaaaacias !

    1. Yo tenia el mismo problema, pero es fácil solucionarlo.
      Anda en la parte del diseño, a la sección de Component Tree y dale click derecho donde dice ConstraintLayout luego ve a Constraint Layout y dale click en Infer Constraints. Espero que te sirva.
      Saludos.

  3. Buenas noches… Parece que no me ha ido muy bien con el “Constrint Layuot ”.. Tengo el mismo problema de la vez pasada.. al simular, todos mis objetos me salen en la esquina superior izquierda unos sobre otros y ya no me sirve organizarlos de nuevo y darles ” Infer Constraints”. Me sale error de:
    ” This view is not constreined vertically: as runtime it will jump to the left unless you add a
    vertical constrint”.
    Pero ya le puse las posiciones en “x” y en “y”. Si no es eso, entonces no entiendo a que se refiere con “vertical constrint.” o cómo se pone.
    Alguien ha tenido ese problema? A alguien le ha pasado??
    Creen que es mas fácil si actualizo a la 3.0 para hacer todo con Kotlin???
    Gracias por sus comentarios

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