Layoutkomprimierung

Beispiel herunterladen Das Beispiel herunterladen

Die Layoutkomprimierung entfernt angegebene Layouts aus der visuellen Struktur, um die Leistung des Seitenrenderings zu verbessern. In diesem Artikel wird erläutert, wie Sie die Layoutkomprimierung aktivieren und welche Vorteile sie mit sich bringen kann.

Übersicht

Xamarin.Forms führt das Layout mithilfe von zwei Reihen rekursiver Methodenaufrufe aus:

  • Das Layout beginnt am oberen Rand der visuellen Struktur mit einer Seite und durchläuft alle Verzweigungen der visuellen Struktur, um jedes visuelle Element auf einer Seite zu umfassen. Elemente, die übergeordnete Elemente für andere Elemente sind, sind für die Größenanpassung und Positionierung ihrer untergeordneten Elemente in Bezug auf sich selbst verantwortlich.
  • Invalidation ist der Prozess, bei dem eine Änderung in einem Element auf einer Seite einen neuen Layoutzyklus auslöst. Elemente gelten als ungültig, wenn sie nicht mehr die richtige Größe oder Position aufweisen. Jedes Element in der visuellen Struktur mit untergeordneten Elementen wird benachrichtigt, wenn eines der untergeordneten Elemente die Größe ändert. Daher kann eine Änderung der Größe eines Elements in der visuellen Struktur Zu Änderungen führen, die die Struktur vergrößern.

Weitere Informationen zur Xamarin.Forms Ausführung des Layouts finden Sie unter Erstellen eines benutzerdefinierten Layouts.

Das Ergebnis des Layoutprozesses ist eine Hierarchie systemeigener Steuerelemente. Diese Hierarchie enthält jedoch zusätzliche Containerrenderer und Wrapper für Plattformrenderer, wodurch die Schachtelung der Ansichtshierarchie weiter aufgebläht wird. Je tiefer die Ebene der Schachtelung ist, desto größer ist der Arbeitsaufwand, Xamarin.Forms der zum Anzeigen einer Seite ausgeführt werden muss. Bei komplexen Layouts kann die Ansichtshierarchie sowohl tief als auch breit sein und mehrere Ebenen der Schachtelung aufweisen.

Betrachten Sie beispielsweise die folgende Schaltfläche aus der Beispielanwendung für die Anmeldung bei Facebook:

Facebook-Schaltfläche

Diese Schaltfläche wird als benutzerdefiniertes Steuerelement mit der folgenden XAML-Ansichtshierarchie angegeben:

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

Die resultierende hierarchie der geschachtelten Ansicht kann mit der visuellen Livestruktur untersucht werden. Unter Android enthält die Hierarchie der geschachtelten Ansicht 17 Ansichten:

Schaltfläche

Die Layoutkomprimierung, die für Xamarin.Forms Anwendungen auf den iOS- und Android-Plattformen verfügbar ist, zielt darauf ab, die Schachtelung der Ansicht zu vereinfachen, indem bestimmte Layouts aus der visuellen Struktur entfernt werden, was die Leistung des Seitenrenderings verbessern kann. Der Leistungsvorteil, der bereitgestellt wird, hängt von der Komplexität einer Seite, der Version des verwendeten Betriebssystems und dem Gerät ab, auf dem die Anwendung ausgeführt wird. Die größten Leistungssteigerungen werden jedoch bei älteren Geräten zu verzeichnen sein.

Hinweis

Dieser Artikel konzentriert sich zwar auf die Ergebnisse der Anwendung der Layoutkomprimierung auf Android, gilt aber auch für iOS.

Layoutkomprimierung

In XAML kann die Layoutkomprimierung aktiviert werden, indem die CompressedLayout.IsHeadless angefügte Eigenschaft für eine Layoutklasse auf true festgelegt wird:

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

Alternativ kann es in C# aktiviert werden, indem das Layout instance als erstes Argument für die CompressedLayout.SetIsHeadless Methode angegeben wird:

CompressedLayout.SetIsHeadless(stackLayout, true);

Wichtig

Da die Layoutkomprimierung ein Layout aus der visuellen Struktur entfernt, ist es nicht für Layouts geeignet, die eine visuelle Darstellung aufweisen oder Toucheingaben erhalten. Daher sind Layouts, die Eigenschaften festlegen VisualElement (zBackgroundColor. B. , IsVisible, Rotation, , ScaleTranslationX und, oderTranslationY, die Gesten akzeptieren), keine Kandidaten für die Layoutkomprimierung. Das Aktivieren der Layoutkomprimierung für ein Layout, das visuelle Darstellungseigenschaften festlegt oder Gesten akzeptiert, führt jedoch nicht zu einem Build- oder Laufzeitfehler. Stattdessen wird die Layoutkomprimierung angewendet, und visuelle Darstellungseigenschaften und Gestenerkennung schlagen automatisch fehl.

Für die Facebook-Schaltfläche kann die Layoutkomprimierung für die drei Layoutklassen aktiviert werden:

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

Unter Android ergibt dies eine geschachtelte Ansichtshierarchie von 14 Ansichten:

Schaltfläche

Im Vergleich zur ursprünglichen geschachtelten Ansichtshierarchie von 17 Ansichten bedeutet dies eine Verringerung der Anzahl der Ansichten um 17 %. Obwohl diese Reduzierung unbedeutend erscheint, kann die Reduzierung der Ansicht über eine gesamte Seite erheblicher sein.

Schnelle Renderer

Schnelle Renderer reduzieren die Inflation und Renderingkosten von Xamarin.Forms Steuerelementen unter Android, indem sie die resultierende hierarchie native Ansicht reduzieren. Dies verbessert die Leistung weiter, da weniger Objekte erstellt werden, was wiederum zu einer weniger komplexen visuellen Struktur und einer geringeren Arbeitsspeicherauslastung führt. Weitere Informationen zu schnellen Renderern finden Sie unter Schnelle Renderer.

Für die Facebook-Schaltfläche in der Beispielanwendung führt die Kombination von Layoutkomprimierung und schnellen Renderern zu einer geschachtelten Ansichtshierarchie von 8 Ansichten:

Schaltfläche

Im Vergleich zur ursprünglichen geschachtelten Ansichtshierarchie von 17 Ansichten entspricht dies einer Reduzierung von 52 %.

Die Beispielanwendung enthält eine Seite, die aus einer realen Anwendung extrahiert wurde. Ohne Layoutkomprimierung und schnelle Renderer erzeugt die Seite eine geschachtelte Ansichtshierarchie von 130 Ansichten unter Android. Durch das Aktivieren von schnellen Renderern und der Layoutkomprimierung für entsprechende Layoutklassen wird die Hierarchie der geschachtelten Ansicht auf 70 Ansichten reduziert, was einer Verringerung um 46 % entspricht.

Zusammenfassung

Die Layoutkomprimierung entfernt angegebene Layouts aus der visuellen Struktur, um die Leistung des Seitenrenderings zu verbessern. Der daraus resultierende Leistungsvorteil variiert je nach Komplexität einer Seite, der Version des verwendeten Betriebssystems und des Geräts, auf dem die Anwendung ausgeführt wird. Die größten Leistungssteigerungen werden jedoch bei älteren Geräten zu verzeichnen sein.