FireMonkey リスト ビューの外観のカスタマイズ
目次
FireMonkey のリスト ビューの外観は、リスト項目のレイアウト(キャプション、関連画像、テキスト詳細、アクセサリ アイコンなど)を変更してカスタマイズすることができます。
リスト ビューの外観に関するプロパティのカスタマイズ
設計時に、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 プロパティを探し、必要な値をカスタマイズします。
Custom 値の使用
値に Custom を指定すると、ListView のすべてのオブジェクトが有効になり、リスト内の項目の表示方法を選択することができます。ListView 内の項目の FooterApearance、HeaderAppearance、ItemAppearance、ItemEditAppearance の各プロパティに Custom という値を指定できます。
これらのプロパティをカスタマイズし、それぞれに以下のグラフィカルな項目の表示方法を設定できます。
- Accessory オブジェクト。リスト ビュー項目のアクセサリ オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
- アクセサリの種類: チェック マーク、詳細、または追加情報のアクセサリ アイコン。
- 位置とサイズ。
-
- メモ: アクセサリの種類のオブジェクトは、編集モードでは表示されません。
- Detail。リスト ビュー項目の詳細テキストのグラフィカルな外観を表します。以下が変更可能です。
- フォントの種類、テキストの色、テキストの位置揃え。
- GlyphButton。リスト ビュー項目のグリフ ボタン(グラフィック画像)のグラフィカルな外観を表します。以下が変更可能です。
- ボタンの種類: 追加ボタン、チェック ボックス ボタン、削除ボタン。
- 位置とサイズ。
- グリフ ボタンの有効/無効。
-
- メモ: GlyphButton は編集モードでのみ表示されます。
- Image。リスト ビュー項目のアイコン オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
- 位置とサイズ。
- Text。リスト ビュー項目のテキスト オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
- 位置とテキストのサイズ。
- フォントの種類、テキストの位置揃え、ワードラップ。
- TexButton。リスト ビュー項目のテキスト ボタン オブジェクトのグラフィカルな外観を表します。以下が変更可能です。
- ボタンの種類。
- フォントの種類、テキストのサイズ、テキストの位置揃え、ワードラップ。
- テキスト ボタンの有効/無効。
Custom 値の使用方法
リスト項目の Custom 値を使用するには:
- [オブジェクト インスペクタ]で ItemAppearance プロパティを探し、その値を Custom に設定します。
- 必要なオブジェクトを表示するよう設定します。
- [オブジェクト インスペクタ]で、必要な任意のオブジェクトの Visible プロパティを有効にし(値を
True
に設定)、望ましい内容にプロパティを変更します。 - 任意のオブジェクトの Visible プロパティを、ソース コードで
True
に設定して有効にします。
- [オブジェクト インスペクタ]で、必要な任意のオブジェクトの Visible プロパティを有効にし(値を
AItem.Objects.AccessoryObject.Visible := True;
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
AObjects->GlyphButton->Visible = true;
}
カスタマイズした外観クラスの作成
カスタマイズした外観クラスを新規作成してインストールし、設計で使用することができます。それには新しいパッケージをインストールします。このパッケージは、リスト ビュー項目のカスタム外観を実装したクラスを定義したものです。必要に応じてフィールドをカスタマイズすることで、たとえば評価を示す画像(数値に応じて異なる画像を表示するコントロール)を実装することができます。
カスタマイズした外観クラスの使用方法
- 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
- サンプル: