Verwenden von Gitter- und Fluss-Layouts

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Tutorial: Verwenden von FireMonkey-Layouts


In diesem Tutorial wird gezeigt, wie mit FireMonkey-Layouts eine Benutzeroberfläche für einen einfachen Taschenrechner erstellt wird.

Allgemeines Formular für den Taschenrechner

  1. Wählen Sie Datei > Neu > Weitere > Delphi-Projekte > Geräteübergreifende Anwendung > Leere Anwendung:
    FireMonkey HD Application.png
     Erstellen einer Delphi-HD-Anwendung
  2. Ändern Sie die Größe des Formulars in 210x250 (oder in andere Maße, die der Taschenrechner haben soll), indem Sie im Objektinspektor bei ausgewähltem Formular die Eigenschaften Height und Width setzen.
  3. Fügen Sie dem Formular ein TFlowLayout hinzu.

Display des Taschenrechners

Fügen Sie dem PrincipalLayout ein TEdit-Steuerelement hinzu, das als Display des Taschenrechners dienen soll.

  • Wählen Sie das TEdit-Steuerelement aus, und führen Sie im Objektinspektor Folgendes aus:
    • Setzen Sie Name auf Display.
    • Setzen Sie Width auf 200 (oder auf einen anderen Wert, der zu den gewählten Abmessungen passt).

Display calculator.png

 Display des Taschenrechners

Schaltflächen des Taschenrechners

Ein Taschenrechner hat mehrere Arten von Schaltflächen:

  • Speicher-Schaltflächen: "Speicher abbrechen" (MC), "Speicher abrufen" (MR), "Zu Speicher addieren" (M+) und "Von Speicher subtrahieren" (M-)
  • Schaltflächen, die die Eingabedaten verwalten: Backspace (Rücktaste), "Leeren/Löschen" (C) und "Eingabe abbrechen" (CE).
  • Operationen: +, -, *, /, Vorzeichenänderung – +/-.
  • "Ist gleich"-Schaltfläche =
  • Ziffern-Schaltflächen (0 bis 9) und eine Punkt-Schaltfläche (.).

Da sind zusammen 25 Schaltflächen. Um die Bedienung zu vereinfachen, sind die wichtigsten Schaltflächen (die am häufigsten verwendet werden) doppelt so groß wie die übrigen Schaltflächen. Die wichtigsten Schaltflächen sind: Backspace, +, = und 0. Bei diesem Layout sind die normalen Schaltflächen 50 Pixel breit und 30 Pixel hoch.

Calculator memory buttons.png

Speicher-Schaltflächen

Fügen Sie dem PrincipalLayout ein TGridLayout für die Speicher-Schaltflächen hinzu.

  • Wählen Sie das TGridLayout aus, und führen Sie im Objektinspektor Folgendes aus:
    • Setzen Sie Name auf MemoryButtonsGrid.
    • Setzen Sie Width auf 200 (oder auf einen anderen Wert, der zu den gewählten Abmessungen passt).
    • Setzen Sie ItemWidth auf ein Viertel der Gesamtbreite (Width) des Layouts, in diesem Fall also auf 50.
    • Setzen Sie ItemHeight auf 30 (oder auf einen anderen Wert, abhängig von der gewünschten Form der Schaltflächen), damit die Schaltflächen als Rechteck dargestellt werden.
    • Setzen Sie Height auf 30 oder auf denselben Wert wie ItemHeight. Dadurch wird das Verhältnis im PrincipalLayout beibehalten.
  • Fügen Sie MemoryButtonsGrid 4 TButton-Steuerelemente hinzu, eins für jede der oben aufgeführten Speicheroperationen.

Das Ergebnis sollte wie die Abbildung rechts aussehen.


Calculator manage input buttons.png

Schaltflächen zum Verwalten der Eingabedaten

Die Schaltflächen zum Verwalten der Eingabedaten haben nicht dieselbe Breite, deshalb werden sie dem Formular über ein weiteres TFlowLayout hinzugefügt. Fügen Sie dem PrincipalLayout ein TFlowLayout hinzu.


  • Wählen Sie das hinzugefügte TFlowLayout aus, und führen Sie im Objektinspektor Folgendes aus:
    • Setzen Sie Name auf ManageInputDataButtons.
    • Setzen Sie JustifyLastLine auf Center.
    • Setzen Sie Width auf 200 (oder auf denselben Wert wie MemoryButtonsGrid).
    • Setzen Sie Height auf 30 (oder auf denselben Wert wie MemoryButtonsGrid).
  • Fügen Sie ManageInputDataButtons 3 TButton-Steuerelemente hinzu.
    • Führen Sie im Objektinspektor für jede Schaltfläche Folgendes aus:
      • Setzen Sie Text auf Backspace, C bzw. CE.
      • Setzen Sie Height auf 30 oder auf denselben Wert wie ManageInputDataButtons.
      • Setzen Sie für die Schaltflächen C und CE die Eigenschaft Width auf 50 oder auf denselben Wert, den Sie für die Breite der MemoryButtonsGrid-Schaltflächen verwendet haben.
      • Setzen Sie für die Backspace-Schaltfläche Width auf 100 oder auf das Zweifache der Breite einer normalen Schaltfläche.


Ziffern- und Operations-Schaltflächen

Calculator regular operations buttons.png

