Zusammenfassung von Kapitel 14. Absolutes Layout
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 und die zweiten beiden angeben, die die Größe des untergeordneten Elements angeben. Oder Sie können 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 Elements eines AbsoluteLayout festzulegen, nachdem es der Children-Sammlung hinzugefügt wurde, mithilfe der statischen Methode AbsoluteLayout.SetLayoutBounds. Das erste Argument ist das untergeordnete Element, das zweite ist ein Rectangle-Objekt. Sie können angeben, dass sich die untergeordneten Größen horizontal und/oder vertikal ändern, indem Sie 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 das AbsoluteLayout diesen Wert durch Aufrufen von AbsoluteLayout.GetLayoutBounds abrufen, das 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 verwandten 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:
None(gleich 0)XProportional(1)YProportional(2)PositionProportional(3)WidthProportional(4)HeightProportional(8)SizeProportional(12)All(\xFFFFFFFF)
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 "bruchweise untergeordnete Koordinaten" bezeichnet werden. Sie können aus dezimalen untergeordneten Koordinaten in die für die Verwendung der folgenden Formeln erforderlichen AbsoluteLayout Layoutgrenzen konvertieren:
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.