モバイル チュートリアル：コンボ ボックス コンポーネントを使用してリストから項目を選択する（iOS および Android）

提供: Appmethod Topics
移動先: 案内、 検索

モバイル チュートリアル：モバイル アプリケーション開発（iOS および Android） への移動


マルチデバイス アプリケーションでピッカーを実装する

モバイル プラットフォームの場合、FireMonkey はピッカー コンポーネントを TComboBox コンポーネントでラップしています。

iOS 7（iPad2） Android（LG-E612）

TComboBox iOS7.png

Android ComboBox 1.png


ピッカーとそのリスト項目を定義するには：

  1. 以下のいずれかを選択します。
  2. ［ツール パレット］で TComboBox コンポーネントを選択し、フォーム デザイナ上にドロップします。
    TComboBox を探すには、［ツール パレット］の検索ボックスに最初の数文字（"Com"）を入力します。
    SelectComboBox.png

  3. コンポーネントをドロップすると、フォーム デザイナに TComboBox コンポーネントが表示されます。
    TComboBox コンポーネントを右クリックし、［項目エディタ...］を選択します。
    SelectItemsEditorForComboBox.png

  4. ［項目の追加］を何度かクリックして、項目を定義します。
    AddComboBoxItems.png

  5. ［構造］ビューで、ListBoxItem1（リスト内の最初の項目）を選択します。
  6. ［オブジェクト インスペクタ］で、ListBoxItem1 の Text プロパティを編集します。
    この例（米国の 50 の州）では、リスト内の最初の項目として「Alabama」と入力します。
    EditComboBoxItems.png

  7. 他の項目も同様に編集します（Alaska、Arizona、Arkansas、California、Colorado など）。
  8. 選択したモバイル ターゲット プラットフォーム（iOS シミュレータ（Object Pascal のみ）、iOS デバイス、または Android デバイス）でアプリケーションを実行します。
    TComboBox をタップするとピッカー コントロールが現れ、項目を選択することができます。

コードを使って項目のリストを構築する

コードを使って項目のリストを構築するには、onFormCreate イベント ハンドラを次のように実装します。

Object Pascal の場合：
 

procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // その他の州はここに列挙する
  ComboBox1.Items.Add('Virginia');
  ComboBox1.Items.Add('Washington');
  ComboBox1.Items.Add('West Virginia');
  ComboBox1.Items.Add('Wisconsin');
  ComboBox1.Items.Add('Wyoming');
end;

C++ の場合：

void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // その他の州はここに列挙する
  ComboBox1->Items->Add("Virginia");
  ComboBox1->Items->Add("Washington");
  ComboBox1->Items->Add("West Virginia");
  ComboBox1->Items->Add("Wisconsin");
  ComboBox1->Items->Add("Wyoming");
}

特定の項目を表示する

現在選択されている項目は、ItemIndex プロパティで示されます。ItemIndex は整数値であり、ゼロから始まるインデックスを使って指定されます（つまり最初の項目がゼロ）。

5 番目の項目（以下のサンプル コードでは "California"）を選択した状態でリストを表示するには、ItemIndex を次のように指定します。

Object Pascal の場合： 

procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // その他の州はここに列挙する

  // 5 番目の項目のインデックスは "4"
  ComboBox1.ItemIndex := 4;
end;

C++ の場合： 

void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // その他の州はここに列挙する

  // 5 番目の項目のインデックスは "4"
  ComboBox1->ItemIndex = 4;
}

インデックスの値がわからない場合には、次のように IndexOf メソッドを使用すると値を知ることができます。

Object Pascal の場合： 

procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // その他の州はここに列挙する

  ComboBox1.ItemIndex := ComboBox1.Items.IndexOf('California');
end;

C++ の場合： 

void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // その他の州はここに列挙する
  
  ComboBox1->ItemIndex = ComboBox1->Items->IndexOf("California");
}

ユーザーによる選択のイベント ハンドラを実装する

ユーザーが項目を選択すると、OnChange イベントが発生します。OnChange イベントのイベント ハンドラを実装して、ユーザーのアクションに応答することができます。

メモ： このシナリオで続行する前に、次のステップを実行してください。

  1. ［ツール パレット］で TMemo コンポーネントを選択し、フォーム デザイナ上にドロップします。
  2. ［オブジェクト インスペクタ］で TMemo.Align プロパティを Fit に設定します。

OnChange イベント ハンドラを実装するには：

  1. TComboBox コンポーネントを選択します。
  2. ［オブジェクト インスペクタ］で［イベント］ページを開き、OnChange の隣の空の領域をダブルクリックします。
  3. コード エディタが開きます。次のようにコードを記述します。

Object Pascal の場合： 

procedure TForm27.ComboBox1Change(Sender: TObject);
begin
  Memo1.Lines.Insert(0, (Format('Item %s at Index %d was selected. ', [ComboBox1.Selected.Text,  
    ComboBox1.ItemIndex])));
end;

C++ の場合： 

void __fastcall TForm27::ComboBox1Change(TObject *Sender)
{
  Memo1->Lines->Insert(0, "Item " + ComboBox1->Selected->Text + " at Index " + IntToStr(ComboBox1->ItemIndex) + " was selected.");
}

このイベント ハンドラでは、選択された項目を示すメッセージ ダイアログを表示します。

Object Pascal コードでは、Format 関数は、書式文字列と引数の配列から書式設定された文字列を組み立てて返します。


Android（LG-E612） iOS6（iPad）

TComboBox Android.png

TComboBox IOS6.png

関連項目

「http://docwiki.appmethod.com/appmethod/1.17/topics/j/index.php?title=モバイル_チュートリアル：コンボ_ボックス_コンポーネントを使用してリストから項目を選択する（iOS_および_Android）&oldid=40083」から取得