スタイルを使った FireMonkey アプリケーションのカスタマイズ

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

FireMonkey コントロールは、サブコントロール、基本図形、ブラシをツリー構造に配置し、効果で装飾したものです。これらの構造はスタイルとして定義され、スタイルブックに格納されます。スタイルの個々の要素を内部的にはリソースと呼びますが、リソースという用語には他にもいくつかの意味があるため、明確にするためにスタイルリソースという用語を使用します。スタイルを使用すると、サブクラスを作成しなくても大幅なカスタマイズを行うことができます。

本製品に付属している FireMonkey スタイルは、C:\Program Files (x86)\Embarcadero\Studio\17.0\Redist\styles\Fmx に .Style ファイルとして保存されています。これらのスタイルを FireMonkey スタイルデザイナで読み込むことができます。

デフォルトスタイル

FireMonkey では、コントロールクラスそれぞれにデフォルトスタイルがあり、プラットフォームごとにハードコードされています。コントロールのショートカットメニューの［デフォルトスタイルの編集...］コマンドをクリックすると、コントロールクラスに対して内部的にハードコードされたスタイルのコピーが作成されます。

FireMonkey スタイルデザイナでスタイル定義を確認するには：

フォームデザイナのフォームに TStyleBook をドロップします。
スタイルブックをダブルクリックします。

たとえば、FMX.StdCtrls.TPanel のデフォルトスタイルは、単純に次のように定義されています。

panelstyle: TRectangle

このスタイルを定義しているスタイルリソースの名前は "panelstyle" です。これは TRectangle を参照しています。この長方形の外観はスタイルデザイナで変更することができ、フォーム上のすべての TPanel はデフォルトでその外観になります。

しかし、TPanel を TRectangle で表現しなければならないという規則はありません。TRoundRect や TEllipse でも構いません単純なコントロールでも複雑な構造を持つことがあります。

たとえば FMX.StdCtrls.TCheckBox の場合には、次のように表示されます。

checkboxstyle: TLayout（コントロール全体）
- TLayout（ボックスのレイアウト）
  - background: TRectangle（ボックス自体。以下を合成したもの）
    - TGlowEffect（コントロールにフォーカスがある場合のグロー）
    - TRectangle（ボックスを形成する外側の長方形）
    - TRectangle（内側の長方形）
    - TColorAnimation（マウスを合わせたときのカラーアニメーション）
    - TColorAnimation（マウスが離れたときのカラーアニメーション）
    - checkmark: TPath（ボックス内のチェック。パスとして描画され、以下を含みます）
      - TColorAnimation（チェックをオンまたはオフにしたときのカラーアニメーション）
- text: TText（最上位の下に戻って、テキストラベル）

スタイルには、検索して使用できるように名前が付いています。さらに、一部のサブ要素にも名前が付いて、参照できるようになっています。IsChecked プロパティのオン/オフを切り替えると、"チェックマーク" の可視性が変化します（その色の透過度が不透明から透明に変わります）。TCheckBox の Text プロパティを設定すると、それに対応する "text" という名前の TText の Text プロパティが設定されます。

リソースの名前と参照

同様の名前を持つ 2 つのプロパティが、コントロールとスタイルとサブコンポーネントをつなぐリンクとなります。

StyleName は、他からスタイルやスタイルサブコンポーネントを見たり検索を行うときの名前です。
コントロールの StyleLookup プロパティを希望するスタイルリソースの名前に設定すると、その特定のコントロールに対して、そのスタイルを適用することができます。StyleLookUp が空の場合には、デフォルトスタイルが使われます。
FindStyleResource に名前を渡して呼び出すと、サブコンポーネントを検索することができます。

コントロールは、スタイルを設定することもできますし、スタイル要素（またはスタイルの一部）として使用することもできるため、両方のプロパティを持ちます。図形のような単純なコンポーネントにはスタイルを設定することができず、スタイル要素にしかできません。

スタイルリソースの格納：マルチプラットフォーム TStyleBook

