Diferencias entre ConstraintLayout y RelativeLayout

Estoy confundido acerca de la diferencia entre ConstraintLayout y RelativeLayout. ¿Podría alguien decirme las diferencias exactas entre ellos?

La intención de ConstraintLayout es optimizar y aplanar la jerarquía de vistas de sus diseños aplicando algunas reglas a cada vista para evitar el anidamiento.

Las reglas le recuerdan a RelativeLayout , por ejemplo, configurar la izquierda a la izquierda de otra vista.

 app:layout_constraintBottom_toBottomOf="@+id/view1" 

A diferencia de RelativeLayout , ConstraintLayout ofrece un valor de bias que se usa para posicionar una vista en términos de 0% y 100% de desplazamiento horizontal y vertical en relación con los manejadores (marcados con un círculo). Estos porcentajes (y fracciones) ofrecen un posicionamiento sin fisuras de la vista a través de diferentes densidades y tamaños de pantalla.

 app:layout_constraintHorizontal_bias="0.33"  app:layout_constraintVertical_bias="0.53"  

El asa de la línea de base (tubo largo con esquinas redondeadas, debajo del asa circular) se utiliza para alinear el contenido de la vista con otra referencia de vista.

Los controles cuadrados (en cada esquina de la vista) se utilizan para cambiar el tamaño de la vista en dps.

enter image description here

Esto está totalmente basado en la opinión y mi impresión de ConstraintLayout

Reportado por @davidpbr Restricción del rendimiento de Layout

Hice dos diseños similares de 7 hijos, uno con un padre Restricción y Relativo. En función de la herramienta de seguimiento de métodos de Android Studio, parece que ConstraintLayout invierte más tiempo en onMeasure y realiza trabajos adicionales en onFinishInflate.

Biblioteca utilizada (soporte-v4, appcompat-v7, …):

‘com.android.support.constraint: constraint-layout: 1.0.0-alpha1’

Dispositivos / versiones de Android reproducidas en: Samsung Galaxy S6 (SM-G920A. Lo siento, no en la atmósfera de Nexus). Android 5.0.2

Comparación de rastreo de método rápido:

1

Ejemplo de repository de Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

Las siguientes son las diferencias / ventajas:

1) El diseño de restricción tiene doble potencia tanto de diseño relativo como de diseño lineal: establece las posiciones relativas de las vistas (como el diseño relativo) y también establece los pesos para la interfaz de usuario dinámica (que solo fue posible en el diseño lineal).

2) Un uso muy poderoso es la agrupación de elementos formando una cadena. De esta forma, podemos formar un grupo de vistas que, en su conjunto, se pueden ubicar de la manera deseada sin agregar otra capa de jerarquía solo para formar otro grupo de vistas.

3) Además de los pesos, podemos aplicar un sesgo horizontal y vertical que no es más que el porcentaje de desplazamiento desde el centro. (El sesgo de 0.5 significa centralmente alineado. Cualquier valor menor o mayor significa movimiento correspondiente en la dirección respectiva).

4) Otra característica muy importante es que respeta y proporciona la funcionalidad para manejar las vistas GONE para que los diseños no se rompan si alguna vista está configurada en GONE a través del código java. Puede encontrar más aquí: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5) Proporciona el poder de la restricción automática que se aplica mediante el uso de la herramienta Blue Print y Visual Editor que facilita el diseño de una página.

Todas estas características conducen al aplanamiento de la jerarquía de vistas que mejora el rendimiento y también ayuda a crear una interfaz de usuario dinámica y receptiva que se puede adaptar más fácilmente a diferentes tamaños de pantalla y densidad.

Este es el mejor lugar para aprender rápidamente: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

Una gran diferencia es que ConstraintLayout respeta las restricciones incluso si la vista se ha ido. Por lo tanto, no romperá el diseño si tiene una cadena y desea hacer que una vista desaparezca en el medio.

La pregunta real que debe hacerse es: ¿hay alguna razón para usar un diseño que no sea un diseño de restricción? Creo que la respuesta podría ser no.

Para aquellos que insisten en que están dirigidos a progtwigdores novatos o similares, deben proporcionar alguna razón para que sean inferiores a cualquier otro diseño.

Los diseños de restricciones son mejores en todos los sentidos (cuestan 150k en tamaño de APK). Son más rápidos, son más fáciles, son más flexibles, reactjsn mejor a los cambios, corrigen los problemas cuando los elementos desaparecen, se ajustan mejor a tipos de pantalla radicalmente diferentes y no usan un montón de bucles nesteds con ese largo estructura de árbol extendida para todo. Puedes poner cualquier cosa en cualquier lugar, con respecto a cualquier cosa, en cualquier lugar.

Estaban un poco retorcidos a mediados de 2016, donde el editor de diseño visual simplemente no era lo suficientemente bueno, pero están al punto de que si tiene un diseño en absoluto, es posible que desee considerar seriamente el uso de un diseño de restricción, incluso cuando hace lo mismo que RelativeLayout, o incluso un LinearLayout simple. FrameLayouts claramente todavía tiene su propósito. Pero, no puedo ver construir nada más en este punto. Si comenzaran con esto, no habrían agregado nada más.

