FireMonkey リスト ビューの外観のカスタマイズ
目次
FireMonkey のリスト ビューの外観は、リスト項目のレイアウト(キャプション、関連画像、テキスト詳細、アクセサリ アイコンなど)を変更してカスタマイズすることができます。
リスト ビューの外観に関するプロパティのカスタマイズ
設計時に、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 コンポーネントを見つけます。
- 構造ビューで、ListView コンポーネントを検索し、その階層で
ItemAppearance
をクリックします。 - オブジェクト インスペクタで、各プロパティ(FooterAppearance、HeaderAppearance、ItemAppearance、ItemEditAppearance)を希望する値に変更します。
カスタマイズ可能な項目の概観
DynamicAppearance や Custom の値により、ListView にある項目の概観をカスタマイズすることができます。 Custom 値は、ListView の項目のプロパティ、FooterAppearance、HeaderAppearance、ItemAppearance、ItemEditAppearance、に使用することができ、DynamicAppearance は、ListView の項目のプロパティ ItemAppearance と ItemEditAppearance に使用することができます。
DynamicAppearance 値の利用
DynamicAppearance により、ListView の項目の概観を、設計時に動的にカスタマイズすることができます。プロパティ DynamicAppearance と他の項目の概観のプロパティとの間の違いは、DynamicAppearance により、項目の概観に好きなだけオブジェクトを追加できる点です。
デフォルトでは、DynamicAppearence は、text オブジェクト 1 つを保有しています。さらにオブジェクトを追加するにあh、項目
を 構造ビューの IteamAppearance
から選択してください。その後、オブジェクト インスペクタで、+
プロパティをクリックして、利用可能なオブジェクトのいずれかを選択します。利用可能なオブジェクトは:
- TTextObjectAppearance。 リスト ビュー項目のテキスト オブジェクトのグラフィカルな外観を表します。
- TImageObjectAppearance。 リスト ビュー項目のアイコン オブジェクトのグラフィカルな外観を表します。
- TAccessoryObjectAppearance。 リスト ビュー項目のアクセサリ オブジェクトのグラフィカルな外観を表します。
- TTextButtonObjectAppearance。 リスト ビュー項目のテキスト ボタン オブジェクトのグラフィカルな外観を表します。
- TGlyphButtonObjectAppearance。 リスト ビュー項目のグリフ ボタン(グラフィック画像)のグラフィカルな外観を表します。
項目のオブジェクトの概観は、構造ビューでオブジェクトを選択し、オブジェクト インスペクタでそのプロパティを変更することで、設計時にカスタマイズすることができます。カスタマイズできるもののなkで、いくつか例を挙げます: テキスト オブジェクトのフォント タイプ、テキスト サイズ、テキストの揃えや、ボタン オブジェクトのボタン タイプなど。 さらに、[設計モードの切り替え]を有効にすることで、項目のオブジェクトの概観を、ビジュアルにカスタマイズすることができます。
- ヒント: 好きなだけオブジェクトを追加することができるので、DynamicAppearance は [設計モードの切り替え]を有効にして使用することを特に推奨します。
Custom 値の利用
Custom 概観値を選択すると、次のオブジェクトが項目の概観として有効になります:
- Accessory。TAccessoryObjectAppearance のインスタンス。デフォルトでは、非表示。
- Detail。TTextObjectAppearance のインスタンス。 デフォルトでは、非表示。
- GlyphButton。TGlyphButtonObjectAppearance のインスタンス。 デフォルトでは、非表示。
- Image。TImageObjectAppearance のインスタンス。 デフォルトでは、非表示。
- Text。TTextObjectAppearance のインスタンス。 デフォルトでは、非表示。
- TextButton。TTextButtonObjectAppearance のインスタンス。 デフォルトでは、非表示。
- メモ: 項目のオブジェクトの概観は、オブジェクト インスペクタや[設計モードの切り替え]を使用して、それらのプロパティを変更することで、設計時にカスタマイズすることができます。
希望するオブジェクトの可視性を設定するには:
- 希望するオブジェクトに対して、その Visible プロパティを(
True
に値を設定して)オブジェクト インスペクタで有効にし、必要に応じてプロパティ群を編集する。 - ソース コードでオブジェクトの Visible プロパティを
True
に設定して有効にする。
AItem.Objects.AccessoryObject.Visible := True;
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
AObjects->GlyphButton->Visible = true;
}
編集モード
設計モードにより、ListView の項目の概観を、設計時にビジュアルにカスタマイズすることができます。このモードを ItemAppearance プロパティに対して選択することができます(Custom
、DynamicAppearance
、ListItem
、ImageListItem
など)。
- ヒント: 設計モードは、DynamicAppearance を選択する際には特に推奨されます。DynamicAppearance により、ItemAppearance を自由にカスタマイズできるためです。
設計モードをアクティブにするには、TListView オブジェクトを構造ビューまたはフォーム デザイナで右クリックし、[設計モードの切り替え]コマンドを選択します。[設計モードの切り替え]コマンドでは、ListView オブジェクトの設計時ビューを、空のボックスから ListView 項目のデザイン プレビューに変更します。その後、次のことが可能です:
- フォームにおける項目概観のビジュアルなカスタマイズ。
- オブジェクト インスペクタを使用して行った項目概観プロパティへの変更の可視化。.
カスタマイズした外観クラスの作成
カスタマイズした外観クラスを新規作成してインストールし、設計で使用することができます。それには新しいパッケージをインストールします。このパッケージは、リスト ビュー項目のカスタム外観を実装したクラスを定義したものです。必要に応じてフィールドをカスタマイズすることで、たとえば評価を示す画像(数値に応じて異なる画像を表示するコントロール)を実装することができます。
カスタマイズした外観クラスの使用方法
- 新たな TListView 概観パッケージ次のサンプルには、表示するリストビューの概観をカスタマイズするための多様な例が含まれています。
- カスタマイズ済みの外観パッケージを IDE にインストールします。
- インストールすると、新しい外観を[オブジェクト インスペクタ]で TListView コンポーネントに使用できるようになります。
- メモ: MultiDetailItem という値は、あらかじめ IDE にインストールされたカスタマイズ済み外観パッケージです。
関連項目
- モバイル チュートリアル:LiveBinding を使用してリスト ビューの内容を設定する(iOS および Android)
- FireMonkey ネイティブ iOS コントロール
- FMX.ListView.TAppearanceListView.ItemAppearance
- FMX.ListView.Appearances.TPublishedAppearance.FooterHeight
- FMX.ListView.Appearances.TPublishedAppearance.FooterAppearance
- FMX.ListView.Appearances.TPublishedAppearance.HeaderHeight
- FMX.ListView.Appearances.TPublishedAppearance.HeaderAppearance
- FMX.ListView.Appearances.TPublishedAppearance.ItemHeight
- FMX.ListView.Appearances.TPublishedAppearance.ItemAppearance
- FMX.ListView.Appearances.TPublishedAppearance.ItemEditHeight
- FMX.ListView.Appearances.TPublishedAppearance.ItemEditAppearance