Compresión de diseñoLayout Compression

Descargar ejemplo descargar el ejemploDownload Sample Download the sample

Compresión de diseño quita diseños especificados del árbol visual en un intento de mejorar el rendimiento de representación de página. En este artículo se explica cómo habilitar la compresión de diseño y los beneficios que puede ofrecer.Layout compression removes specified layouts from the visual tree in an attempt to improve page rendering performance. This article explains how to enable layout compression and the benefits it can bring.

Información generalOverview

Xamarin.Forms se realiza mediante dos series de llamadas al método recursiva del diseño:Xamarin.Forms performs layout using two series of recursive method calls:

  • Diseño comienza en la parte superior del árbol visual con una página y pasa a través de todas las ramas del árbol visual para abarcar todos los elementos visuales en una página.Layout begins at the top of the visual tree with a page, and it proceeds through all branches of the visual tree to encompass every visual element on a page. Los elementos que son elementos primarios a otros elementos son responsables de ajuste de tamaño y la posición de sus elementos secundarios en relación con ellos mismos.Elements that are parents to other elements are responsible for sizing and positioning their children relative to themselves.
  • Invalidación es el proceso por el cual un cambio en un elemento de una página desencadena un nuevo ciclo de diseño.Invalidation is the process by which a change in an element on a page triggers a new layout cycle. Los elementos se consideran no válidos cuando ya no tienen el tamaño correcto o la posición.Elements are considered invalid when they no longer have the correct size or position. Todos los elementos en el árbol visual que tiene elementos secundarios es una alerta cuando cambia uno de sus elementos secundarios tamaños.Every element in the visual tree that has children is alerted whenever one of its children changes sizes. Por lo tanto, un cambio en el tamaño de un elemento en el árbol visual puede provocar cambios que ripple el árbol.Therefore, a change in the size of an element in the visual tree can cause changes that ripple up the tree.

Para obtener más información acerca de cómo realiza el diseño Xamarin.Forms, consulte crear un diseño personalizado.For more information about how Xamarin.Forms performs layout, see Creating a Custom Layout.

El resultado del proceso de diseño es una jerarquía de controles nativos.The result of the layout process is a hierarchy of native controls. Sin embargo, esta jerarquía incluye los representadores de contenedor adicional y contenedores de los representadores de plataforma, lo que infla aún más la jerarquía de vistas de anidamiento.However, this hierarchy includes additional container renderers and wrappers for platform renderers, further inflating the view hierarchy nesting. La profundidad del nivel de anidamiento, mayor será la cantidad de trabajo que Xamarin.Forms tiene que realizar para mostrar una página.The deeper the level of nesting, the greater the amount of work that Xamarin.Forms has to perform to display a page. Para diseños complejos, la jerarquía de vistas puede ser profunda y amplia, con varios niveles de anidamiento.For complex layouts, the view hierarchy can be both deep and broad, with multiple levels of nesting.

Por ejemplo, considere el siguiente botón desde la aplicación de ejemplo para iniciar sesión en Facebook:For example, consider the following button from the sample application for logging into Facebook:

Este botón se especifica como un control personalizado con la jerarquía de vistas XAML siguiente:This button is specified as a custom control with the following XAML view hierarchy:

<ContentView ...>
    <StackLayout>
        <StackLayout ...>
            <AbsoluteLayout ...>
                <Button ... />    
                <Image ... />
                <Image ... />
                <BoxView ... />
                <Label ... />
                <Button ... />
            </AbsoluteLayout>
        </StackLayout>
        <Label ... />
    </StackLayout>    
</ContentView>

Se puede examinar la jerarquía resultante de la vista anidada con Xamarin Inspector.The resulting nested view hierarchy can be examined with Xamarin Inspector. En Android, la jerarquía de la vista anidada contiene 17 vistas:On Android, the nested view hierarchy contains 17 views:

Compresión de diseño, que está disponible para las aplicaciones de Xamarin.Forms en las plataformas iOS y Android, tiene como objetivo simplificar el anidamiento quitando diseños especificados del árbol visual, lo que puede mejorar el rendimiento de la representación de la página de vistas.Layout compression, which is available for Xamarin.Forms applications on the iOS and Android platforms, aims to flatten the view nesting by removing specified layouts from the visual tree, which can improve page-rendering performance. La ventaja de rendimiento que se entrega 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.The performance benefit that's delivered varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. Sin embargo, las mejoras de rendimiento más importantes se apreciarán en los dispositivos más antiguos.However, the biggest performance gains will be seen on older devices.

Nota

Aunque en este artículo se centra en los resultados de aplicar la compresión de diseño en Android, es igualmente aplicable a iOS.While this article focuses on the results of applying layout compression on Android, it's equally applicable to iOS.

Compresión de diseñoLayout Compression

