FireMonkey リスト ビューの外観のカスタマイズ

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

FireMonkey アプリケーションの設計 への移動

FireMonkey のリスト ビューの外観は、リスト項目のレイアウト（キャプション、関連画像、テキスト詳細、アクセサリ アイコンなど）を変更してカスタマイズすることができます。

AndroidScreen.png LBListView Android.png

リスト ビューの外観に関するプロパティのカスタマイズ

設計時に、ItemAppearance プロパティに含まれるプロパティの値を変更することで、フッターやヘッダー、リスト項目の外観（編集モードの場合も含む）を変更することができます。 ItemAppearance プロパティによって、フッターやヘッダー、項目の外観のサイズ（通常時と編集モード時）を制御します。

以下に示す ListView の外観に関するプロパティは、オブジェクト インスペクタや構造ビューでグループにまとめて表示され、その値を変更することでリスト ビューの外観をカスタマイズできます。

フッターのプロパティ

  • FooterHeight。 このプロパティでは、リスト フッターの高さをピクセル単位で指定します。 デフォルト値： 24
  • FooterAppearance。 このプロパティでは、フッターのグラフィカルな外観を指定します。 取り得る値は以下のとおりです。 Custom および ListHeader。デフォルト値： ListHeader。

ヘッダーのプロパティ

  • HeaderHeight。 このプロパティでは、リスト ヘッダーの高さをピクセル単位で指定します。 デフォルト値： 24
  • HeaderAppearance。 このプロパティでは、ヘッダーのグラフィカルな外観を指定します。 取り得る値は以下のとおりです。 Custom および ListHeader。デフォルト値： ListHeader。

リスト項目のプロパティ

  • ItemHeight。 このプロパティでは、項目の高さをピクセル単位で指定します。 デフォルト値： 44
  • ItemAppearance。 このプロパティでは、項目のグラフィカルな外観（画像、キャプション、アクセサリ ボタンなど）を指定します。 デフォルト値： ListItem。
以下の値から選択します。
プロパティ 表示されるオブジェクト
Custom 「カスタム値の利用」を参照
DynamicAppearance 「DynamicAppearance 値の利用」を参照
ImageListItem 画像、キャプション、グラフィカルなアクセサリ ボタン
ImageListItemBottomDetail 画像、キャプション、詳細テキスト、グラフィカルなアクセサリ ボタン
ImageListItemBottomDetailRightButton 画像、キャプション、詳細テキスト、テキストのアクセサリ ボタン
ImageListItemRightButton 画像、キャプション、テキストのアクセサリ ボタン
ListItem キャプション、グラフィカルなアクセサリ ボタン
ListItemRightDetail キャプション、詳細テキスト、グラフィカルなアクセサリ ボタン

[編集モードの切り替え] コンテキスト メニュー コマンドを使用すると、フォーム デザイナ の ListView オブジェクト内の項目の設計時ビューを、編集モード ビューに変更することができます。編集モード を切り替えるには、TListView オブジェクトを構造ビューまたはフォーム デザイナで右クリックし、[編集モードの切り替え]を選択します。

FMX.ListViewCustomBottomDetail サンプルやその他のサンプルを参照してください。

編集モードのリスト項目のプロパティ

  • ItemEditHeight。 このプロパティでは、編集モードにおける項目の高さをピクセル単位で指定します。 デフォルト値： 44
  • ItemEditAppearance。 このプロパティでは、編集モードにおける項目のグラフィカルな外観を指定します。 デフォルト値： ListItemShowCheck。
以下の値から選択します。
プロパティ 表示されるオブジェクト
Custom 「カスタム値の利用」を参照
DynamicAppearance 「DynamicAppearance 値の利用」を参照
ImageListItemBottomDetailRightButtonShowCheck 画像、キャプション、詳細テキスト、チェック ボックスのグリフ ボタン、テキスト ボタン
ImageListItemBottomDetailShowCheck 画像、キャプション、詳細テキスト、チェック ボックスのグリフ ボタン、グラフィカルなアクセサリ ボタン
ImageListItemDelete 画像、キャプション、削除のグリフ ボタン、グラフィカルなアクセサリ ボタン
ImageListItemRightButtonDelete 画像、キャプション、削除のグリフ ボタン、テキスト ボタン
ImageListItemRightButtonShowCheck 画像、キャプション、チェック ボックスのグリフ ボタン、テキスト ボタン
ImageListItemShowCheck 画像、キャプション、チェック ボックスのグリフ ボタン、グラフィカルなアクセサリ ボタン
ListItemDelete キャプション、削除のグリフ ボタン、グラフィカルなアクセサリ ボタン
ListItemRightDetailDelete キャプション、詳細テキスト、削除のグリフ ボタン、グラフィカルなアクセサリ ボタン
ListItemRightDetailShowCheck キャプション、詳細テキスト、チェック ボックスのグリフ ボタン、グラフィカルなアクセサリ ボタン
ListItemShowCheck キャプション、チェック ボックスのグリフ ボタン、グラフィカルなアクセサリ ボタン


FMX.ListViewCustomBottomDetail サンプルやその他のサンプルを参照してください。

リスト ビューの外観に関するプロパティの変更方法

構造ビューおよびオブジェクト インスペクタを使用して、List View コンポーネントを見つけます。

