Compresión de diseño
Descarga del ejemploLa compresión de diseño quita los diseños especificados del árbol visual en un intento de mejorar el rendimiento de la representación de páginas. En este artículo se explica cómo habilitar la compresión de diseño y las ventajas que puede aportar.
Información general
Xamarin.Forms realiza el diseño mediante dos series de llamadas a métodos recursivos:
- El diseño comienza en la parte superior del árbol visual con una página y continúa por todas las ramas del árbol visual para abarcar todos los elementos visuales de una página. Los elementos que son elementos principales de otros elementos son responsables de dimensionar y colocar sus elementos secundarios en relación con ellos mismos.
- La invalidación es el proceso por el que un cambio en un elemento de una página desencadena un nuevo ciclo de diseño. Los elementos se consideran no válidos cuando ya no tienen el tamaño o la posición correctos. Cada elemento del árbol visual que tiene elementos secundarios se alerta cada vez que uno de sus elementos secundarios cambia de tamaño. Por lo tanto, un cambio en el tamaño de un elemento del árbol visual puede provocar cambios que ondee el árbol.
Para obtener más información sobre Xamarin.Forms cómo realiza el diseño, vea Crear un Xamarin.Forms
El resultado del proceso de diseño es una jerarquía de controles nativos. Sin embargo, esta jerarquía incluye representadores de contenedor y contenedores adicionales para representadores de plataforma, lo que infla aún más el anidamiento de la jerarquía de vistas. Cuanto más profundo sea el nivel de anidamiento, mayor será la cantidad de trabajo que se debe Xamarin.Forms realizar para mostrar una página. Para diseños complejos, la jerarquía de vistas puede ser profunda y amplia, con varios niveles de anidamiento.
Por ejemplo, considere el botón siguiente de la aplicación de ejemplo para iniciar sesión en Facebook:
Este botón se especifica como un control personalizado con la siguiente jerarquía de vistas XAML:
<ContentView ...>
<StackLayout>
<StackLayout ...>
<AbsoluteLayout ...>
<Button ... />
<Image ... />
<Image ... />
<BoxView ... />
<Label ... />
<Button ... />
</AbsoluteLayout>
</StackLayout>
<Label ... />
</StackLayout>
</ContentView>
La jerarquía de vistas anidadas resultante se puede examinar con el árbol visual en directo. En Android, la jerarquía de vistas anidadas contiene 17 vistas:
La compresión de diseño, que está disponible para las aplicaciones en las plataformas iOS y Android, pretende aplanar el anidamiento de vistas quitando los diseños especificados del árbol visual, lo que puede mejorar el rendimiento de la representación de Xamarin.Forms páginas. La ventaja de rendimiento que se entrega varía en función de la complejidad de una página, la versión del sistema operativo que se usa y el dispositivo en el que se ejecuta la aplicación. Sin embargo, las mejoras de rendimiento más importantes se apreciarán en los dispositivos más antiguos.
Nota:
Aunque este artículo se centra en los resultados de aplicar la compresión de diseño en Android, es igualmente aplicable a iOS.
Compresión de diseño
En XAML, la compresión de diseño se puede habilitar estableciendo la CompressedLayout.IsHeadless propiedad adjunta en en una clase de true diseño:
<StackLayout CompressedLayout.IsHeadless="true">
...
</StackLayout>
Como alternativa, se puede habilitar en C# especificando la instancia de diseño como primer argumento para el CompressedLayout.SetIsHeadless método :
CompressedLayout.SetIsHeadless(stackLayout, true);
Importante
Puesto que la compresión de diseño quita un diseño del árbol visual, no es adecuado para los diseños que tienen una apariencia visual o que obtienen entrada táctil. Por lo tanto, diseños que establecen propiedades VisualElement (como Xamarin_Forms VisualElement _VisualElement_BackgroundColor" data-linktype="absolute-path">BackgroundColor , Xamarin_Forms _VisualElement_IsVisible" data-linktype="absolute-path">, IsVisible Xamarin_Forms BackgroundColor _VisualElement_Rotation" data-linktype="absolute-path">Rotation , Xamarin_Forms _VisualElement_Scale" data-linktype="absolute-path">Scale , Xamarin_Forms _VisualElement_TranslationX" data-linktype="absolute-path">and Xamarin_Forms TranslationXIsVisible _VisualElement_TranslationY" data-linktype="absolute-path">TranslationY or that accept gestures, are not candidates for layout compression. Sin embargo, al habilitar la compresión de diseño en un diseño que establece propiedades de apariencia visual o que acepta gestos, no se producirá un error de compilación o tiempo de ejecución. En su lugar, se aplicará la compresión de diseño y las propiedades de apariencia visual, y el reconocimiento de gestos, producirán un error en modo silencioso.
Para el botón Facebook, la compresión de diseño se puede habilitar en las tres clases de diseño:
<StackLayout CompressedLayout.IsHeadless="true">
<StackLayout CompressedLayout.IsHeadless="true" ...>
<AbsoluteLayout CompressedLayout.IsHeadless="true" ...>
...
</AbsoluteLayout>
</StackLayout>
...
</StackLayout>
En Android, esto da como resultado una jerarquía de vistas anidada de 14 vistas:
En comparación con la jerarquía de vistas anidadas original de 17 vistas, esto representa una reducción en el número de vistas del 17 %. Aunque esta reducción puede parecer insignificante, la reducción de la vista en toda una página puede ser más significativa.
Representadores rápidos
Los representadores rápidos reducen la inflación y los costos de representación de los controles Xamarin.Forms en Android al aplanar la jerarquía de vistas nativa resultante. Esto mejora aún más el rendimiento al crear menos objetos, lo que a su vez da como resultado un árbol visual menos complejo y menos uso de memoria. Para obtener más información sobre los representadores rápidos, vea Representadores rápidos.
Para el botón Facebook de la aplicación de ejemplo, la combinación de compresión de diseño y representadores rápidos genera una jerarquía de vistas anidadas de 8 vistas:
En comparación con la jerarquía de vistas anidadas original de 17 vistas, esto representa una reducción del 52 %.
La aplicación de ejemplo contiene una página extraída de una aplicación real. Sin compresión de diseño y representadores rápidos, la página genera una jerarquía de vistas anidadas de 130 vistas en Android. Habilitar representadores rápidos y compresión de diseño en clases de diseño adecuadas reduce la jerarquía de vistas anidadas a 70 vistas, una reducción del 46 %.
Resumen
La compresión de diseño quita los diseños especificados del árbol visual en un intento de mejorar el rendimiento de la representación de páginas. La ventaja de rendimiento que esto ofrece varía según la complejidad de una página, la versión del sistema operativo que se va a usar y el dispositivo en el que se ejecuta la aplicación. Sin embargo, las mejoras de rendimiento más importantes se apreciarán en los dispositivos más antiguos.