Compression des dispositions

Télécharger l’exemple Télécharger l’exemple

La compression de disposition supprime les dispositions spécifiées de l’arborescence visuelle dans le but d’améliorer les performances de rendu des pages. Cet article explique comment activer la compression de disposition et les avantages qu’elle peut apporter.

Vue d’ensemble

Xamarin.Forms effectue la disposition à l’aide de deux séries d’appels de méthode récursifs :

  • La mise en page commence en haut de l’arborescence visuelle par une page, et elle passe par toutes les branches de l’arborescence visuelle pour englober chaque élément visuel d’une page. Les éléments qui sont parents d’autres éléments sont responsables du dimensionnement et du positionnement de leurs enfants par rapport à eux-mêmes.
  • Invalidation est le processus par lequel une modification d’un élément d’une page déclenche un nouveau cycle de disposition. Les éléments sont considérés comme non valides lorsqu’ils n’ont plus la taille ou la position correctes. Chaque élément de l’arborescence visuelle qui a des enfants est alerté chaque fois qu’un de ses enfants change de taille. Par conséquent, une modification de la taille d’un élément dans l’arborescence visuelle peut entraîner des modifications qui se répercutent sur l’arborescence.

Pour plus d’informations sur l’exécution Xamarin.Forms de la disposition, consultez Création d’une disposition personnalisée.

Le résultat du processus de disposition est une hiérarchie de contrôles natifs. Toutefois, cette hiérarchie inclut des convertisseurs de conteneurs et des wrappers supplémentaires pour les convertisseurs de plateforme, ce qui gonfle davantage l’imbrication de la hiérarchie des vues. Plus le niveau d’imbrication est profond, plus la quantité de travail à Xamarin.Forms effectuer pour afficher une page est importante. Pour les dispositions complexes, la hiérarchie d’affichage peut être à la fois profonde et large, avec plusieurs niveaux d’imbrication.

Par exemple, considérez le bouton suivant de l’exemple d’application pour la connexion à Facebook :

Bouton Facebook

Ce bouton est spécifié en tant que contrôle personnalisé avec la hiérarchie d’affichage XAML suivante :

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

La hiérarchie de vues imbriquées résultante peut être examinée avec l’arborescence d’éléments visuels dynamiques. Sur Android, la hiérarchie d’affichages imbriqués contient 17 vues :

Bouton Afficher la hiérarchie pour Facebook

La compression de disposition, qui est disponible pour Xamarin.Forms les applications sur les plateformes iOS et Android, vise à aplatir l’imbrication des vues en supprimant les dispositions spécifiées de l’arborescence visuelle, ce qui peut améliorer les performances de rendu des pages. L’avantage en matière de performances qui est fourni varie en fonction de la complexité d’une page, de la version du système d’exploitation utilisée et de l’appareil sur lequel l’application s’exécute. Toutefois, les gains en termes de performances les plus importants seront visibles sur les appareils les plus anciens.

Notes

Bien que cet article se concentre sur les résultats de l’application de la compression de disposition sur Android, il s’applique également à iOS.

Compression des dispositions

En XAML, la compression de disposition peut être activée en définissant la CompressedLayout.IsHeadless propriété true jointe sur sur une classe de disposition :

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

Vous pouvez également l’activer en C# en spécifiant la disposition instance comme premier argument de la CompressedLayout.SetIsHeadless méthode :

CompressedLayout.SetIsHeadless(stackLayout, true);

Important

Étant donné que la compression de disposition supprime une disposition de l’arborescence visuelle, elle ne convient pas aux dispositions qui ont une apparence visuelle ou qui obtiennent une entrée tactile. Par conséquent, les dispositions qui définissent VisualElement des propriétés (telles que BackgroundColor, IsVisible, Rotation, ScaleTranslationX et TranslationY ou qui acceptent des mouvements) ne sont pas candidates à la compression de disposition. Toutefois, l’activation de la compression de disposition sur une disposition qui définit des propriétés d’apparence visuelle, ou qui accepte des mouvements, n’entraîne pas d’erreur de génération ou d’exécution. Au lieu de cela, la compression de disposition est appliquée et les propriétés d’apparence visuelle, ainsi que la reconnaissance de mouvement, échouent silencieusement.

Pour le bouton Facebook, la compression de disposition peut être activée sur les trois classes de disposition :

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

Sur Android, il en résulte une hiérarchie de vues imbriquées de 14 vues :

Bouton Afficher la hiérarchie pour Facebook avec compression de disposition

Par rapport à la hiérarchie de vues imbriquées d’origine de 17 vues, cela représente une réduction du nombre de vues de 17 %. Bien que cette réduction puisse sembler insignifiante, la réduction de l’affichage sur une page entière peut être plus importante.

Renderers rapides

Les convertisseurs rapides réduisent l’inflation et les coûts de rendu des Xamarin.Forms contrôles sur Android en aplatissant la hiérarchie de vue native résultante. Cela améliore davantage les performances en créant moins d’objets, ce qui entraîne à son tour une arborescence visuelle moins complexe et une utilisation moindre de la mémoire. Pour plus d’informations sur les convertisseurs rapides, consultez Fast Renderers.

Pour le bouton Facebook dans l’exemple d’application, la combinaison de la compression de disposition et des convertisseurs rapides produit une hiérarchie de vues imbriquées de 8 vues :

Bouton Afficher la hiérarchie pour Facebook avec compression de disposition et convertisseurs rapides

Par rapport à la hiérarchie de vues imbriquées d’origine de 17 vues, cela représente une réduction de 52 %.

L’exemple d’application contient une page extraite d’une application réelle. Sans compression de disposition et convertisseurs rapides, la page produit une hiérarchie de vues imbriquées de 130 vues sur Android. L’activation des convertisseurs rapides et de la compression de disposition sur les classes de disposition appropriées réduit la hiérarchie des vues imbriquées à 70 vues, soit une réduction de 46 %.

Résumé

La compression de disposition supprime les dispositions spécifiées de l’arborescence visuelle dans le but d’améliorer les performances de rendu des pages. Les avantages en matière de performances de cette technique varient selon la complexité d’une page, la version du système d’exploitation utilisé et l’appareil sur lequel l’application est en cours d’exécution. Toutefois, les gains en termes de performances les plus importants seront visibles sur les appareils les plus anciens.