FireMonkey アプリケーションのデザインをカスタマイズする

FireMonkey クイック スタート ガイド - ユーザー インターフェイスの設計 への移動

FireMonkey アプリケーションのデザインをカスタマイズする

ビジュアル コンポーネント ライブラリ（VCL）では、各コンポーネントについて、色などのルック アンド フィールに関するプロパティを［オブジェクト インスペクタ］で変更することができます。 FireMonkey ただし、FireMonkey ではそのようなプロパティが表示されません。FireMonkey では、各コンポーネントのルック アンド フィールはスタイルとして定義し、そのスタイルをコンポーネントに割り当てます。

スタイルという考え方が採用されているため、アプリケーションに別のスタイルを適用するだけで、アプリケーション全体のルック アンド フィールを簡単に変更できるようになっています。

次に挙げるのは、アプリケーション内で簡単に使用できる、定義済みの FireMonkey スタイルです。

Air.Style	Amakrits.Style	AquaGraphite.Style	Blend.Style
Dark.style	FMX.Platform.iOS.style	FMX.Platform.Mac.style	FMX.Platform.Win.style
GoldenGraphite.Style	iOS.Style	iOSNative.Style	Light.Style
Mac.Style	MacBlue.Style	MacGraphite.Style	RubyGraphite.style
Windows7.Style

アプリケーション内でスタイルを選択できるよう、スタイルの実装方法には、代表的なものがいくつかあります：

• ステップ 1 では、実行時にコードを使ってスタイルを変更する方法を説明します。
• ステップ 2 では、アプリケーションの設計時にスタイルを設定する方法と、指定したスタイルをアプリケーションに含める方法を説明します。
• ステップ 3 では、特定のコンポーネントにスタイルを設定する方法を説明します。

ステップ 1： 実行時に既存のスタイルをアプリケーションに適用する

メモ： サンプル アプリケーションは、C:\Users\Public\Documents\RAD Studio\<n.n>\Samples\FireMonkey\ControlsDemo にあります。

ControlsDemo サンプル アプリケーションには、数多くの FireMonkey コンポーネントが既に配置されていて、実行時にスタイルを切り替える機能も既に実装されています。

デモ アプリケーションでこの機能を使用するには、［File｜Load Style...］をクリックし、スタイル ファイルを選択します。

FireMonkey のスタイル ファイルは、C:\Users\Public\Documents\RAD Studio\n.n\Styles にあります。

次に示すのは、新しいスタイルに切り替えるためのコードです。

 
 procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);
   if OpenDialog1.Execute then
   begin
     Application.StyleFileName := OpenDialog1.FileName;
   end;

このデモ コードでは、まず、ファイルを選択するための［開く］ダイアログを表示します。 ダイアログの名前は、コード内で OpenDialog1 に設定されています。 ユーザーがファイルを選択すると、Execute メソッドから True が返されます。 コードでは、まずユーザーがファイルを選択したかどうかを確認してから、スタイル ファイルのファイル名を OpenDialog1.Filename（ユーザーが選択したファイル名を保持しています）から Application.StyleFileName プロパティに代入しています。 それだけです。

ステップ 2： 設計時時に既存のスタイルをアプリケーションに適用する

設計時に TStyleBook コンポーネントを使って既存スタイルを適用することもできます。

設計時にスタイルを適用するには：

1. TStyleBook コンポーネントをフォームにドロップします。デフォルトでは、新しいコンポーネントの名前は StyleBook1 になります。
2. FireMonkey フォームを選択し、StyleBook プロパティを StyleBook1 に設定します。

   

3. StyleBook1 コンポーネントをダブルクリックします。
4. ［読み込み...］ ボタンをクリックし、スタイルを選択します。 スタイルは、C:\Program Files (x86)\Embarcadero\RAD Studio\n.n\Redist\styles\Fmx にあります。

   

5. ［適用して閉じる］ を選択します。 これで、フォーム デザイナ上のコントロールが指定したスタイルを使って描画されます。

   

メモ： このチュートリアルのステップ 2 では、このデモ アプリケーション（ステップ 1 で説明したもの）の機能を変更しています。 このステップを試した後、アプリケーションから StyleBook1 コンポーネントを削除し、デモで実装されている元の機能が変わらないようにしてください。

ステップ 3： 特定のコンポーネントのスタイルを変更する

特定のコンポーネントのスタイルをカスタマイズすることもできます。

特定のコンポーネントのスタイルをカスタマイズするには：

1. フォーム デザイナでコンポーネントを選択します。
2. コンポーネントを右クリックして、［カスタム スタイルの編集...］を選択します。

   

3. このスタイルのプロパティを［オブジェクト インスペクタ］で変更します。 ［オブジェクト インスペクタ］で定義されたどのプロパティでも変更することができます。

4. ［適用して閉じる]を選択し、フォーム デザイナへ戻ります。

5. コンポーネント（先ほどカスタマイズしたもの）を選択すると、新しいプロパティ（Panel1Style1 など）が定義されていることがわかります。

6. さらに、同じスタイルを別のコンポーネントに適用することもできます。 別のコンポーネントを選択し、StyleLookup プロパティを Panel1Style1 に設定します。

詳細情報

• FireMonkey アプリケーションの設計