Mobile-Tutorial: Verwenden von Kombinationsfeld-Komponenten zur Auswahl von Einträgen (iOS und Android)
Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)
Inhaltsverzeichnis
Implementieren von Auswahlkomponenten in geräteübergreifenden Anwendungen
FireMonkey kapselt für mobile Plattformen die Auswahlkomponente als TComboBox-Komponente:
iOS | Android |
---|---|
So legen Sie eine Auswahlkomponente und die zugehörigen Listeneinträge fest:
- Wählen Sie einen der folgenden Befehle aus:
- Datei > Neu > Geräteübergreifende Anwendung - Delphi > Leere Anwendung
- Datei > Neu > Geräteübergreifende Anwendung - C++Builder > Leere Anwendung
- 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: - 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...: - Klicken Sie mehrmals auf Eintrag hinzufügen, um Einträge hinzuzufügen.
- Wählen Sie in der Strukturansicht den Eintrag ListBoxItem1 (den ersten Eintrag in der Liste) aus.
- 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: - Bearbeiten Sie auch die anderen Einträge, z. B. Alaska, Arizona, Arkansas, California, Colorado usw.
- Wählen Sie die TComboBox-Komponente aus, und setzen Sie im Objektinspektor die Eigenschaft TComboBox.Align auf Top.
- 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.
- Wählen Sie ComboBox2 aus, und setzen Sie im Objektinspektor die Eigenschaft TComboBox.Align auf Bottom.
- 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:
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;
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:
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;
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:
ComboBox2.ItemIndex := ComboBox2.Items.IndexOf('Penguin');
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:
- Wählen Sie in der Tool-Palette die Komponente TMemo aus, und ziehen Sie sie in den Formular-Designer.
- Setzen Sie im Objektinspektor die Eigenschaft TMemo.Align auf
Client
.
So implementieren Sie eine OnChange-Ereignisbehandlungsroutine:
- Wählen Sie die ComboBox1-Komponente aus.
- Öffnen Sie im Objektinspektor die Seite Ereignisse, und doppelklicken Sie auf den leeren Bereich neben OnChange.
- Der Quelltext-Editor wird angezeigt. Schreiben Sie folgenden Code:
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;
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) |
---|---|
Siehe auch
- Mobile-Tutorial: Verwenden von Kalender-Komponenten zur Datumsauswahl (iOS und Android)
- Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)
- Erstellen von Kombinationsfeldern für die Metropolis-UI
- Mobile iOS-Anwendungsentwicklung
- OS X-Anwendungsentwicklung
Beispiele
- FireMonkey Custom Picker (Beispiel)