LayoutkomprimierungLayout Compression

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

Bei der layoutkomprimierung werden angegebene Layouts aus der visuellen Struktur entfernt, um die Seiten Rendering-Leistung zu verbessern. In diesem Artikel wird erläutert, wie Sie die layoutkomprimierung und die damit verbundenen Vorteile aktivieren können.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.

ÜbersichtOverview

Xamarin.Formsführt das Layout mit zwei Reihen von rekursiven Methoden aufrufen aus: performs layout using two series of recursive method calls:

  • Layout beginnt am oberen Rand der visuellen Struktur mit einer Seite und durchläuft alle Verzweigungen der visuellen Struktur, um alle visuellen Elemente auf einer Seite zu umfassen.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. Elemente, die übergeordnete Elemente anderer Elemente sind, sind für die Größenanpassung und Positionierung ihrer untergeordneten Elemente in Bezug auf sich verantwortlich.Elements that are parents to other elements are responsible for sizing and positioning their children relative to themselves.
  • Die Invalidierung ist der Prozess, durch den eine Änderung in einem Element auf einer Seite einen neuen layoutcycle auslöst.Invalidation is the process by which a change in an element on a page triggers a new layout cycle. Elemente werden als ungültig betrachtet, wenn Sie nicht mehr über die richtige Größe oder Position verfügen.Elements are considered invalid when they no longer have the correct size or position. Jedes Element in der visuellen Struktur mit untergeordneten Elementen wird immer dann benachrichtigt, wenn eines der untergeordneten Elemente seine Größe ändert.Every element in the visual tree that has children is alerted whenever one of its children changes sizes. Daher kann eine Änderung der Größe eines Elements in der visuellen Strukturänderungen verursachen, die die Struktur aufschlagen.Therefore, a change in the size of an element in the visual tree can cause changes that ripple up the tree.

Weitere Informationen zur Funktionsweise von Xamarin.Forms Layout finden Sie unter Erstellen eines benutzerdefinierten Layouts.For more information about how Xamarin.Forms performs layout, see Creating a Custom Layout.

Das Ergebnis des Layoutprozesses ist eine Hierarchie von systemeigenen Steuerelementen.The result of the layout process is a hierarchy of native controls. Diese Hierarchie enthält jedoch zusätzliche Container-Renderer und Wrapper für Platt Form Renderer, die das Schachteln der Ansichts Hierarchie weiter erhöhen.However, this hierarchy includes additional container renderers and wrappers for platform renderers, further inflating the view hierarchy nesting. Umso tiefer die Schachtelungs Ebene, desto größer ist der Arbeitsaufwand, der Xamarin.Forms zum Anzeigen einer Seite ausgeführt werden muss.The deeper the level of nesting, the greater the amount of work that Xamarin.Forms has to perform to display a page. Bei komplexen Layouts kann die Ansichts Hierarchie tief und breit sein und über mehrere Schachtelungs Ebenen verfügen.For complex layouts, the view hierarchy can be both deep and broad, with multiple levels of nesting.

Sehen Sie sich beispielsweise die folgende Schaltfläche aus der Beispielanwendung für die Anmeldung bei Facebook an:For example, consider the following button from the sample application for logging into Facebook:

Facebook-Schaltfläche

Diese Schaltfläche wird als benutzerdefiniertes Steuerelement mit der folgenden XAML-Ansichts Hierarchie angegeben: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>

Die resultierende Struktur der Hierarchie-Sicht kann mit Xamarin Inspectoruntersucht werden.The resulting nested view hierarchy can be examined with Xamarin Inspector. Unter Android enthält die Hierarchie der Hierarchie der Hierarchie 17 Ansichten:On Android, the nested view hierarchy contains 17 views:

Hierarchie für Facebook-Schaltfläche anzeigen

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 angegebene Layouts aus der visuellen Struktur entfernt werden, wodurch die Seiten Rendering verbessert werden kannLayout 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. Der Leistungsvorteil 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.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. Die größten Leistungssteigerungen werden jedoch bei älteren Geräten zu verzeichnen sein.However, the biggest performance gains will be seen on older devices.

Hinweis

Obwohl sich dieser Artikel auf die Ergebnisse der Anwendung der layoutkomprimierung unter Android konzentriert, ist er gleichermaßen auf IOS anwendbar.While this article focuses on the results of applying layout compression on Android, it's equally applicable to iOS.

LayoutkomprimierungLayout Compression

In XAML kann die layoutkomprimierung aktiviert werden, indem die CompressedLayout.IsHeadless angefügte-Eigenschaft für true eine Layoutklasse auf festgelegt wird: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>   