En XAML, se puede habilitar la compresión de diseño estableciendo el CompressedLayout.IsHeadless propiedad adjunta true en una clase de diseño:In XAML, layout compression can be enabled by setting the CompressedLayout.IsHeadless attached property to true on a layout class:

<StackLayout CompressedLayout.IsHeadless="true">
  ...
</StackLayout>   

Como alternativa, se puede habilitar en C# mediante la especificación de la instancia de diseño como el primer argumento para el CompressedLayout.SetIsHeadless método:Alternatively, it can be enabled in C# by specifying the layout instance as the first argument to the CompressedLayout.SetIsHeadless method:

CompressedLayout.SetIsHeadless(stackLayout, true);

Importante

Dado que la compresión de diseño quita un diseño el árbol visual, no es adecuado para los diseños que tienen una apariencia visual, o que obtener la entrada táctil.Since layout compression removes a layout from the visual tree, it's not suitable for layouts that have a visual appearance, or that obtain touch input. Por lo tanto, los diseños que establezca VisualElement propiedades (como BackgroundColor , IsVisible , Rotation , Scale , TranslationX y TranslationY o que aceptar movimientos, no son candidatos para el diseño compresión.Therefore, layouts that set VisualElement properties (such as BackgroundColor, IsVisible, Rotation, Scale, TranslationX and TranslationY or that accept gestures, are not candidates for layout compression. Sin embargo, habilitar la compresión de diseño en un diseño que establece las propiedades de apariencia visual, o que acepta los gestos, no se producirá un error de compilación o en tiempo de ejecución.However, enabling layout compression on a layout that sets visual appearance properties, or that accepts gestures, will not result in a build or runtime error. En su lugar, se aplicará la compresión de diseño y las propiedades de apariencia visual y reconocimiento de gestos, fallarán en modo silencioso.Instead, layout compression will be applied and visual appearance properties, and gesture recognition, will silently fail.

Para el botón de Facebook, se puede habilitar la compresión de diseño en las clases de tres diseño:For the Facebook button, layout compression can be enabled on the three layout classes:

<StackLayout CompressedLayout.IsHeadless="true">
    <StackLayout CompressedLayout.IsHeadless="true" ...>
        <AbsoluteLayout CompressedLayout.IsHeadless="true" ...>
            ...
        </AbsoluteLayout>
    </StackLayout>
    ...
</StackLayout>  

En Android, el resultado en una jerarquía de vistas anidadas de 14 vistas:On Android, this results in a nested view hierarchy of 14 views:

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 de un 17%.Compared to the original nested view hierarchy of 17 views, this represents a reduction in the number of views of 17%. Aunque esta reducción puede parecer insignificante, la reducción de la vista a través de una página entera puede ser más importante.While this reduction may appear insignificant, the view reduction over an entire page can be more significant.

Representadores rápidosFast Renderers

Los representadores rápidos reducen la inflación y los costos de representación de controles de Xamarin.Forms en Android mediante la reducción de la jerarquía de vistas nativas resultante.Fast renderers reduce the inflation and rendering costs of Xamarin.Forms controls on Android by flattening the resulting native view hierarchy. Esto mejora aún más el rendimiento porque crea menos objetos, lo que a su vez resulta en un árbol visual menos complejo y menos uso de memoria.This further improves performance by creating fewer objects, which in turn results in a less complex visual tree and less memory use. Para obtener más información sobre los representadores rápidos, consulte representadores rápidos.For more information about fast renderers, see Fast Renderers.

Para el botón de Facebook en la aplicación de ejemplo, combinación de compresión de diseño y representadores rápidos genera una jerarquía de vistas anidadas de 8 vistas:For the Facebook button in the sample application, combining layout compression and fast renderers produces a nested view hierarchy of 8 views:

En comparación con la jerarquía de vistas anidadas original de 17 vistas, esto representa una reducción de 52%.Compared to the original nested view hierarchy of 17 views, this represents a reduction of 52%.

La aplicación de ejemplo contiene una página que se extraen de una aplicación real.The sample application contains a page extracted from a real application. 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.Without layout compression and fast renderers, the page produces a nested view hierarchy of 130 views on Android. Habilitación de representadores rápidos y compresión de diseño en las clases de diseño apropiado, reduce la jerarquía de vistas anidadas a 70 vistas, una reducción del 46%.Enabling fast renderers and layout compression on appropriate layout classes reduces the nested view hierarchy to 70 views, a reduction of 46%.

ResumenSummary

Compresión de diseño quita diseños especificados del árbol visual en un intento de mejorar el rendimiento de representación de página.Layout compression removes specified layouts from the visual tree in an attempt to improve page rendering performance. 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.The performance benefit that this delivers varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. Sin embargo, las mejoras de rendimiento más importantes se apreciarán en los dispositivos más antiguos.However, the biggest performance gains will be seen on older devices.