Además de la respuesta @ dhaval-jivani.

He actualizado el proyecto proyecto github a la última versión del diseño de restricciones v.1.1.0-beta3

He medido y comparado el tiempo del método onCreate y el tiempo entre un inicio de onCreate y el final de la ejecución del último método preformDraw, que está visible en el monitor de la CPU. Todas las pruebas se realizaron en Samsung S5 mini con Android 6.0.1 Aquí los resultados:

Nuevo comienzo (apertura de la primera pantalla después del lanzamiento de la aplicación)

Disposición relativa

OnCreate: 123ms

Última preformaDraw time – OnCreate time: 311.3ms

Diseño de restricción

OnCreate: 120.3ms

Última preformaDraw time – OnCreate time: 310ms

Además de eso, he comprobado la prueba de rendimiento de este artículo , aquí el código y encontré que en el recuento de bucles menos de 100 variante de diseño de restricciones es más rápido durante la ejecución de las variantes de inflado, medida y diseño, luego con Diseño relativo. Y en los dispositivos Android antiguos, como Samsung S3 con Android 4.3, la diferencia es mayor.

Como conclusión, estoy de acuerdo con los comentarios del artículo :

¿Vale la pena refactorizar vistas antiguas para activarla de RelativeLayout o LinearLayout?

Como siempre: depende 🙂

No volvería a factorizar nada a menos que tenga un problema de rendimiento con su jerarquía de diseño actual o quiera realizar cambios significativos en el diseño de todos modos. Aunque no lo he medido últimamente, no he encontrado problemas de rendimiento en los últimos lanzamientos. Así que creo que deberías estar seguro de usarlo. pero, como he dicho, no solo migren por el bien de la migración. Solo hágalo, si hay una necesidad y se beneficia de ello. Sin embargo, para diseños nuevos, casi siempre uso RestraintLayout. Es mucho mejor comparado con lo que teníamos antes.

El proceso de dibujo de vista de Android consta de 3 fases. Puede encontrar los métodos correspondientes cuando se extiende ViewGroup

  • Medida
  • Diseño
  • Dibujar

Usando la herramienta Systrace podemos calcular la medida / diseño

Systrace para la variante de diseño que usa RelativeLayout enter image description here

Systrace para la variante de diseño que usa Restricciones enter image description here

Diferencia de rendimiento (utilizando OnFrameMetricsAvailableListener que le permite recostackr información de tiempo marco por cuadro sobre el procesamiento de UI de su aplicación)

ConstraintLayout tiene un 40% mejor en la fase de medida / diseño que RelativeLayout

enter image description here

Y por último, pero no por ello menos importante, un ConstraintLayout es una forma moderna de construir una IU responsable, se desarrolla constantemente, y cada lanzamiento trae características interesantes que hacen la vida más fácil. Lo último es Constraint Layout 1.1

Por favor lea más:

https://constraintlayout.com/

https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html

https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

Oficialmente, ConstraintLayout es mucho más rápido

En la versión N de Android, la clase ConstraintLayout proporciona una funcionalidad similar a RelativeLayout , pero a un costo significativamente menor.

[ Diseños relativos y propiedades equivalentes de disposición de restricción [Propiedades equivalentes del diseño relativo y del diseño de restricción]

La conclusión que puedo hacer es

1) Podemos hacer diseño de interfaz de usuario sin tocar la parte xml del código. Para ser sincero, creo que Google ha copiado cómo está diseñada la interfaz de usuario en las aplicaciones de iOS , tendrá sentido si está familiarizado con el desarrollo de la interfaz de usuario en iOS, pero su diseño relativo difícil establecer las restricciones sin tocar el diseño xml .

2) En segundo lugar, tiene una jerarquía de vista plana a diferencia de otros diseños, por lo que tiene un mejor rendimiento que el diseño relativo que podría haber visto de otras respuestas

3) También tiene cosas adicionales aparte de lo que tiene el diseño relativo, como el posicionamiento relativo circular donde podemos posicionar otra vista relativa a este en cierto radio con cierto ángulo que no puede hacer en el diseño relativo

Lo digo de nuevo, el diseño de la interfaz de usuario utilizando el diseño de restricciones es igual que el diseño de la interfaz de usuario en iOS, por lo que en el futuro si trabajas en iOS te resultará más fácil si has utilizado el diseño de restricciones

La única diferencia que he notado es que las cosas configuradas en un diseño relativo mediante arrastrar y soltar automáticamente tienen sus dimensiones relativas a otros elementos inferidos, de modo que cuando ejecutas la aplicación, lo que ves es lo que obtienes. Sin embargo, en el diseño de restricción, incluso si arrastra y suelta un elemento en la vista de diseño, cuando ejecuta la aplicación, las cosas se pueden cambiar. Esto se puede solucionar fácilmente configurando manualmente las restricciones o, un movimiento más arriesgado es hacer clic con el botón derecho en el elemento en el árbol de componentes, seleccionar el submenú de diseño de restricciones y luego hacer clic en ‘inferir restricciones’. Espero que esto ayude