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 eines gemeinsamen Formulars für verschiedene Standards (wie Telefon oder Tablet) beschrieben. Unterschiedliche Formulare für verschiedene Standards werden dafür nicht benötigt.

Im Designer für mobile FireMonkey-Formulare können Sie die Benutzeroberfläche in der Vorschau anzeigen, ohne dafür die Anwendung auf einem Gerät ausführen zu müssen – ändern Sie einfach in der Dropdown-Liste in der rechten oberen Ecke das Gerät oder die Ausrichtung:

SelectDeviceFormFactor.png

Weitere Informationen finden Sie unter Einstellungen für mobiles Gerät.

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

Jede FireMonkey-Komponente beinhaltet das 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 Form des verbleibenden Bereichs (Client) werden auch auf Basis der Geräteausrichtung und des Standards (iPhone oder iPad) 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 Platz frei bleibt.

UsingPaddingProperty2.png

Verwenden der Eigenschaft "Padding"

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

  • Links
  • Rechts
  • Unten
  • Oben

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änderlich 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. Wenn die Größe von ToolBar geändert wird, 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. Es soll aber nicht derselbe Abstand zwischen dem linken Rand des Schaltflächen-Steuerelements und dem linken Rand des Formulars 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 nur die Eigenschaft Visible des Layouts setzen. 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.

Arbeiten mit vollen Benutzeroberflächen: Verwenden von TVertScrollBox-Komponenten

Im Allgemeinen sollten Formulare nicht zu viele Elemente enthalten, damit Benutzer nicht zum Verschieben des Bildschirminhalts gezwungen sind. In vielen Fällen können Sie mit einer TabControl-Komponente mit mehreren Seiten das Verschieben des Bildschirminhalts vermeiden.

Wenn Sie aber viele Elemente auf einem Formular platzieren müssen, können Sie mit einer TVertScrollBox-Komponente einen Verschiebe-Bereich wie folgt definieren:

  1. Wählen Sie im Designer für mobile FireMonkey-Formulare die Option Benutzerdefiniertes Gerät aus.
    SelectCustomDevice01.png

  2. Ändern Sie die Größe des benutzerdefinierten Geräts, indem Sie den Rand des Designers bis zur gewünschten Form und Größe aufziehen.
  3. Legen Sie eine TVertScrollBox-Komponente auf dem Formular ab, und setzen Sie deren Eigenschaft Align auf Client. Dies bewirkt, dass die TVertScrollBox den gesamten Client-Bereich ausfüllt.
  4. Legen Sie Komponenten auf der TVertScrollBox-Komponente ab:
    ChangeSizeOfCustomDevice.png

Der Inhalt dieses Formulars kann zur Laufzeit durch Streifen über die Benutzeroberfläche verschoben werden.

Siehe auch