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

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

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

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

AndroidScreen.png LBListView Android.png

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

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

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

フッターのプロパティ

  • FooterHeight。このプロパティでは、リスト フッターの高さをピクセル単位で指定します。デフォルト値は 24 です。
  • FooterAppearance。このプロパティでは、フッターのグラフィカルな外観を指定します。デフォルト値は ListHeader です。

ヘッダーのプロパティ

  • HeaderHeight。このプロパティでは、リスト ヘッダーの高さをピクセル単位で指定します。デフォルト値は 24 です。
  • HeaderAppearance。このプロパティでは、ヘッダーのグラフィカルな外観を指定します。デフォルト値は ListHeader です。

リスト項目のプロパティ

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

編集中のリスト項目のプロパティ

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

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

[構造]ビューと[オブジェクト インスペクタ]を使ってリスト ビュー コンポーネントを探します。

  • [構造]ビューで ListView コンポーネントを探し、その階層の中の ItemAppearance をクリックします。
  • [オブジェクト インスペクタ]で ItemAppearance プロパティを探し、必要な値をカスタマイズします。

ListViewProperties.png

Custom 値の使用

値に Custom を指定すると、ListView のすべてのオブジェクトが有効になり、リスト内の項目の表示方法を選択することができます。ListView 内の項目の FooterApearance、HeaderAppearance、ItemAppearance、ItemEditAppearance の各プロパティに Custom という値を指定できます。

これらのプロパティをカスタマイズし、それぞれに以下のグラフィカルな項目の表示方法を設定できます。

  • Accessory オブジェクト。リスト ビュー項目のアクセサリ オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
    • アクセサリの種類: チェック マーク、詳細、または追加情報のアクセサリ アイコン。
    • 位置とサイズ。
メモ: アクセサリの種類のオブジェクトは、編集モードでは表示されません。
  • Detail。リスト ビュー項目の詳細テキストのグラフィカルな外観を表します。以下が変更可能です。
    • フォントの種類、テキストの色、テキストの位置揃え。
  • GlyphButton。リスト ビュー項目のグリフ ボタン(グラフィック画像)のグラフィカルな外観を表します。以下が変更可能です。
    • ボタンの種類: 追加ボタン、チェック ボックス ボタン、削除ボタン。
    • 位置とサイズ。
    • グリフ ボタンの有効/無効。
メモ: GlyphButton は編集モードでのみ表示されます。
  • Image。リスト ビュー項目のアイコン オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
    • 位置とサイズ。
  • Text。リスト ビュー項目のテキスト オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
    • 位置とテキストのサイズ。
    • フォントの種類、テキストの位置揃え、ワードラップ。
  • TexButton。リスト ビュー項目のテキスト ボタン オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
    • ボタンの種類。
    • フォントの種類、テキストのサイズ、テキストの位置揃え、ワードラップ。
    • テキスト ボタンの有効/無効。

Custom 値の使用方法

リスト項目の Custom 値を使用するには:

  1. [オブジェクト インスペクタ]で ItemAppearance プロパティを探し、その値を Custom に設定します。
    CustomValueListView.png CustomValueStructure.png
  2. 必要なオブジェクトを表示するよう設定します。
    • [オブジェクト インスペクタ]で、必要な任意のオブジェクトの Visible プロパティを有効にし(値を True に設定)、望ましい内容にプロパティを変更します。
    • 任意のオブジェクトの Visible プロパティを、ソース コードで True に設定して有効にします。
Delphi の場合:
AItem.Objects.AccessoryObject.Visible := True;
C++ の場合:
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
	AObjects->GlyphButton->Visible = true;
}

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

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

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

  1. TListView の外観のパッケージを新しく実装します。
  2. カスタマイズ済みの外観パッケージを IDE にインストールします。
  3. インストールすると、新しい外観を[オブジェクト インスペクタ]で TListView コンポーネントに使用できるようになります。

CustomizedAppearancePackage.png

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

関連項目