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

提供: Appmethod Topics
移動先: 案内検索

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


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

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

デフォルト スタイル

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


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

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

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

  • panelstyle: TRectangle

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

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

たとえば 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 つのマーカーがあります。

StyleBook.png

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

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

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

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

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

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

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

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

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

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

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

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

Platform Styles.png

カスタム スタイル

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

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

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

スタイルのネスト

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

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

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

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

  1. フォームの StyleBook プロパティが設定されている場合には、次の 2 つの名前を使ってそのスタイル ブックを検索します。
    1. 設定されている場合にはコントロールの StyleLookup プロパティ。
    2. コントロールのクラス名から組み立てられるデフォルトの名前(クラス名から先頭の "T" を取り除き、末尾に文字列 "style" を追加したもの)。たとえばクラス名が TEdit であれば、スタイル名は Editstyle になります。
  2. 次の 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 より前に呼び出した場合、そのスタイルはすべてのフォームに適用されます。

関連項目