Anordnen von FireMonkey-Steuerelementen
Nach oben zu FireMonkey-Anwendungsdesign
Eine FireMonkey-Anwendung präsentiert ein oder mehrere Steuerelemente in einem Formular. Das Formular kann 2D-Inhalt, 3D-Inhalt oder beides enthalten.
Inhaltsverzeichnis
Das Koordinatensystem von FireMonkey
Im Formular-Designer befindet sich der Ursprung des Koordinatensystems links oben und erstreckt sich nach rechts unten. Koordinaten werden als Gleitkommazahlen mit einfacher Genauigkeit ausgedrückt. Alle unterstützten Plattformen verwenden quadratische Pixel. Eine Koordinateneinheit wird normalerweise auf ein Pixel abgebildet, mit einigen genau umschriebenen Ausnahmen.
- Die Eigenschaft Position eines 2D-Steuerelements ist ein TPosition-Typ mit X- und Y-Eigenschaften. Die Eigenschaften Width und Height geben die Größe des Steuerelements an.
- 3D-Objekte verwenden den Typ TPosition3D mit einer zusätzlichen Z-Eigenschaft mit positiven Werten, die in den Bildschirm weisen (X weist nach links und Y nach unten, entsprechend der "Drei-Finger-Regel"); und einer Depth-Eigenschaft. Die Position und die Größe definieren gemeinsam eine Art umgebende Box, die ein Steuerelement beschreibt: seine Inhaltsbox.
FireMonkey-Steuerelemente haben Besitzer, übergeordnete und untergeordnete Elemente
In FireMonkey kann jedes beliebige Steuerelement einem anderen Steuerelement übergeordnet sein.
Normalerweise ist das Formular der Besitzer aller darin enthaltenen Steuerelemente, und Steuerelemente, die im Formular-Designer angeordnet werden, folgen dieser Konvention. Der Besitzer ist das erste und einzige Argument für den allgemeinen Create-Konstruktor:
TFmxObject.Create(AOwner: TComponent)
Wenn Sie mit diesem Code Komponenten erstellen und das Steuerelement während der restlichen Lebensdauer des Formulars bestehen bleiben soll, geben Sie das Formular als Besitzer an. Das Formular sollte ohne Weiteres als Self oder als Besitzer eines vorhandenen Steuerelements verfügbar sein. Der Besitzer ist für die Freigabe des Steuerelements verantwortlich, wenn er sich selbst freigibt.
Übergeben Sie für transiente Komponenten nil als Besitzer. Der Code ist dann für die Freigabe der Komponente verantwortlich, wenn sie nicht mehr benötigt wird. In der Praxis hat sich bewährt, mithilfe eines try/finally-Blocks die Freigabe der Komponente sicherzustellen, auch wenn eine Exception aufgetreten ist.
Die Eigentümerschaft reicht aber nicht aus, damit das Steuerelement auf dem Formular angezeigt wird. Es muss darüber hinaus in die Komponentenhierarchie aufgenommen werden, entweder direkt dem Formular untergeordnet oder weiter unten in der Hierarchie. Für im Formular-Designer angeordnete Steuerelemente wird dies automatisch durchgeführt, und die Komponentenhierarchie wird in der Strukturansicht angezeigt. Setzen Sie beim programmseitigen Erstellen von Steuerelementen die Eigenschaft Parent auf das Formular oder auf das entsprechende Steuerelement.
Die Position eines untergeordneten Objekts ist relativ zu seinem übergeordneten Objekt (Parent). Wenn die Koordinaten null sind, beginnt das untergeordnete Objekt an derselben Position links oben wie das übergeordnete Objekt.
Die Abstammung ist nicht auf Container-ähnliche Steuerelemente beschränkt. Zudem ist die Eigenschaft ClipChildren standardmäßig auf False gesetzt (bei True könnten keine untergeordneten Objekte außerhalb der Inhaltsbox des Steuerelements gezeichnet werden). Auf diese Weise sind Ad-hoc-Zusammenstellungen von zusammengehörigen Steuerelementen ohne formalen Container möglich. Zum Beispiel: Ein TLabel-Steuerelement kann dem TEdit-Steuerelement, das es beschreibt, untergeordnet sein. Das TLabel-Steuerelement kann eine negative Position haben, sodass es über oder vor dem Steuerelement platziert wird. Beim Verschieben von TEdit wird auch TLabel verschoben. TLayout kann als sonst funktionsloser Container zum Anordnen anderer Objekte verwendet werden.
Zusätzlich zu einem gemeinsamen Koordinatenraum nutzen untergeordnete Objekte weitere Attribute, wie Sichtbarkeit, Opazität, Drehung und Skalierung, gemeinsam. Das Ändern dieser Attribute des übergeordneten Objekts wirkt sich auf alle untergeordneten Objekte in dieser Unterhierarchie aus.
Ausrichten mit Außen- und Innenabstand
Die Eigenschaft Align eines Steuerelements bestimmt dessen Teilnahme an der automatischen Positionierung und/oder Größenfestlegung entlang der vier Seiten oder der Mitte des übergeordneten Objekts, sowohl als Ausgangseinstellung als auch bei Größenänderungen des übergeordneten Objekts. Die Vorgabe lautet None, damit keine derartigen automatischen Berechnungen durchgeführt werden: das Steuerelement verbleibt an seiner Position. Die Eigenschaft ist ein Enum mit dem Typ TAlignLayout und mit über einem Dutzend weiterer möglicher Werte. Die meisten davon bewirken die Einbeziehung zweier Werte für die automatische Ausrichtung in die Berechnung: Padding (Innenabstand) des übergeordneten Objekts und Margins (Außenabstand) des Steuerelements.
Padding spart Platz innerhalb der Inhaltsbox des übergeordneten Objekts aus. Wenn beispielsweise der obere (Top) und linke (Left) Innenabstand des übergeordneten Objekts jeweils 10 beträgt, dann wird die Position einer automatisch links oben positionierten Komponente auf 10,10 gesetzt.
Genauer: Nicht die Inhaltsbox des Steuerelements wird automatisch positioniert, sondern seine Layoutbox. Der Unterschied zwischen diesen beiden zeigt sich in der Eigenschaft Margins des Steuerelements, sofern vorhanden. Die Eigenschaft Margins spart Platz außerhalb der Inhaltsbox des Steuerelements aus. Wird der Außenabstand (Margins) erhöht, bleibt die Größe der Layoutbox gleich und die Inhaltsbox schrumpft (falls erzwungen). Zurück zu dem "10,10"-Beispiel: Wenn der obere (Top) und der linke (Left) Außenabstand jeweils 5 beträgt, dann ist die Position des Steuerelements 15,15.
Hinweis: Der Außen- und Innenabstand entsprechen in FireMonkey dem CSS-Box-Modell.
Der Außenabstand (Margins) sorgt für die Trennung zwischen automatisch von einem übergeordneten Objekt positionierten Steuerelementen und der Innenabstand (Padding) für den Abstand zwischen diesen Steuerelementen und dem Rand des übergeordneten Objekts. Das gilt für positive Werte des Außen- und Innenabstands; negative Werte sind auch zulässig. Bei einem negativen Außenabstand werden untergeordnete Objekte außerhalb der Inhaltsbox des übergeordneten Objekts platziert, die auch dann gerendert werden, wenn ihre Eigenschaft ClipChildren auf False gesetzt ist. Bei einem negativen Innenabstand wird die Inhaltsbox eines Steuerelements außerhalb seiner berechneten Layoutbox platziert.
Anker
Anker (Anchors) werden benötigt, wenn ein Steuerelement seine Position in einem bestimmten Abstand zu den Rändern des übergeordneten Steuerelements beibehalten muss oder vergrößert werden muss und trotzdem der ursprüngliche Abstand zwischen seinen Rändern und denjenigen des übergeordneten Steuerelements beibehalten werden muss. Verankerte Steuerelemente "kleben" an den Seiten des Containers und werden auch vergrößert, falls angegeben. Durch die Kombination von Ankern und verschachtelten Containern können Sie in FireMonkey intelligente, vergrößerbare Layouts erstellen. Mit der Eigenschaft Anchors legen Sie die Anker eines Steuerelements fest. Wenn die Größe des übergeordneten Steuerelements zur Laufzeit geändert wird, behält ein verankertes Steuerelement konstant den beim Entwurf festgelegten Abstand zu den Rändern des übergeordneten Steuerelements bei. Beim Entwurf hat das Setzen der Eigenschaft Anchors keine sichtbare Auswirkung für das Formular.
Ein Steuerelement kann an keinem, einem oder mehr als einem Rand verankert sein. Wenn ein Steuerelement gleichzeitig an gegenüberliegenden Rändern verankert ist (Anchors=[akLeft,akRight] oder Anchors=[akTop,akBottom]), wird das Steuerelement horizontal oder vertikal vergrößert (gestreckt), um konstant den Abstand zu den linken und rechten oder oberen und unteren Rändern des übergeordneten Steuerelements beizubehalten. Ein Steuerelement kann an allen 4 Rändern seines übergeordneten Steuerelements verankert werden; in diesem Fall wird es in alle Richtungen gestreckt. Standardmäßig ist ein Steuerelement an den linken und oberen Rändern seines Containers verankert (Anchors=[akTop,akLeft]).
Die Eigenschaft Align wirkt sich auf Anchors aus. Bei der automatischen Ausrichtung gesetzte Anker sind hiervon ausgenommen.
Hinweis: Verankern Sie die untergeordneten Elemente eines Layouts für den Bildlauf (TScrollBox, TVertScrollBox usw.) nicht am rechten oder unteren Rand. Wird die Eigenschaft Anchors eines einem Layout für den Bildlauf untergeordneten Elements auf akBottom, akRight oder beides gesetzt, wird das untergeordnete Element fortwährend vergrößert, damit der Abstand zu den Layout-Rändern beim Berechnen der Größe des Layout-Inhalts beibehalten wird. Die untergeordneten Elemente eines Layouts für den Bildlauf sollten nur am linken oder oberen Rand verankert werden.
Skalierung und Drehung
Zwei weitere allgemein verfügbare Attribute wirken sich auf die endgültige, gerenderte Position eines Steuerelements aus: Skalierung und Drehung.
Hinweis: Skalierung und Drehung ändern die Positions- oder Größeneigenschaften eines Steuerelements nicht. Dies spiegelt sich im Formular-Designer wieder: Die acht Griffpunkte eines ausgewählten Objekts (vier Ecken und vier Seiten) markieren die eigentliche Inhaltsbox, die vor dem Anwenden von Skalierung und Drehung manuell gesetzt oder über das Layout berechnet wurde.
Die Eigenschaft Scale eines Steuerelements wird durch eine Instanz desselben Typs wie seine Position repräsentiert: TPosition für 2D-Objekte und TPosition3D für 3D-Objekte. Die X-, Y- und Z-Werte sind standardmäßig auf 1 gesetzt. Das bedeutet, dass keine Dimension des Objekts skaliert ist. Der Skalierungswert ist ein einfacher Multiplikator für jede Achse. Werte, die größer als 1 sind, werden entlang der Achse gestreckt. Werte die kleiner als 1 aber größer als 0 sind, werden entlang der Achse verkleinert oder gequetscht. Wird jede Achse mit null skaliert, verschwindet das Steuerelement. Für eine gleichmäßige Skalierung muss für alle Achsen derselbe Wert verwendet werden.
Die 2D-Skalierung ist immer am Ursprung des Steuerelements, der linken oberen Ecke der Inhaltsbox, verankert. Eine negative Skalierung dreht sich um diesen Ursprungspunkt. Beispielsweise bewirkt eine negative X-Skalierung, dass das Steuerelement nach unten und links gerendert wird, und es dabei an den linken Rand der Inhaltsbox gedreht wird. Die 3D-Skalierung geht vom Mittelpunkt des Objekts aus.
Bei der 2D-Drehung kann der Drehpunkt angepasst werden. Die Eigenschaft RotationCenter ist auch ein TPosition-Typ, der Wert wird aber in Einheitenkoordinaten angegeben: 0,0 ist die linke obere Ecke des Steuerelements und 1,1 die rechte untere. Die Vorgabe ist die Mitte des Steuerelements: 0.5,0.5. Das Seitenverhältnis der Inhaltsbox spielt keine Rolle. Bei diesem Drehpunkt wird RotationAngle in Grad (im Uhrzeigersinn) angegeben.
Bei 3D wird die Drehung immer vom Mittelpunkt aus mit RotationAngle, einem TPosition3D-Typ, vorgenommen, der die Gradanzahl auf den X-, Y- und Z-Achsen angibt. Auch die Drehung folgt der "Drei-Finger-Regel". Zum Beispiel zeigt bei einer X- und Y-Drehung von null die Z-Achse in den Bildschirm, und die positive Drehung auf der Z-Achse wird im Uhrzeigersinn vorgenommen.
Bei 2D erfolgt die Skalierung vor der Drehung. Dies ist wichtig, weil die Skalierung vom Ursprung aus vorgenommen wird und die Drehung anpassbar ist. Bei 3D wird beides vom Mittelpunkt aus vorgenommen, daher spielt die Reihenfolge keine Rolle.
Verwenden von FireMonkey-Layouts
FireMonkey-Layouts sind Container, die zum Gruppieren anderer Steuerelemente und zum gemeinsamen Anordnen und Bearbeiten verwendet werden. FireMonkey-Layouts sind nicht visuelle Komponenten. Wenn Sie Layouts gemeinsam mit der einen oder anderen oben dargestellten Anordnungsmethode verwenden, können Sie komplexe Oberflächen ohne Verwendung von komplizierten mathematischen Berechnungen erzielen.
Die folgenden Layouts enthalten vordefinierte Anordnungen für untergeordnete Steuerelemente:
- TFlowLayout ordnet untergeordnete Steuerelemente wie Wörter in einem Absatz an.
- TGridLayout ordnet untergeordnete Steuerelemente in einem Gitter mit gleich großen Zellen an. Die Größe aller Steuerelemente wird automatisch angepasst, damit sie in die Zellen passen. Bei dieser Art von Layout werden die Ausrichtungs-, Positions- und Anker-Eigenschaften der Steuerelemente automatisch festgelegt. Die explizite Änderung dieser Eigenschaften wird ignoriert. Das TGridLayout wirkt sich auf die Größe der Steuerelemente aus, und diese wird automatisch festgelegt.
- TGridPanelLayout ordnet untergeordnete Steuerelemente in einem Gitter-Bereich an. Jedes Steuerelement wird in einer Zelle des Gitters platziert, aber Sie können die Größe der Steuerelemente innerhalb der Zellen manuell anpassen. Sie können festlegen, dass sich ein Steuerelement über mehrere Zellen erstrecken soll.
FireMonkey stellt mehrere Layouts für Bildlauffelder bereit, um Bildlaufbereiche, die untergeordnete Steuerelemente enthalten, darzustellen.
Mit Bildlauffeldern werden mehrere Steuerelemente (wie Schaltflächen, Listenfelder, Eingabefelder, Optionsfelder usw.) unter derselben bildlauffähigen übergeordneten Komponente gruppiert:
- TScrollBox – Repräsentiert einen Bildlaufbereich in einem Formular.
- THorzScrollBox – Repräsentiert eine auf den horizontalen Bildlauf beschränkte TScrollBox.
- TVertScrollBox – Repräsentiert eine auf den vertikalen Bildlauf beschränkte TScrollBox.
- TFramedScrollBox – Repräsentiert eine TScrollBox mit einem deckenden Hintergrund und dem umgebenden Rahmen.
- TFramedVertScrollBox – Repräsentiert eine TVertScrollBox mit einem deckenden Hintergrund und dem umgebenden Rahmen.
Bei der Verwendung von Bildlauffeldern kann ein Formular viele Steuerelemente enthalten, die in einem bildlauffähigen Bereich angeordnet sind. Auf diese Weise wird weniger Platz auf dem Formular belegt. Ein weiterer Einsatzbereich von Steuerelementen dieser Art ist die Realisierung mehrerer Bildlaufbereiche (Ansichten) in einem einzigen Formular. Ansichten werden häufig in kommerziellen Textverarbeitungs-, Tabellenkalkulations- oder Projektverwaltungsprogrammen verwendet.
Unter iOS, Mac OS und Android reagiert eine bildlauffähige Ansicht auf die Geschwindigkeit und Richtung von Gesten, um Inhalt in einer für den Benutzer natürlichen Weise anzuzeigen. FireMonkey enthält die Unit InertialMovement, die diese gleichmäßige dynamische Bewegung einer bildlauffähigen Ansicht unter Windows emuliert.
Zugriffstasten verwenden
Um eine Zugriffstasten einem FireMonkey-Steuerelement zuzuordnen, verwenden Sie die Eigenschaft Text des Steuerelements. Die FireMonkey-Steuerelemente, die die Zugriffstasten unterstützen, sind: