モバイル チュートリアル：LiveBinding を使用してリスト ビューの内容を設定する（iOS および Android）

提供: RAD Studio
移動先: 案内、 検索

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

データベースおよび LiveBinding のチュートリアル への移動


このチュートリアルでは、［LiveBinding デザイナ］を使用して、サンプル データが含まれる TPrototypeBindSource から FireMonkey リスト ビュー コンポーネントの値を設定する方法を説明します。このチュートリアルでは、サンプル データを追加する方法と、プロトタイプ用ソースとリスト ビュー コンポーネントの間のバインディングを作成してリストの内容を設定する方法を示します。

他の LiveBinding と同様に、このチュートリアルでもコードは必要ありません。ただし、有益なアプリケーションを作成するためには、イベント ハンドラとその他のコードの追加が必要です。

ステップ 1：プロジェクトを作成する

  1. 新しいプロジェクトを作成します。この例では、［マルチデバイス アプリケーション］を選択します。ウィザードで［空のアプリケーション］を選択します。

    MultiDeviceApplication.png

  2. ［ツール パレット］で TListView コンポーネントを見つけてフォームにドロップします。
  3. TPrototypeBindSource コンポーネントをフォームに追加します。
  4. フォーム上で ListView1 コンポーネントを選択し、オブジェクト インスペクタで Align プロパティを Client に、SearchVisible プロパティを True に設定します。
    フォーム デザイナでスタイルやビューを設定する前のフォームは次の図のようになります。

    LBListView.png

    メモ: スタイルやビューの選択についての詳細は、「スタイル セレクタ」および「FireMonkey ビューの使用」を参照してください。

ステップ 2：フィールドを追加する

  1. TPrototypeBindSource コンポーネントを右クリックし、［フィールドの追加...］を選択します。

    LBListViewII.png

  2. ［フィールドの追加］ダイアログ ボックスで、［ColorsNames］を選択して［OK］をクリックします。

    AddFieldListView2.png

ステップ 3：LiveBinding を作成する

  1. LiveBinding デザイナ（［表示｜ツール ウィンドウ｜LiveBinding デザイナ］を選択）を開き、TPrototypeBindSource の ColorsName1 プロパティを ListView の Item.Text プロパティにドラッグして、それらのプロパティをバインドします。
    リスト ビュー コンポーネントの項目に、プロトタイプ用データ コンポーネントの色名が自動的に設定されます。

    LBListView5.png

  2. 以下の手順で TListView.ItemAppearance を ImageListItemRightButton に設定します。
    ItemAppearance.png

  3. 必要に応じて、TListView のテキスト ボタンに色の濃淡を付けることができます。以下の手順で行います。

    LBListView0.png

メモ: 設計時にテキスト ボタンに適用した濃淡色が表示されないことがあります。変更を反映させるには、スタイル セレクタで［マスタ］ビューを選択し、フォーム デザイナの現在のスタイルを Android または iOS に変更します。詳細は、「フォーム デザイナ」を参照してください。

チュートリアルをここまで進めると、リスト ビュー コンポーネントは、項目テキストの左側に画像を、項目テキストの右側にボタンを表示するよう構成されています。
次のステップでは、画像とボタンにサンプル データを設定します。

ステップ 4：フィールドをさらに追加する（Bitmaps、Currency）

リスト ビュー コンポーネントの各リスト項目に関連する画像とボタン上のテキストを表示するには、フィールドをさらに 2 つ追加する必要があります。

  1. TPrototypeBindSource コンポーネントを右クリックし、［フィールドの追加...］を選択します。
  2. ［フィールドの追加］ダイアログ ボックスで、Ctrl を押しながらクリックして Bitmaps と Currency のフィールド データを選択します。それが終わったら、［OK］をクリックします。
  3. ［LiveBinding デザイナ］で以下の作業を行います。
    1. プロトタイプ用ソース データの Bitmap1 プロパティをリスト ビュー コンポーネントの Item.Bitmap プロパティに接続します。
      これで、Blue 19 のように各リスト ビュー項目の色と番号を表すボタンが追加されます。
    2. プロトタイプ用ソース データの CurrencyField1 プロパティをリスト ビュー コンポーネントの Item.ButtonText プロパティに接続します。
    これで、各リスト ビュー項目の右側のボタン上に通貨フィールド値が表示されます。

    LiveBindingsDesigner.png

これで、リスト ビューに各項目に関連づけられたカラー データが表示され、また、サンプルの為替データが下部に各リスト項目に関連づけられて表示されます。

ステップ 5：onButtonClick イベント ハンドラを追加する

アプリケーションを便利なものにするために、リスト ビュー項目をクリックしたときに発生する onButtonClick イベント ハンドラを追加することができます。

onButtonClick イベント ハンドラを追加するには：

  1. マルチデバイス アプリケーション フォームで ListView1 コンポーネントを選択します。
  2. ［オブジェクト インスペクタ］で［イベント］タブを開き、OnButtonClick をダブルクリックします。
  3. コード エディタで適切な OnButtonClick イベント ハンドラを実装します。

以下のサンプル コードでは、リスト ビュー項目をクリックしたときにメッセージ ボックスを表示するイベント ハンドラを追加しています。

Delphi の場合： 

procedure TForm2.OnButtonClick(const Sender: TObject; const AItem: TListItem; const AObject: TListItemSimpleControl);
begin
  const LItem = AItem as TListViewItem;
  ShowMessage(LItem.Text + ' ' + LItem.ButtonText + ' is clicked.');
end;

C++Builder： 

void __fastcall TForm2::OnButtonClick(TObject * const Sender,
	TListItem * const AItem, TListItemSimpleControl * const AObject)
{
	ShowMessage(dynamic_cast<TListViewItem*>(AItem)->Text +
		L" "+dynamic_cast<TListViewItem*>(AItem)->ButtonText + L" is clicked.");
}

結果

モバイル デバイス上で表示されるのと同じようにモバイル アプリケーションを表示させるには、適切なセットアップ チュートリアル（ここにあります）に沿ってシステムを構成し、フォーム デザイナで［ビュー］をターゲットのモバイル デバイス（［iPhone 4 インチ］など）に設定する必要があります。その後、アプリケーションをターゲット モバイル プラットフォームに配置するために必要なステップを実施します。

それが終わったら、F9 キーを押すか［実行｜実行］を選択して、アプリケーションをモバイル デバイス上で実行することができます。

iOS Android

LBinding IOS.png
iPad

LBListView Android.png
Galaxy S4



Blue の項目をクリックすると、以下のメッセージ ボックスがアプリケーションによって表示されます。

LBindingMessagebox Android.png

関連項目

「https://docwiki.embarcadero.com/RADStudio/Alexandria/j/index.php?title=モバイル_チュートリアル：LiveBinding_を使用してリスト_ビューの内容を設定する（iOS_および_Android）&oldid=250708」から取得