Mobile-Tutorial: Verwenden von Kombinationsfeld-Komponenten zur Auswahl von Einträgen (iOS und Android)

Aus RAD Studio
Wechseln zu: Navigation, Suche

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


Implementieren von Auswahlkomponenten in geräteübergreifenden Anwendungen

FireMonkey kapselt für mobile Plattformen die Auswahlkomponente als TComboBox-Komponente:

iOS Android

TComboBox iOS7.png

Android ComboBox 1.png


So legen Sie eine Auswahlkomponente und die zugehörigen Listeneinträge fest:

  1. Wählen Sie einen der folgenden Befehle aus:
  2. Wählen Sie in der Tool-Palette die Komponente TComboBox aus, und ziehen Sie sie in den Formular-Designer.
    Geben Sie in das Suchfeld der Tool-Palette die ersten Zeichen ("Com") ein, um TComboBox schnell zu finden:
    SelectComboBox.png

  3. Nach dem Ablegen der TComboBox-Komponente wird sie im Formular-Designer angezeigt.
    Klicken Sie mit der rechten Maustaste auf die TComboBox-Komponente, und wählen Sie Eintrags-Editor...:
    SelectItemsEditorForComboBox.png

  4. Klicken Sie mehrmals auf Eintrag hinzufügen, um Einträge hinzuzufügen.
    AddComboBoxItems.png

  5. Wählen Sie in der Strukturansicht den Eintrag ListBoxItem1 (den ersten Eintrag in der Liste) aus.
  6. Bearbeiten Sie im Objektinspektor die Eigenschaft Text für ListBoxItem1.
    Geben Sie für dieses Beispiel (die 50 Staaten der USA) als ersten Eintrag in der Liste "Alabama" ein:
    EditComboBoxItems.png

  7. Bearbeiten Sie auch die anderen Einträge, z. B. Alaska, Arizona, Arkansas, California, Colorado usw.
  8. Wählen Sie die TComboBox-Komponente aus, und setzen Sie im Objektinspektor die Eigenschaft TComboBox.Align auf Top.
  9. Fügen Sie eine weitere TComboBox (ComboBox2) in das Formular ein. Wählen Sie in der Tool-Palette die Komponente TComboBox aus, und ziehen Sie sie in den Formular-Designer.
  10. Wählen Sie ComboBox2 aus, und setzen Sie im Objektinspektor die Eigenschaft TComboBox.Align auf Bottom.
  11. Führen Sie die Anwendung auf der ausgewählten mobilen Zielplattform (iOS-Simulator (nur für Delphi), iOS-Gerät oder Android-Gerät) aus.
    Wenn Sie auf eine TComboBox tippen, wird die Auswahlkomponente angezeigt, und Sie können einen Eintrag auswählen.

Erstellen einer Eintragsliste im Code

Implementieren Sie zum Erstellen einer Eintragsliste im Code die Ereignisbehandlungsroutine onFormCreate wie folgt:

Delphi:
procedure TForm1.FormCreate(Sender: TObject);
begin
  ComboBox2.Items.Add('Tiger');
  ComboBox2.Items.Add('Cat');
  ComboBox2.Items.Add('Penguin');
  ComboBox2.Items.Add('Bee');
  // Other animals can be listed here
  ComboBox2.Items.Add('Elephant');
  ComboBox2.Items.Add('Lion');
end;
C++Builder:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
  ComboBox2->Items->Add("Tiger");
  ComboBox2->Items->Add("Cat");
  ComboBox2->Items->Add("Penguin");
  ComboBox2->Items->Add("Bee");
  // Other animals can be listed here
  ComboBox2->Items->Add("Elephant");
  ComboBox2->Items->Add("Lion");
}

Anzeigen eines bestimmten Eintrags

Der aktuell ausgewählte Eintrag wird von der Eigenschaft ItemIndex festgelegt. ItemIndex ist ein Integerwert, der einen nullbasierten Index (d. h., das erste Element hat den Index 0) angibt.

Um die Liste mit dem ausgewählten fünften Eintrag ("California") anzuzeigen, legen Sie ItemIndex für die ComboBox1 wie folgt fest:

Delphi:
procedure TForm1.FormCreate(Sender: TObject);
begin
  // Index of 5th item is "4"
  ComboBox1.ItemIndex := 4;

  ComboBox2.Items.Add("Tiger");
  ComboBox2.Items.Add("Cat");
  ComboBox2.Items.Add("Penguin");
  ComboBox2.Items.Add("Bee");
  // Other animals can be listed here
  ComboBox2.Items.Add("Elephant");
  ComboBox2.Items.Add("Lion");
end;
C++Builder:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
  // Index of 5th item is "4"
  ComboBox1->ItemIndex = 4;

  ComboBox2->Items->Add("Tiger");
  ComboBox2->Items->Add("Cat");
  ComboBox2->Items->Add("Penguin");
  ComboBox2->Items->Add("Bee");
  // Other animals can be listed here
  ComboBox2->Items->Add("Elephant");
  ComboBox2->Items->Add("Lion");
}

Wenn Sie den Indexwert nicht kennen, können Sie den Wert mit der Methode IndexOf ermitteln. Um die ComboBox2 mit dem Eintrag, dessen Text "Penguin" ausgewählt ist, anzuzeigen, fügen Sie dem vorausgehenden Code die folgende Zeile hinzu:

Delphi:
ComboBox2.ItemIndex := ComboBox2.Items.IndexOf('Penguin');
C++Builder:
ComboBox2->ItemIndex = ComboBox2->Items->IndexOf("Penguin");

Implementieren einer Ereignisbehandlungsroutine für die Auswahl des Benutzers

Wenn der Benutzer einen Eintrag ausgewählt hat, wird das Ereignis OnChange ausgelöst. Um auf die Benutzeraktion zu reagieren, können Sie eine Ereignisbehandlungsroutine für das Ereignis OnChange implementieren.

Hinweis:

Führen Sie die folgenden Schritte aus, bevor Sie fortfahren:

  1. Wählen Sie in der Tool-Palette die Komponente TMemo aus, und ziehen Sie sie in den Formular-Designer.
  2. Setzen Sie im Objektinspektor die Eigenschaft TMemo.Align auf Client.

So implementieren Sie eine OnChange-Ereignisbehandlungsroutine:

  1. Wählen Sie die ComboBox1-Komponente aus.
  2. Öffnen Sie im Objektinspektor die Seite Ereignisse, und doppelklicken Sie auf den leeren Bereich neben OnChange.
  3. Der Quelltext-Editor wird angezeigt. Schreiben Sie folgenden Code:
Delphi:
procedure TForm1.ComboBox1Change(Sender: TObject);
begin
Memo1.Lines.Insert(0, (Format('%s: Item %s at Index %d was selected. ', [ComboBox1.Name,ComboBox1.Selected.Text, ComboBox1.ItemIndex])));
end;
C++Builder:
void __fastcall TForm1::ComboBox1Change(TObject *Sender)
{
  Memo1->Lines->Insert(0, ComboBox1->Name + ": Item " + ComboBox1->Selected->Text + " at Index " + IntToStr(ComboBox1->ItemIndex) + " was selected.");
}

Diese Ereignisbehandlungsroutine zeigt ein Meldungsdialogfeld an, in dem der ausgewählte Eintrag angegeben ist.

In Delphi gibt die Funktion Format einen formatierten String zurück, der sich aus einem Format-String und einem Array mit Argumenten zusammensetzt:

Android (LG-E612) iOS6 (iPad)

TComboBox Android.png

TComboBox IOS6.png

Siehe auch

Beispiele