+ und = sind die häufigsten Operationen, daher werden die Schaltflächen dafür gesondert behandelt. Für die übrigen Operationen werden normale Schaltflächen verwendet.

  1. Fügen Sie für die normalen Operations-Schaltflächen PrincipalLayout ein TGridLayout hinzu.
    • Wählen Sie das TGridLayout aus, und führen Sie im Objektinspektor Folgendes aus:
      • Setzen Sie Name auf RegularOperationButtons.
      • Setzen Sie Width auf 200 (oder auf einen anderen Wert, der zu den gewählten Abmessungen passt).
      • Setzen Sie ItemWidth auf ein Viertel der Gesamtbreite (Width) des Layouts, in diesem Fall also auf 50.
      • Setzen Sie ItemHeight auf 30 (oder auf einen anderen Wert, abhängig von der gewünschten Form der Schaltflächen), damit die Schaltflächen als Rechteck dargestellt werden.
      • Setzen Sie Height auf 30 (oder auf denselben Wert wie ItemHeight).
    • Fügen Sie RegularOperationButtons 4 TButton-Steuerelemente hinzu, eines für jede der oben aufgeführten normalen Operationen.
      Das Ergebnis sollte wie die Abbildung rechts aussehen.
  2. 0 ist die am häufigsten verwendete Ziffer, und die 0-Schaltfläche ist größer als die Schaltflächen für die übrigen Ziffern. Die Ziffern werden in 2 Gruppen aufgeteilt:
    • Die Schaltflächen für 1 bis 9 haben dieselben Abmessungen und können mithilfe eines TGridLayout mit 3 Spalten und 3 Zeilen hinzugefügt werden.
    • Die Schaltflächen für 0 und . werden mithilfe eines TFlowLayout hinzugefügt, weil sie nicht dieselbe Größe wie die anderen Schaltflächen haben.
    Calculator regular digits buttons.png
    1. Fügen Sie dem PrincipalLayout ein TFlowLayout hinzu, um die Ziffern-Schaltflächen zu gruppieren.
      • Wählen Sie das TFlowLayout aus, und führen Sie im Objektinspektor Folgendes aus:
        • Setzen Sie Name auf DigitsButtons.
        • Setzen Sie Width auf 150 oder auf einen Wert, der dem Dreifachen der Breite einer normalen Schaltfläche entspricht.
        • Setzen Sie Height auf 120 oder auf einen Wert, der dem Vierfachen der Höhe einer normalen Schaltfläche entspricht.
        • Setzen Sie Justify auf Center.
        • Setzen Sie JustifyLastLine auf Center.
    2. Fügen Sie DigitsButtons ein TGridLayout für die normalen Ziffern-Schaltflächen hinzu.
      • Wählen Sie das TGridLayout aus, und führen Sie im Objektinspektor Folgendes aus:
        • Setzen Sie Name auf RegularDigitsButtons.
        • Setzen Sie Width auf 150.
        • Setzen Sie ItemWidth auf 50.
        • Setzen Sie ItemHeight auf 30.
        • Setzen Sie Height auf 90 oder auf einen Wert, der dem Dreifachen der Höhe einer normalen Schaltfläche entspricht.
      • Fügen Sie RegularDigitsButtons 9 TButton-Steuerelemente hinzu, eins für jede der oben genannten Ziffern.
      Calculator special digits buttons.png
    3. Fügen Sie DigitsButtons ein TFlowLayout-Objekt für die Schaltflächen 0 und . hinzu.
      • Wählen Sie das TFlowLayout aus, und führen Sie im Objektinspektor Folgendes aus:
        • Setzen Sie Name auf SpecialDigitsButtons.
        • Setzen Sie Width auf 150.
        • Setzen Sie Height auf 30 oder auf die Höhe einer normalen Schaltfläche.
        • Setzen Sie JustifyLastLine auf Center.
      • Fügen Sie SpecialDigitsButtons 2 TButton-Steuerelemente hinzu.
        • Führen Sie im Objektinspektor für jede Schaltfläche Folgendes aus:
          • Setzen Sie Text auf 0 bzw. ..
          • Setzen Sie Height auf 30 oder auf die Höhe einer normalen Schaltfläche.
          • Setzen Sie für die .-Schaltfläche Width auf 50 oder auf die Breite einer normalen Schaltfläche.
          • Setzen Sie für die 0-Schaltfläche Width auf 100 oder auf das Zweifache der Breite einer normalen Schaltfläche.
      Das Ergebnis sollte wie die Abbildung rechts aussehen.
  3. Fügen Sie dem PrincipalLayout ein TGridLayout für die restlichen Operations-Schaltflächen hinzu.
    • Wählen Sie das TGridLayout aus, und führen Sie im Objektinspektor Folgendes aus:
      • Setzen Sie Name auf SpecialOperationButtons.
      • Setzen Sie Width auf 50 oder auf den Wert für die Breite einer normalen Schaltfläche.
      • Setzen Sie ItemWidth auf 50.
      • Setzen Sie ItemHeight auf 60 oder auf einen Wert, der dem Zweifachen der Höhe einer normalen Schaltfläche entspricht.
      • Setzen Sie Height auf 120 oder auf das Zweifache von ItemHeight.
    • Fügen Sie SpecialOperationButtons 2 TButton-Steuerelemente hinzu.

Die Oberfläche sollte wie in der folgenden Abbildung dargestellt aussehen.

Calculator interface.png

Zurück

Siehe auch

Abgerufen von „http://docwiki.embarcadero.com/RADStudio/Sydney/d/index.php?title=Verwenden_von_Gitter-_und_Fluss-Layouts&oldid=216510“