Zusammenfassung von Kapitel 14. Absolutes Layout

Artikel
07/13/2023

Hinweis

Dieses Buch wurde im Frühjahr 2016 veröffentlicht und seitdem nicht aktualisiert. Wenngleich ein großer Teil des Buchs weiterhin relevante Informationen liefert, sind einige Abschnitte veraltet, und einige Themen sind nicht mehr korrekt oder vollständig.

Wie StackLayout wird AbsoluteLayout von Layout<View> abgeleitet und erbt eine Children-Eigenschaft. AbsoluteLayout implementiert ein Layoutsystem, das erfordert, dass der Programmierer die Positionen seiner untergeordneten Elemente sowie optional deren Größe angibt. Die Position wird über die obere linke Ecke des untergeordneten Elements relativ zur oberen linken Ecke des AbsoluteLayout in geräteunabhängigen Einheiten angegeben. AbsoluteLayout implementiert außerdem eine Funktion für proportionale Positionierung und Größenanpassung.

AbsoluteLayout sollte als Layoutsystem für spezielle Zwecke betrachtet werden, das nur verwendet werden sollte, wenn der Programmierer den untergeordneten Elementen (z. B. BoxView-Elementen) eine Größe vorgeben kann, oder wenn die Größe des Elements sich nicht auf die Positionierung anderer untergeordneter Elemente auswirkt. Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.

In diesem Kapitel wird außerdem die wichtige Funktion der angefügten bindbaren Eigenschaften eingeführt, die es ermöglichen, dass in einer Klasse definierte Eigenschaften (in diesem Fall AbsoluteLayout) einer anderen Klasse (einem untergeordneten Element von AbsoluteLayout) angefügt werden können.

„AbsoluteLayout“ in Code

Sie können der Children-Sammlung eines AbsoluteLayout mithilfe der Add-Standardmethode ein untergeordnetes Element hinzufügen, doch AbsoluteLayout bietet auch eine erweiterte Add-Methode, mit der Sie ein Rectangle angeben können. Eine andere Add-Methode erfordert nur einen Point, wobei dann das untergeordnete Element uneingeschränkt ist und seine Größe selber anpasst.

Sie können einen Rectangle Wert mit einem Konstruktor erstellen, der vier Werte erfordert– die ersten beiden, die die Position der oberen linken Ecke des untergeordneten Elements relativ zum übergeordneten Element angeben, und die zweiten beiden, die die Größe des untergeordneten Elements angeben. Alternativ können Sie einen Konstruktor verwenden, der einen Point - und einen Size -Wert erfordert.

Diese Add-Methoden werden im AbsoluteDemo-Beispiel veranschaulicht, in dem BoxView-Elemente mithilfe von Rectangle-Werten und ein Label-Element mithilfe nur eines Point-Werts positioniert werden.

Im ChessboardFixed-Beispiel werden 32 BoxView-Elemente verwendet, um das Schachbrettmuster zu erstellen. Das Programm gibt den BoxView-Elementen eine hartcodierte Größe von 35 Einheiten im Quadrat. Für das AbsoluteLayout sind seine HorizontalOptions und VerticalOptions auf LayoutOptions.Center festgelegt, wodurch das AbsoluteLayout eine Gesamtgröße von 280 Einheiten im Quadrat erhält.

Angefügte bindbare Eigenschaften

Es ist auch möglich, die Position und optional die Größe eines untergeordneten AbsoluteLayout einer festzulegen, nachdem es der Children Auflistung mit der statischen Methode AbsoluteLayout.SetLayoutBoundshinzugefügt wurde. Das erste Argument ist das untergeordnete Element, das zweite ist ein Rectangle-Objekt. Sie können angeben, dass sich das untergeordnete Element horizontal und/oder vertikal annimmt, indem Sie Die Werte für Breite und Höhe auf die AbsoluteLayout.AutoSize Konstante festlegen.

Im ChessboardDynamic-Beispiel wird das AbsoluteLayout in einer ContentView mit einem SizeChanged-Handler zum Aufrufen von AbsoluteLayout.SetLayoutBounds für alle untergeordneten Elemente positioniert, um sie so groß wie möglich zu machen.

Die angefügte bindbare Eigenschaft, die von AbsoluteLayout definiert wird, ist das statische, schreibgeschützte Feld vom Typ BindableProperty namens AbsoluteLayout.LayoutBoundsProperty. Die statische AbsoluteLayout.SetLayoutBounds-Methode wird durch Aufrufen von SetValue für das untergeordnete Element mit der AbsoluteLayout.LayoutBoundsProperty implementiert. Das untergeordnete Element enthält ein Verzeichnis, in dem die angefügte bindbare Eigenschaft mit ihrem Wert gespeichert ist. Während des Layouts kann dieser AbsoluteLayout Wert abgerufen werden, indem aufgerufen AbsoluteLayout.GetLayoutBoundswird, was mit einem GetValue Aufruf implementiert wird.