FireMonkey の TStyleBook コンポーネントが、さまざまなターゲットプラットフォーム用のスタイルを集めたコレクションになりました。コレクション内の各項目には、スタイルと、プラットフォームを示すマーカー（文字列）が含まれます。プラットフォームスタイルマーカーには、カスタムスタイル用とプラットフォームスタイル用の 2 種類があります。

プラットフォームスタイル用には、Windows、OS X、Android、iOS などの各ターゲットプラットフォーム向けに、4 つのマーカーがあります。

カスタムスタイルの場合、カスタマイズ対象のコントロールはターゲットプラットフォームのバージョンごとにネイティブでなければならないため、マーカーの数は増えます。FireMonkey では、現在、以下のプラットフォーム用のカスタムスタイルをサポートしています。
- Windows
- Windows 7
- Windows 8 デスクトップ
- Windows 10 デスクトップ
- OSX Yosemite
- OSX Lion
- iOS
- Android ライト

メモ： "Default" というプラットフォームマーカーもあります。FireMonkey アプリケーションは、現在のプラットフォームに一致するスタイルが見つからない場合に、デフォルトスタイルを読み込みます。

FireMonkey スタイルデザイナでは、TStyleBook コンポーネントのスタイルの編集、追加、削除を行うことができます。

FireMonkey スタイルデザイナを開くには：

フォームデザイナのフォームに TStyleBook をドロップします。
スタイルブックをダブルクリックします。

詳細については、「FireMonkey スタイルデザイナ」を参照してください。

新しく作成されたこのオブジェクトは、フォームの StyleBook プロパティに設定され、フォームに対して効果を持ちます。

フォームは複数の TStyleBook オブジェクトを持つことができます。フォームの StyleBook プロパティは、一度に 1 つだけ、そのいずれかのオブジェクトを参照することができます。あるいは、このプロパティを nil に設定して、ハードコードされたデフォルトスタイルのみにフォームを戻すこともできます。

FireMonkey スタイルデザイナでは、一度に 1 つの TStyleBook のスタイルを編集します。フォーム上で TStyleBook をダブルクリックすると、スタイルデザイナが開き、そのスタイルが表示されます。スタイルデザイナでは、TStyleBook をテキスト形式の .style ファイルに保存したり、そのファイルを読み込むことができます。ハードコードされたデフォルトスタイル全体をスタイルデザイナに読み込むこともできます。

プラットフォームスタイル

FireMonkey において、プラットフォームスタイルという用語は、あるプラットフォームに関する一連のリソースを含む .Style ファイルを指します。プラットフォームスタイルを扱うには、まず、フォームデザイナで TStyleBook コンポーネントをダブルクリックし、FireMonkey スタイルデザイナを開きます。

FireMonkey スタイルデザイナウィンドウで、ボタンおよびボタンを使用して、既存の .Style ファイルを開いたり現在のスタイルを .Style ファイルに保存することができます。次の図のように、スタイルの構造が［構造］ペインにツリー形式で表示されます。

カスタムスタイル

デフォルトスタイルを変更したり、1 つのコンポーネントについてゼロから作成するなどして、新しいスタイルを作成することができます。

デフォルトスタイルを変更するには、フォームデザイナでコントロールを右クリックし、［カスタムスタイルの編集...］を選択します。生成されたスタイルの名前はコントロールの名前を基に付けられるため、コントロールに最初から適切な名前を選択しておくと、手順を減らすことができます。生成された名前はコントロールの StyleLookup プロパティに割り当てられ、そのコントロールに対して効果を持ちます。新しいスタイルは、コントロールの現在のスタイルをコピーしたものです。
新しいプラットフォーム用にカスタムスタイルを追加するには、FireMonkey スタイルデザイナでボタンをクリックし、画面の指示に従って設定します。詳細は、「FireMonkey スタイルデザイナ」を参照してください。
まったく新しいスタイルを作成する場合は、.style ファイルを変更し、FireMonkey スタイルデザイナに読み込みます。たとえば、現在のスタイルセットを保存し、そのファイルを編集して、最後の end の前に次の内容を追加します。

object TBrushObject
  StyleName = 'somebrush'
