Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)

In diesem Tutorial wird eine allgemeine Strategie für die Verwendung einer Master-Ansicht für verschiedene Standards (wie Telefon oder Tablet) beschrieben, ohne dass unterschiedliche Ansichten für jeden Standard verwendet werden müssen.

Jede FireMonkey-Komponente kann einen Besitzer, ein übergeordnetes Objekt und untergeordnete Objekte haben

Jede FireMonkey-Komponente folgt dem Konzept von Besitzer, übergeordnetem Objekt und untergeordneten Objekten. Wenn Sie eine Komponente auf einem Formular platzieren, wird das Formular zum Besitzer und zum übergeordneten Objekt der Komponente.

Wenn Sie einer Komponente (z. B. einer Symbolleiste) Komponenten (z. B. eine Schaltfläche, eine Beschriftung usw.) hinzufügen, ist die Symbolleiste (ToolBar) gleichzeitig übergeordnetes Objekt und Besitzer der Schaltfläche, der Beschriftung usw. Diese Über-/Untergeordnet-Beziehung wird grafisch in der Baumansicht in der Strukturansicht dargestellt.

Das Layout eines untergeordneten Objekts ist als Wert relativ zum übergeordneten Objekt definiert. In der folgenden Abbildung ist Label1 Toolbar1 untergeordnet, und das Layout von Label1 ist relativ zu Toolbar1.

OwnerParentAndChildren.png

Verwenden von allgemeinen layoutbezogenen Eigenschaften einer FireMonkey-Komponente

Verwenden der Eigenschaft "Align"

Die Eigenschaft Align eines Steuerelements bestimmt, ob es automatisch entlang der vier Seiten oder in der Mitte des übergeordneten Objekts neu positioniert wird und/oder dessen Größe geändert wird, sowohl als Ausgangseinstellung als auch bei Größenänderungen des übergeordneten Objekts.

Der Vorgabewert für die Eigenschaft Align ist None, d. h., dass keine automatischen Berechnungen durchgeführt werden: das Steuerelement verbleibt an seiner Position:

Align = None

AlNone.png

Typische Werte für die Eigenschaft Align sind folgende (Azurblau gibt den Bereich für das untergeordnete Objekt an):

Top Bottom
AlTop.png AlBottom.png
Left Right
AlLeft.png AlRight.png
Center Client
AlCenter.png AlClientLayout.png

Wenn Sie für eine Komponente einen Align-Wert von Top, Bottom, Left oder Right festlegen, verwenden die Align-Eigenschaften der anderen Komponenten den verbleibenden Bereich.

Die Größe und die Form des verbleibenden Bereichs (Client) werden auf Basis der Geräteausrichtung und des Standards (iPhone oder iPad) ebenfalls geändert.

Die folgenden Abbildungen zeigen das Layout im Querformat (horizontal) und im Hochformat (vertikal) für drei Komponenten, wobei für zwei die Ausrichtung Top und für die dritte Client festgelegt ist.

AlClientOnLandscapeOrPortlaitForm2.png

Verwenden der Eigenschaft "Margins"

Der Außenabstand (Margins) sorgt für die Trennung zwischen automatisch von einem übergeordneten Objekt positionierten Steuerelementen.

In der folgenden Abbildung ist für die rechte Seite der Komponente (Align = Client) die Eigenschaft Margins festgelegt, damit um die Komponente herum Platz frei bleibt.

UsingPaddingProperty2.png

Verwenden der Eigenschaft "Padding"

Padding spart Platz innerhalb der Inhaltsbox des übergeordneten Objekts aus. Im Objektinspektor können Sie Werte (in Pixel) für Padding festlegen:

  • Left
  • Right
  • Bottom
  • Top

In der folgenden Abbildung ist für die übergeordnete Komponente (die zwei Bereiche enthält) die Eigenschaft Padding festgelegt, damit innerhalb der übergeordneten Komponente Platz frei bleibt:

UsingMarginsProperty2.png

Verwenden der Eigenschaft "Anchors"

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.

Eigenschaft "Anchors" für Eingabe-Steuerelemente

Angenommen, für ein Eingabe-Steuerelement auf einer Symbolleiste (ToolBar) soll ein fester Abstand zwischen dem rechten Rand des Eingabe-Steuerelements und dem Formularrand (ToolBar) beibehalten werden. Mit Ankern können Sie festlegen, dass ein Steuerelement in Bezug auf die Seiten seines übergeordneten Objekts unverändert bleiben soll.

Wenn Sie möchten, dass das Eingabe-Steuerelement in Bezug auf ToolBar (das übergeordnete Objekt) dieselbe relative Position beibehalten soll, können Sie die Eigenschaft Anchors auf akLeft, akTop, akRight setzen. Wird die Größe von ToolBar geändert, wird auch die Größe des Eingabe-Steuerelements entsprechend den Anchors-Einstellungen geändert:

iOS

AkRightForEditControl.png

Android

AkRightForEditControlAndroid.png


Eigenschaft "Anchors" für Schaltflächen-Steuerelemente

Angenommen, für ein Schaltflächen-Steuerelement, das sich am rechten Ende der Symbolleiste (ToolBar) befindet, soll derselbe Abstand zwischen dem rechten Rand des Schaltflächen-Steuerelements und dem Rand des Formulars beibehalten werden. Zwischen dem linken Rand des Schaltflächen-Steuerelements und dem linken Rand des Formulars soll aber nicht derselbe Abstand beibehalten werden. In diesem Fall können Sie die Eigenschaft Anchors auf akTop, akRight setzen (wählen Sie akLeft nicht aus), sodass das Schaltflächen-Steuerelement für Top und Right denselben Abstand zu ToolBar (übergeordnet) beibehält.

iOS:

AkRightForButtonControl.png

Android:

AkRightForButtonControlAndroid.png

Verwenden der Komponente "TLayout"

Mit der Komponente TLayout, die zur Laufzeit nicht sichtbar ist, können untergeordnete Steuerelemente für die gemeinsame Bearbeitung gruppiert werden. Sie können beispielsweise die Sichtbarkeit einer Gruppe von Steuerelementen gleichzeitig festlegen, indem Sie die Eigenschaft Visible des Layouts festlegen. TLayout legt keine der Eigenschaften der untergeordneten Steuerelemente automatisch fest.

In der Strukturansicht können Sie ausgewählte Steuerelemente als TLayout untergeordnet festlegen.
Markieren Sie die Steuerelemente, die Sie verschieben möchten. Ziehen Sie dann die Gruppe der Steuerelemente auf das Steuerelement, das das übergeordnete Objekt sein soll, und legen Sie die Steuerelemente dort ab. In der Strukturansicht ist die Gruppe der Steuerelemente jetzt dem neuen übergeordneten Objekt untergeordnet:

1. Anfangsstatus 2. Zu verschiebende Steuerelemente markieren   3. Auf das übergeordnete Objekt ziehen

Tlayer1.png

Tlayer2.png

TLayer3.png

Mit den TLayout-Eigenschaften Align, Padding, Margins, Anchors und anderen können Sie das Layout für einen bestimmten Bereich festlegen. Die TLayout-Komponente kann genauso wie das DIV-Tag in HTML verwendet werden.


Siehe auch