Alternativ kann Sie in c# aktiviert werden, indem die layoutanstanz als erstes Argument der-Methode angegeben wird CompressedLayout.SetIsHeadless :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);

Wichtig

Da bei der layoutkomprimierung ein Layout aus der visuellen Struktur entfernt wird, eignet es sich nicht für Layouts, die eine visuelle Darstellung haben oder die Berührungs Eingaben erhalten.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. Daher sind Layouts, die VisualElement Eigenschaften festlegen (z BackgroundColor . b., IsVisible , Rotation , Scale , TranslationX und TranslationY oder, die Gesten akzeptieren, keine Kandidaten für die layoutkomprimierung.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. Das Aktivieren der layoutkomprimierung für ein Layout, das Eigenschaften visueller Darstellungen festlegt, oder die Gesten akzeptiert, führt jedoch nicht zu einem Build-oder Laufzeitfehler.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. Stattdessen wird die layoutkomprimierung angewendet, und die Eigenschaften der visuellen Darstellung und die Gestenerkennung schlagen im Hintergrund fehl.Instead, layout compression will be applied and visual appearance properties, and gesture recognition, will silently fail.

Für die Facebook-Schaltfläche kann die layoutkomprimierung in den drei layoutklassen aktiviert werden: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>  

Unter Android führt dies zu einer Hierarchie der Hierarchie mit einer Hierarchie von 14 Ansichten:On Android, this results in a nested view hierarchy of 14 views:

Hierarchie für Facebook-Schaltfläche mit layoutkomprimierung

Im Vergleich zur ursprünglichen Hierarchie der Hierarchie mit der ursprünglichen Struktur von 17 Sichten stellt dies eine Reduzierung der Anzahl von Sichten von 17% dar.Compared to the original nested view hierarchy of 17 views, this represents a reduction in the number of views of 17%. Diese Reduzierung mag unbedeutend erscheinen, aber die Sicht Reduzierung auf eine gesamte Seite kann signifikanter sein.While this reduction may appear insignificant, the view reduction over an entire page can be more significant.

Schnelle RendererFast Renderers

Schnelle Renderer verringern die Inflations-und renderingkosten von Steuer Xamarin.Forms Elementen auf Android, indem die resultierende Native Ansichts Hierarchie vereinfacht wird.Fast renderers reduce the inflation and rendering costs of Xamarin.Forms controls on Android by flattening the resulting native view hierarchy. Dies verbessert die Leistung, indem weniger Objekte erstellt werden, was wiederum zu einer weniger komplexen visuellen Struktur und weniger Arbeitsspeicher Auslastung führt.This further improves performance by creating fewer objects, which in turn results in a less complex visual tree and less memory use. Weitere Informationen zu schnellen rendererarbeitern finden Sie unter schnelle Renderer.For more information about fast renderers, see Fast Renderers.

Für die Facebook-Schaltfläche in der Beispielanwendung erzeugt die Kombination der layoutkomprimierung und der schnellen Renderer eine Schaltfläche für die Hierarchie von 8 Ansichten:For the Facebook button in the sample application, combining layout compression and fast renderers produces a nested view hierarchy of 8 views:

Hierarchie für Facebook-Schaltfläche mit layoutkomprimierung und schnellen renderatoren anzeigen

Im Vergleich zur ursprünglichen Hierarchie der Hierarchie mit der ursprünglichen Struktur von 17 Sichten stellt dies eine Reduzierung von 52% dar.Compared to the original nested view hierarchy of 17 views, this represents a reduction of 52%.

Die Beispielanwendung enthält eine Seite, die aus einer realen Anwendung extrahiert wurde.The sample application contains a page extracted from a real application. Ohne layoutkomprimierung und schnelle Renderer erzeugt die Seite eine Hierarchie der Hierarchie mit einer Hierarchie von 130 in Android.Without layout compression and fast renderers, the page produces a nested view hierarchy of 130 views on Android. Durch die Aktivierung schneller Renderer und layoutkomprimierung für geeignete layoutklassen wird die Hierarchie der geschachtelte View auf 70 Sichten reduziert, was zu einer Verringerung von 46% führt.Enabling fast renderers and layout compression on appropriate layout classes reduces the nested view hierarchy to 70 views, a reduction of 46%.

ZusammenfassungSummary

Bei der layoutkomprimierung werden angegebene Layouts aus der visuellen Struktur entfernt, um die Seiten Rendering-Leistung zu verbessern.Layout compression removes specified layouts from the visual tree in an attempt to improve page rendering performance. 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.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. Die größten Leistungssteigerungen werden jedoch bei älteren Geräten zu verzeichnen sein.However, the biggest performance gains will be seen on older devices.