Zusammenfassung für Kapitel 21: Transformationen
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.
Eine Xamarin.Forms-Ansicht wird auf dem Bildschirm an einer Position und in einer Größe angezeigt, die durch das übergeordnete Element bestimmt wird. Hierbei handelt es sich in der Regel um eine Ableitung von Layout oder Layout<View>. Die Transformation ist ein Xamarin.Forms-Feature, mit dem die Position, die Größe oder sogar die Ausrichtung geändert werden kann.
Xamarin.Forms unterstützt drei grundlegende Transformationsarten:
- Übersetzung – Horizontales oder vertikales Verschieben eines Elements
- Skalierung – Ändern der Größe eines Elements
- Drehung – Drehen eines Elements um einen Punkt oder eine Achse
In Xamarin.Forms ist die Skalierung isotrop. Sie wirkt sich also gleichmäßig auf die Breite und auf die Höhe aus. Die Drehung wird sowohl auf der zweidimensionalen Bildschirmoberfläche als auch im 3D-Raum unterstützt. Es gibt keine geneigte Transformation und keine generalisierte Matrixtransformation.
Transformationen werden mit acht Eigenschaften vom Typ double unterstützt, die von der VisualElement-Klasse definiert werden:
Alle diese Eigenschaften werden durch bindbare Eigenschaften unterstützt. Diese können formatiert und Ziele der Datenbindung sein. Kapitel 22. Animation zeigt, wie diese Eigenschaften animiert werden können, aber einige Beispiele in diesem Kapitel zeigen, wie Sie sie mithilfe des Xamarin.FormsTimers animieren können.
Transformationseigenschaften beeinflussen nur, wie das Element gerendert wird, und nicht, wie das Element im Layout wahrgenommen wird.
Die Übersetzungstransformation
Werte ungleich 0 (null) der Eigenschaften TranslationX und TranslationY verschieben ein Element horizontal oder vertikal.
Mit dem TranslationDemo-Programm können Sie mit diesen Eigenschaften mit zwei Slider-Elementen experimentieren, die die TranslationX- und TranslationY-Eigenschaften eines Frame-Elements steuern. Die Transformation wirkt sich auch auf alle untergeordneten Elemente von Frame aus.
Texteffekte
Eine häufige Verwendung der Übersetzungseigenschaften besteht darin, das Rendering von Text leicht zu versetzen. Dies wird im Beispiel TextOffsets veranschaulicht:
Ein weiterer Effekt ist das Rendern mehrerer Kopien eines Label-Elements, damit diese einen 3D-Block darstellen. Dieser Vorgang wird im Beispiel BlockText veranschaulicht.
Sprünge und Animationen
Das ButtonJump-Beispiel verwendet die Übersetzung, um ein Button-Element zu verschieben, wenn auf dieses getippt wird. Der primäre Zweck besteht jedoch darin, zu verdeutlichen, dass Button Benutzereingaben an der Stelle empfängt, an der die Schaltfläche gerendert wird.
Das ButtonGlide-Beispiel ist ähnlich, verwendet aber einen Timer, um Button von einem Punkt zu einem anderen zu animieren.
Die Skalierungstransformation
Die Scale-Transformation kann das gerenderte Element vergrößern oder verkleinern. Der Standardwert ist 1. Der Wert 0 bewirkt, dass das Element unsichtbar ist. Negative Werte bewirken, dass das Element um 180 Grad gedreht wird. Die Scale-Eigenschaft hat keine Auswirkung auf die Width- oder Height-Eigenschaften des-Elements. Diese Werte bleiben unverändert.
Sie können mit der Scale-Eigenschaft experimentieren, indem Sie das Beispiel SimpleScaleDemo nutzen.
Das Beispiel ButtonScaler veranschaulicht den Unterschied zwischen der Animation der Scale-Eigenschaft von Button und der Animation der FontSize-Eigenschaft. Die FontSize-Eigenschaft wirkt sich darauf aus, wie Button im Layout wahrgenommen wird, die Scale-Eigenschaft jedoch nicht.
Das Beispiel ScaleToSize berechnet eine Scale-Eigenschaft, die auf ein Label-Element angewendet wird, um es so weit wie möglich zu vergrößern, solange es noch auf die Seite passt.
Verankern der Skalierung
Die Elemente, die in den vorherigen drei Beispielen skaliert wurden, wurden alle relativ zum Mittelpunkt des Elements vergrößert oder verkleinert. Die Elemente wurden also in alle Richtungen gleichmäßig vergrößert oder verkleinert. Nur der Mittelpunkt des Elements bleibt während der Skalierung an derselben Position.
Sie können den Mittelpunkt der Skalierung ändern, indem Sie die Eigenschaften AnchorX und AnchorY festlegen. Diese Eigenschaften sind relativ zum Element. Bei AnchorX bezieht sich der Wert 0 auf die linke Seite und der Wert 1 auf die rechte Seite des Elements. Gleichermaßen bezieht sich 0 bei AnchorY auf die obere Seite und 1 auf die untere Seite. Beide Eigenschaften haben den Standardwert 0.5, der dem Mittelpunkt entspricht.
Das Beispiel AnchoredScaleDemo ermöglicht Ihnen das Experimentieren mit den Eigenschaften AnchorX, AnchorY und Scale.
Unter iOS sind Änderungen an den Standardwerten von AnchorX und AnchorY nicht mit der Ausrichtung des Smartphones kompatibel.
Die Drehungstransformation
Die Rotation-Eigenschaft wird in Grad angegeben und gibt eine Drehung im Uhrzeigersinn um einen Punkt des Elements an, der durch AnchorX und AnchorY definiert wird. Mit dem Beispiel PlaneRotationDemo können Sie mit diesen drei Eigenschaften experimentieren.
Gedrehte Texteffekte
Das Beispiel BoxViewCircle veranschaulicht die erforderliche Mathematik zum Zeichnen eines Kreises mithilfe von 64 winzigen gedrehten BoxView-Elementen.
Im Beispiel RotatedText werden mehrere Label-Elemente angezeigt, bei denen die gleiche Textzeichenfolge so gedreht wurde, dass sie wie Speichen aussehen.
Im Beispiel CircularText wird eine Textzeichenfolge angezeigt, die von einem Kreis umschlossen zu sein scheint.
Eine Analoguhr
Die Bibliothek Xamarin.FormsBook.Toolkit enthält eine AnalogClockViewModel-Klasse, die Winkel für die Zeiger einer Uhr berechnet. Um Plattformabhängigkeiten in ViewModel zu vermeiden, verwendet die Klasse Task.Delay anstelle eines Timers, um einen neuen DateTime-Wert zu ermitteln.
Auch in Xamarin.FormsBook.Toolkit enthalten ist eine SecondTickConverter Klasse, die implementiert IValueConverter und dient zum Runden eines zweiten Winkels auf die nächste Sekunde.
MinimalBoxViewClock verwendet drei rotierende BoxView-Elemente zum Zeichnen einer Analoguhr.
BoxViewClock verwendet BoxView für umfangreichere Grafiken wie die Teilstriche auf dem Ziffernblatt der Uhr und Zeiger, die sich in geringem Abstand zu ihren Enden drehen:
Zusätzlich bewirkt eine SecondBackEaseConverter-Klasse in Xamarin.FormsBook.Toolkit, dass der zweite Zeiger sich vor dem Vorwärtssprung ein wenig zurückbewegt und dann wieder in die richtige Position wechselt.
Vertikale Schieberegler
Das Beispiel VerticalSliders veranschaulicht, dass Slider-Elemente um 90 Grad gedreht werden und dabei weiterhin funktionieren können. Allerdings ist es schwierig, diese gedrehten Slider-Elemente zu positionieren, da sie im Layout immer noch horizontal erscheinen.
3D-artige Drehung
Mit der RotationX-Eigenschaft wird ein Element scheinbar um eine 3D-X-Achse herum gedreht, sodass es scheint, als ob der obere oder untere Rand des Elements sich auf den Betrachter zu- oder von diesem wegbewegen. Ebenso scheint RotationY ein Element um die Y-Achse zu drehen, sodass es scheint, als ob die linke und die rechte Seite des Elements sich auf den Betrachter zu- oder von diesem wegbewegen.
Die AnchorX-Eigenschaft wirkt sich auf RotationY, jedoch nicht auf RotationX aus. Die AnchorY-Eigenschaft wirkt sich auf RotationX, jedoch nicht auf RotationY aus. Sie können mit dem Beispiel ThreeDeeRotationDemo experimentieren, um die Interaktionen dieser Eigenschaften kennenzulernen.
Das 3D-Koordinatensystem von Xamarin.Forms ist auf die Verwendung der linken Hand ausgelegt. Wenn Sie den Zeigefinger der linken Hand in Richtung der ansteigenden X-Koordinaten (auf der rechten Seite) und den Mittelfinger in Richtung der ansteigenden Y-Koordinaten (unten) bewegen, zeigt Ihr Daumen in Richtung der ansteigenden Z-Koordinaten (außerhalb des Bildschirms).
Wenn Sie auf einer der drei Achsen mit dem linken Daumen in Richtung der ansteigenden Werte zeigen, gibt die Kurve Ihrer Finger die Drehrichtung für positive Drehwinkel an.