ItemAppearenceValueListView.png

カスタマイズ可能な項目の概観

DynamicAppearance や Custom の値により、ListView にある項目の概観をカスタマイズすることができます。 Custom 値は、ListView の項目のプロパティ、FooterAppearance、HeaderAppearance、ItemAppearance、ItemEditAppearance、に使用することができ、DynamicAppearance は、ListView の項目のプロパティ ItemAppearance と ItemEditAppearance に使用することができます。

DynamicAppearance 値の利用

DynamicAppearance により、ListView の項目の概観を、設計時に動的にカスタマイズすることができます。プロパティ DynamicAppearance と他の項目の概観のプロパティとの間の違いは、DynamicAppearance により、項目の概観に好きなだけオブジェクトを追加できる点です。

デフォルトでは、DynamicAppearence は、text オブジェクト 1 つを保有しています。さらにオブジェクトを追加するにあｈ、項目を 構造ビューの IteamAppearance から選択してください。その後、オブジェクト インスペクタで、+ プロパティをクリックして、利用可能なオブジェクトのいずれかを選択します。利用可能なオブジェクトは：

  • TTextObjectAppearance。 リスト ビュー項目のテキスト オブジェクトのグラフィカルな外観を表します。
  • TImageObjectAppearance。 リスト ビュー項目のアイコン オブジェクトのグラフィカルな外観を表します。
  • TAccessoryObjectAppearance。 リスト ビュー項目のアクセサリ オブジェクトのグラフィカルな外観を表します。
  • TTextButtonObjectAppearance。 リスト ビュー項目のテキスト ボタン オブジェクトのグラフィカルな外観を表します。
  • TGlyphButtonObjectAppearance。 リスト ビュー項目のグリフ ボタン（グラフィック画像）のグラフィカルな外観を表します。
DynamicAppearence.png

項目のオブジェクトの概観は、構造ビューでオブジェクトを選択し、オブジェクト インスペクタでそのプロパティを変更することで、設計時にカスタマイズすることができます。カスタマイズできるもののなｋで、いくつか例を挙げます： テキスト オブジェクトのフォント タイプ、テキスト サイズ、テキストの揃えや、ボタン オブジェクトのボタン タイプなど。 さらに、[設計モードの切り替え]を有効にすることで、項目のオブジェクトの概観を、ビジュアルにカスタマイズすることができます。

ヒント： 好きなだけオブジェクトを追加することができるので、DynamicAppearance は [設計モードの切り替え]を有効にして使用することを特に推奨します。

Custom 値の利用

Custom 概観値を選択すると、次のオブジェクトが項目の概観として有効になります：

CustomValueStructure.png

希望するオブジェクトの可視性を設定するには：

  • 希望するオブジェクトに対して、その Visible プロパティを（True に値を設定して）オブジェクト インスペクタで有効にし、必要に応じてプロパティ群を編集する。
  • ソース コードでオブジェクトの Visible プロパティを True に設定して有効にする。
Delphi の場合： 
AItem.Objects.AccessoryObject.Visible := True;
C++ の場合： 
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
	AObjects->GlyphButton->Visible = true;
}

編集モード

設計モードにより、ListView の項目の概観を、設計時にビジュアルにカスタマイズすることができます。このモードを ItemAppearance プロパティに対して選択することができます（Custom、DynamicAppearance、ListItem、ImageListItem など）。

ヒント： 設計モードは、DynamicAppearance を選択する際には特に推奨されます。DynamicAppearance により、ItemAppearance を自由にカスタマイズできるためです。

設計モードをアクティブにするには、TListView オブジェクトを構造ビューまたはフォーム デザイナで右クリックし、[設計モードの切り替え]コマンドを選択します。[設計モードの切り替え]コマンドでは、ListView オブジェクトの設計時ビューを、空のボックスから ListView 項目のデザイン プレビューに変更します。その後、次のことが可能です：

  • フォームにおける項目概観のビジュアルなカスタマイズ。
  • オブジェクト インスペクタを使用して行った項目概観プロパティへの変更の可視化。.
ToggleDesignMode.png

カスタマイズした外観クラスの作成

カスタマイズした外観クラスを新規作成してインストールし、設計で使用することができます。それには新しいパッケージをインストールします。このパッケージは、リスト ビュー項目のカスタム外観を実装したクラスを定義したものです。必要に応じてフィールドをカスタマイズすることで、たとえば評価を示す画像（数値に応じて異なる画像を表示するコントロール）を実装することができます。

カスタマイズした外観クラスの使用方法

  1. 新たな TListView 概観パッケージ次のサンプルには、表示するリストビューの概観をカスタマイズするための多様な例が含まれています。
  2. カスタマイズ済みの外観パッケージを IDE にインストールします。
  3. インストールすると、新しい外観を［オブジェクト インスペクタ］で TListView コンポーネントに使用できるようになります。

CustomizedAppearancePackage.png

メモ： MultiDetailItem という値は、あらかじめ IDE にインストールされたカスタマイズ済み外観パッケージです。

関連項目

サンプル

「http://docwiki.embarcadero.com/RADStudio/Tokyo/j/index.php?title=FireMonkey_リスト_ビューの外観のカスタマイズ&oldid=235035」から取得