Proportionale Anpassung der Größe und Positionierung

AbsoluteLayout implementiert außerdem eine Funktion für proportionale Größenanpassung und Positionierung. Die -Klasse definiert eine zweite angefügte bindbare Eigenschaft( LayoutFlagsProperty) mit den zugehörigen statischen Methoden AbsoluteLayout.SetLayoutFlags und AbsoluteLayout.GetLayoutFlags.

Das Argument für AbsoluteLayout.SetLayoutFlags und der Rückgabewert von AbsoluteLayout.GetLayoutFlags sind Werte vom Typ AbsoluteLayoutFlags, eine Enumeration mit den folgenden Membern:

Sie können diese mit dem bitweisen OR-Operator von C# kombinieren.

Wenn diese Flags festgelegt sind, werden bestimmte Eigenschaften der Rectangle-Layoutgrenzenstruktur, die zur Positionierung und Größenanpassung des untergeordneten Elements verwendet wird, proportional interpretiert.

Wenn das WidthProportional-Flag festgelegt ist, bedeutet ein Width-Wert von 1, dass das untergeordnete Element dieselbe Breite wie das AbsoluteLayout hat. Derselbe Ansatz wird für die Höhe verwendet.

Die proportionale Positionierung berücksichtigt die Größe. Wenn das XProportional-Flag festgelegt ist, ist die X-Eigenschaft der Rectangle-Layoutgrenzen proportional. Der Wert 0 bedeutet, dass der linke Rand des untergeordneten Elements am linken Rand des AbsoluteLayout positioniert wird, während eine Position von 1 bedeutet, dass der rechte Rand des untergeordneten Elements am rechten Rand des AbsoluteLayout positioniert wird, nicht über den rechten Rand des AbsoluteLayout hinaus, wie Sie es möglicherweise erwarten würden. Eine X-Eigenschaft von 0,5 zentriert das untergeordnete Element horizontal im AbsoluteLayout.

Das ChessboardProportional-Beispiel veranschaulicht die Verwendung der proportionalen Größenanpassung und Positionierung.

Arbeiten mit proportionalen Koordinaten

Manchmal ist es einfacher, sich die proportionale Positionierung anders vorzustellen, als sie im AbsoluteLayout implementiert ist. Möglicherweise bevorzugen Sie die Arbeit mit proportionalen Koordinaten, bei denen eine X-Eigenschaft von 1 den linken Rand des untergeordneten Elements (anstelle des rechten Rands) am rechten Rand des AbsoluteLayout positioniert.

Dieses alternative Positionierungsschema kann als "untergeordnete Bruchteilkoordinaten" bezeichnet werden. Sie können von untergeordneten Teilkoordinaten in die Layoutgrenzen konvertieren, die für AbsoluteLayout die Verwendung der folgenden Formeln erforderlich sind:

layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width))

layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))

Dies wird im ProportionalCoordinateCalc-Beispiel veranschaulicht.

„AbsoluteLayout“ und XAML

Sie können ein AbsoluteLayout in XAML verwenden und die angefügten bindbaren Eigenschaften für die untergeordneten Elemente eines AbsoluteLayout mithilfe der Attributwerte von AbsoluteLayout.LayoutBounds und AbsoluteLayout.LayoutFlags festlegen. Dies wird in den Beispielen AbsoluteXamlDemo und ChessboardXaml veranschaulicht. Das letztgenannte Programm enthält 32 BoxView Elemente, verwendet aber einen impliziten Style, der die AbsoluteLayout.LayoutFlags-Eigenschaft enthält, um das Markup auf ein Mindestmaß zu beschränken.

Ein Attribut in XAML, das aus einem Klassennamen, einem Punkt und einem Eigenschaftsnamen besteht, ist immer eine angefügte bindbare Eigenschaft.

Überlagerungen

Sie können AbsoluteLayout verwenden, um eine Überlagerung zu erstellen, die die Seite mit anderen Steuerelementen bedeckt, vielleicht um den Benutzer vor der Interaktion mit den normalen Steuerelementen auf der Seite zu schützen.

Das SimpleOverlay-Beispiel veranschaulicht diese Methode und veranschaulicht ferner die ProgressBar, in der das Ausmaß angezeigt wird, in dem ein Programm eine Aufgabe erledigt hat.

Etwas Spaßiges

Das DotMatrixClock-Beispiel zeigt die aktuelle Uhrzeit mit einer simulierten 5x7-Punktmatrixanzeige an. Jeder Punkt ist eine BoxView (davon gibt es 228) und wird auf dem AbsoluteLayout positioniert.

Das BouncingText-Programm animiert zwei Label-Objekte, sodass sie horizontal und vertikal über den Bildschirm springen.