end

メモ：新しいプラットフォームを追加したり現在のプラットフォームを変更すると、対象のコントロールのカスタムスタイルが FireMonkey によって自動的に作り直されます。

スタイルのネスト

スタイルの中で、スタイルの設定された他のコンポーネントを参照することができます。通常どおり、スタイルは TStyleBook の最上位の名前で検索されます。たとえば、同じグラデーションを使用する手順は次のようになります。

FireMonkey スタイルデザイナで、既存のスタイルを .style ファイルに保存します。
テキストエディタでファイルを開き、TBrushObject を作成します。適切な StyleName を指定します。
その .style ファイルを読み込みます。
新しく定義したスタイルを選択して、［オブジェクトインスペクタ］に表示します。
Brush プロパティを開きます。
1. Gradient プロパティを［ブラシデザイナ］（プロパティ値のドロップダウンメニューから［編集...］を選択）で編集します。
2. Kind プロパティを Gradient に設定します。
このグラデーションを使用するコンポーネントごとに以下を行います。ここでは TRectangle の Fill プロパティを例に挙げます。
1. Kind プロパティを Resource に設定します。
2. Resource プロパティ（TBrushResource）を開き、StyleLookup にステップ 2 で指定したグラデーションの名前を設定します。

スタイルリソースの検索順序

RAD Studio がコントロールスタイルを探すときには、以下の順序で検索を行い、最初に一致したところで止まります。

フォームの StyleBook プロパティが設定されている場合には、次の 2 つの名前を使ってそのスタイルブックを検索します。
1. 設定されている場合にはコントロールの StyleLookup プロパティ。
2. コントロールのクラス名から組み立てられるデフォルトの名前（クラス名から先頭の "T" を取り除き、末尾に文字列 "style" を追加したもの）。たとえばクラス名が TEdit であれば、スタイル名は Editstyle になります。
次の 3 つの名前を使って、ハードコードされたデフォルトスタイルを検索します。
1. 設定されている場合にはコントロールの StyleLookup プロパティ。
2. コントロールのクラス名から組み立てられるデフォルトのスタイル名。
3. 同じ手順でコントロールの親クラス名から組み立てられるデフォルト名。

例： TPanel の場合のデフォルト名は "Panelstyle" と "Controlstyle" です。TCalloutPanel の場合のデフォルト名は "CalloutPanelstyle" と "Panelstyle" です。

メモ： FireMonkey は、デフォルトスタイルの名前（ステップ 2.2 および 2.3 を参照）を、仮想メソッド GetDefaultStyleLookupName および GetParentClassStyleLookupName を使って生成します。必要であれば、これらのメソッドをオーバーライドして、名前の生成アルゴリズムを変更することができます。

名前の照合は大文字と小文字を区別せずに行われます。一致するものがなければ、コントロールのコンテンツはなくなり、事実上非表示になります。サブコンポーネントが見つかることを前提としているコードでは、エラーが発生します（これが起きるのは、カスタムコントロールのバンドルが不完全または不適切な場合だけのはずです。組み込みコントロールには対応するスタイルがハードコードされているためです。組み込みクラスの直接の下位クラスは、基底クラスのコンテンツを持ちます。その次の世代の下位クラスは空になります）。

フォームのスタイル

TForm はコントロールでもなければ TStyledControl のサブクラスでもありませんが、スタイルが設定されています。StyleLookup プロパティのデフォルトは "backgroundstyle" です。その StyleName を持つデフォルトスタイルリソースは、灰色の TRectangle です。

このリソースを読み込んだ時点では、Align プロパティは Contents に設定されていて、背景色としてフォームを塗りつぶします。フォームの他の子よりも先に、このオブジェクトが最初に描画されます。

メモ： メインプロジェクトファイルでユニットの initialization セクションにおいて TStyleManager.SetStyle 関数を、Application.Initialize より前に呼び出した場合、そのスタイルはすべてのフォームに適用されます。

スタイルを使った FireMonkey アプリケーションのカスタマイズ

目次

デフォルトスタイル

リソースの名前と参照