モバイル チュートリアル:コンボ ボックス コンポーネントを使用してリストから項目を選択する(iOS および Android)
モバイル チュートリアル:モバイル アプリケーション開発(iOS および Android) への移動
目次
マルチデバイス アプリケーションでのピッカーの実装
モバイル プラットフォームの場合、FireMonkey はピッカー コンポーネントを TComboBox コンポーネントでラップしています。
iOS | Android |
---|---|
ピッカーとそのリスト項目を定義するには:
- 以下のいずれかを選択します。
- [ファイル|新規作成|マルチデバイス アプリケーション - Delphi|空のアプリケーション]
- [ファイル|新規作成|マルチデバイス アプリケーション - C++Builder|空のアプリケーション]
- [ツール パレット]で TComboBox コンポーネントを選択し、フォーム デザイナ上にドロップします。
TComboBox を探すには、[ツール パレット]の検索ボックスに最初の数文字("Com")を入力します。 - コンポーネントをドロップすると、フォーム デザイナに TComboBox コンポーネントが表示されます。
TComboBox コンポーネントを右クリックし、[項目エディタ...]を選択します。 - [項目の追加]を何度かクリックして、項目を定義します。
- [構造]ビューで、ListBoxItem1(リスト内の最初の項目)を選択します。
- [オブジェクト インスペクタ]で、ListBoxItem1 の Text プロパティを編集します。
この例(米国の 50 の州)では、リスト内の最初の項目として「Alabama」と入力します。 - 他の項目も同様に編集します(Alaska、Arizona、Arkansas、California、Colorado など)。
- [オブジェクト インスペクタ]で、TComboBox コンポーネントを選択し、TComboBox.Align プロパティを Top に設定します。
- 2 つ目の TComboBox(ComboBox2)をフォームに追加します。[ツール パレット]で TComboBox コンポーネントを選択し、フォーム デザイナ上に再度ドロップします。
- [オブジェクト インスペクタ]で ComboBox2 を選択し、TComboBox.Align プロパティを Bottom に設定します。
- 選択したモバイル ターゲット プラットフォーム(iOS シミュレータ(Delphi のみ)、iOS デバイス、または Android デバイス)でアプリケーションを実行します。
TComboBox をタップするとピッカー コントロールが現れ、項目を選択することができます。
コードを使用した項目のリストの構築
コードを使って項目のリストを構築するには、onFormCreate イベント ハンドラを次のように実装します。
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");
}
特定の項目の表示
現在選択されている項目は、ItemIndex プロパティで示されます。ItemIndex は整数値であり、ゼロから始まるインデックスを使って指定されます(つまり最初の項目がゼロ)。
5 番目の項目("California")を選択した状態でリストを表示するには、ComboBox1 の ItemIndex を次のように指定します。
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");
}
インデックスの値がわからない場合には、IndexOf メソッドを使用すると値を知ることができます。テキストが 'Penguin' である項目を選択した状態で ComboBox2 を表示するには、上記のコードに次の行を追加します。
Delphi の場合:
ComboBox2.ItemIndex := ComboBox2.Items.IndexOf('Penguin');
C++Builder の場合:
ComboBox2->ItemIndex = ComboBox2->Items->IndexOf("Penguin");
ユーザーによる選択のイベント ハンドラの実装
ユーザーが項目を選択すると、OnChange イベントが発生します。OnChange イベントのイベント ハンドラを実装して、ユーザーのアクションに応答することができます。
メモ: このシナリオで続行する前に、次のステップを実行してください。
- [ツール パレット]で TMemo コンポーネントを選択し、フォーム デザイナ上にドロップします。
- [オブジェクト インスペクタ]で、TMemo.Align プロパティを
Client
に設定します。
OnChange イベント ハンドラを実装するには:
- ComboBox1 コンポーネントを選択します。
- [オブジェクト インスペクタ]で[イベント]ページを開き、OnChange の隣の空の領域をダブルクリックします。
- コード エディタが開きます。次のようにコードを記述します。
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.");
}
このイベント ハンドラでは、選択された項目を示すメッセージ ダイアログを表示します。
Delphi コードでは、Format 関数は、書式文字列と引数の配列から書式設定された文字列を組み立てて返します。
Android(LG-E612) | iOS6(iPad) |
---|---|
関連項目
- モバイル チュートリアル:カレンダー コンポーネントを使用して日付を選択する(iOS および Android)
- モバイル チュートリアル:タブ コンポーネントを使用してページを表示する(iOS および Android)
- Metropolis UI コンボ ボックスの作成
- iOS モバイル アプリケーション開発
- OS X アプリケーション開発
サンプル
- FireMonkey カスタム ピッカーのサンプル