Show: Object Pascal C++
Display Preferences

Mobile Tutorial: Using Combo Box Components to Pick Items from a List (iOS and Android)

From Appmethod Topics
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)


Implementing a Picker in Multi-Device Applications

For mobile platforms, FireMonkey wraps the Picker component with the TComboBox component:

iOS 7 (iPad2) Android (LG-E612)

TComboBox iOS7.png

Android ComboBox 1.png



To define a picker and the associated list items:

  1. Select either of the following:
  2. Select the TComboBox component in the Tool Palette, and drop it on the Form Designer.
    To find TComboBox, enter the first few characters ("Com") in the Search box of the Tool Palette:
    SelectComboBox.png

  3. After you drop the component, you can see the TComboBox component on the Form Designer.
    Right-click the TComboBox component and select Items Editor...:
    SelectItemsEditorForComboBox.png

  4. To define items, click Add Item several times.
    AddComboBoxItems.png

  5. In the Structure View, select ListBoxItem1 (the first item in the list).
  6. In the Object Inspector, edit the Text property for ListBoxItem1.
    In this example (the fifty states in the USA), enter "Alabama" as the first item in the list:
    EditComboBoxItems.png

  7. Edit other items as well, such as Alaska, Arizona, Arkansas, California, Colorado, and so forth.
  8. Run the application on your chosen mobile target platform (iOS Simulator (for Object Pascal only), iOS Device, Android Emulator, or Android Device).
    After you tap TComboBox, the Picker control appears, and you can select an item.

Building a List of Items Using Code

To build a list of items using code, you should implement the onFormCreate event handler in the following way:

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');
  // Other states can be listed here
  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");
  // Other states can be listed here
  ComboBox1->Items->Add("Virginia");
  ComboBox1->Items->Add("Washington");
  ComboBox1->Items->Add("West Virginia");
  ComboBox1->Items->Add("Wisconsin");
  ComboBox1->Items->Add("Wyoming");
}

Displaying a Specific Item

The currently selected item is specified by the ItemIndex property. ItemIndex is an integer value that is specified using a zero-based index (that is, the first item is zero).

To display the list with the fifth item selected ("California" in the following sample code), specify ItemIndex as follows:

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');
  // Other states can be listed here

  // Index of 5th item is "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");
  // Other states can be listed here

  // Index of 5th item is "4"
  ComboBox1->ItemIndex = 4;
}

If you do not know the index value, you can find the value by using the IndexOf method as follows:

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');
  // Other states can be listed here

  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");
  // Other states can be listed here
  
  ComboBox1->ItemIndex = ComboBox1->Items->IndexOf("California");
}

Implementing an Event Handler for the User's Selection

After the user selects an item, the OnChange event is fired. To respond to the user's action, you can implement an event handler for the OnChange event.

Note: Before proceeding with this scenario, perform the following steps:
  1. Select the TMemo component in the Tool Palette, and drop it on the Form Designer.
  2. In the Object Inspector, set the TMemo.Align property to Fit.

To implement an OnChange event handler:

  1. Select the TComboBox component.
  2. In the Object Inspector, open the Events page, and double-click the empty space next to OnChange.
  3. The Code Editor opens. Write code as follows:

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.");
}

This event handler displays a message dialog that indicates the item that was selected.

In the Object Pascal code, the Format function returns a formatted string assembled from a format string and an array of arguments:


Android (LG - E612) iOS6 (iPad)

TComboBox Android.png

TComboBox IOS6.png


See Also

Personal tools
In other languages