![radstudio1042 | Embarcadero RAD Studio Delphi C++Builder Blogs rad studio 1042](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/03/rad-studio-1042-6142514.png?resize=1000%2C573&ssl=1)
この記事は、エンバカデロのシニアセールスコンサルタントであるAl Mannarinoのブログの抄訳です
以前、Delphiの開発者から「FMX(FireMonkey)のTEditの背景色を変更するにはどうしたらよいか?」という質問がありました。多くの方がご承知のように、VCLのTEditでは、以下のようにTEditのColorプロパティを設定するだけで変更できます。
1 |
Edit1.Color := clYellow; |
![TEdit | Embarcadero RAD Studio Delphi C++Builder Blogs tedit](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/03/TEdit-9377890.jpg?resize=174%2C108&ssl=1)
例えば、アプリケーション実行時に、Edit1.Color := clYellowを呼び出した後、Edit1の表示は下図のようになります。
![TEditColor | Embarcadero RAD Studio Delphi C++Builder Blogs teditcolor](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/03/TEditColor-1818273.jpg?resize=167%2C100&ssl=1)
しかし、FMXのTEditにはColorプロパティがないので、FMX TEditで同じことをするにはどうすればいいのでしょうか?
FMXのTEditでは、この方法を実現するためには、以下のような3つのオプションがあります。
- FMXスタイルを使用して、StyledSettings、StyleLookup、StyleNameのプロパティを制御
- FireMonkeyスタイルデザイナを使用して、コンポーネントのコピーを使用して新しいFMXスタイルを作成し、実行時に切り替える
- FMXマルチデバイスフォームでEdit1を右クリックし、[カスタムスタイルの編集]を選択
ここでは、上記のオプションのうち3つ目の「カスタムスタイルの編集」を使った方法を見てみましょう。
FMXマルチデバイスフォームでTEditを選択し、右クリックして表示されるポップアップメニューの「カスタムスタイルの編集」を選択します。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja16549312 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 1 6549312](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-1-6549312.png?resize=728%2C460&ssl=1)
[カスタムスタイルの編集]を選択すると、下図のようにTEditのスタイルデザイナが開きます。
![editcustomstyletochangethebackgroundcolorofafmxteditja24127992 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 2 4127992](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-2-4127992.png?resize=685%2C399&ssl=1)
スタイルデザイナを開くと、下図のように構造ペイン内にFMXのEdit1に関する項目が表示されます。
![editcustomstyletochangethebackgroundcolorofafmxteditja34719187 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 3 4719187](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-3-4719187.png?resize=287%2C311&ssl=1)
上図で示す構造ペインは、FireMonkey(FMX)のコントロールは、サブコントロール、プリミティブシェイプ、ブラシ、装飾されたエフェクト等で構成しているツリー構造です。
これらの構成要素はスタイルとして定義され、スタイルブックに保存されます。スタイルの個々の要素は、内部的にリソースと呼ばれています。この用語にはいくつかの他の意味があるため、分かりやすくするために「スタイルリソース」という用語を使用しています。スタイルは、サブクラス化せずに多くのカスタマイズを提供します。
FMXのTEditのスタイルを好きなようにカスタマイズできます。
例えば、構造ペインで表示されるEdit1Style1のツリー内にbackground要素があります。TRectangleをTEditスタイル内に配置し、TRectangleのFill.Colorプロパティを使用して、FMXのTEditの背景色を変更できます。手順は、以下の通りです。
(1)構造ペインのEdit1Style1ツリー内のbackgroundを選択
(2)ツールパレットのカテゴリ[Shapes]内にあるTRectangleコンポーネントを選択し、スタイルデザイナのFMXフォームのEdit1の上にドラッグします。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja47040290 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 4 7040290](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-4-7040290-1024x690-3753757.jpg?resize=750%2C506&ssl=1)
FireMonkeyでは、VCLとは異なり、コントロールの親子関係を自由に変更することができます。上記の例では、Rectangleはbackgroudに従属します。
(3) TRectangleをTEditの同じサイズへ合わせるようにサイズを調整します。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja58039715 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 5 8039715](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-5-8039715.png?resize=587%2C346&ssl=1)
(4) リソースオブジェクトとして検索できるようにTRectangleのStyleNameを変更する
構造ペインのRectangle1を選択し、オブジェクトインスペクタで、StyleNameプロパティを任意の名前に変更できます。
ここでは、例としてRectangle_backgroundという名前に変更します。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja67603434 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 6 7603434](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-6-7603434.png?resize=220%2C251&ssl=1)
TRectangleのStyleNameを任意の名前(ここでは、 “Rectangle_background “)に設定すると、FindStyleResourceメソッドを使用して、以下のコード例のように “Rectangle_background “という名前で指定されたスタイルをリソースオブジェクトとして見つけることができます。
1 |
TRectangle(Edit1.FindStyleResource('Rectangle_background')).Fill.Color := TAlphaColorRec.Yellow; |
(5) スタイルファイルを保存する
RAD Studioで標準提供されているFireMonkeyのスタイルファイルは、以下のパス内にStyleという拡張子で保存されています。
C:¥Program Files(x86)¥Embarcadero¥Studio¥<バージョン番号>¥Redist¥styles¥Fmx またはC:¥Users¥Public¥Documents¥Embarcadero¥Studio¥<バージョン番号>¥Styles
(バージョン番号には、10.4の場合は21.0、10.3の場合は20.0、10.2の場合は19.0等、RAD Studioの各バージョンに対応した番号が入ります。)
それでは、カスタマイズしたスタイルファイルを保存しましょう。
スタイルファイルの保存は、スタイルデザイナの[保存]アイコンをクリックします。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja73685347 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 7 3685347](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-7-3685347.png?resize=463%2C311&ssl=1)
保存するスタイルファイル名には任意の名前を指定できますが、ここではFMXEdit_Colorsという名前で以下のパスに保存します。(下図を参照)
C:¥Users¥Public¥Documents¥Embarcadero¥Studio¥21.0¥Styles (10.4の場合)
![editcustomstyletochangethebackgroundcolorofafmxteditja81061895 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 8 1061895](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-8-1061895.png?resize=724%2C355&ssl=1)
これで準備は完了です。
それでは、実際にFMXフォームで、さきほど保存したスタイルを使用してみましょう。
(1) オブジェクトインスペクタでFMXフォーム(Form1)のStyleNameプロパティにFMXEdit_Colorのスタイルを設定します。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja94627849 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 9 4627849](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-9-4627849.png?resize=206%2C290&ssl=1)
(2)フォーム上にTButtonを一つ配置します。(下図を参照)
![editcustomstyletochangethebackgroundcolorofafmxteditja103186231 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 10 3186231](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-10-3186231.png?resize=455%2C308&ssl=1)
(3) Button1をダブルクリックして、OnClickイベントハンドラを作成し、以下のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
procedure TForm3.Button1Click(Sender: TObject); var LFmx: TFmxObject; LSel: TRectangle; // Uses FMX.Objects; begin LFmx := Edit1.FindStyleResource('Rectangle_background'); if Assigned(LFmx) then begin LSel := LFmx as TRectangle; if Assigned(LSel) then begin LSel.Fill.Color := TAlphaColorRec.Yellow; LSel.Stroke.Color := TAlphaColorRec.Red; LSel.Stroke.Kind := TBrushKind.Solid; end; end; end; |
(4)プロジェクトをビルドして、アプリケーションを実行する
(5) Button1をクリックすると、FMXのTEditは、下図のように黄色の背景色になります。(ただし、この実行サンプル例では、エディットボックスでテキスト文字の入力はできません)
![editcustomstyletochangethebackgroundcolorofafmxteditja117391475 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 11 7391475](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-11-7391475.png?resize=437%2C257&ssl=1)
ここでは、背景色を黄色、枠の色を赤色に設定しましたが、TRectangle.Fill.Colorプロパティ、TRectangle.Stroke.Colorプロパティを変更することで、それぞれ別の色に変更できます。詳しくはTRectangleのdocwikiを参照ください。
ご注意:FMXはマルチプラットフォームに対応していますが、プラットフォームごとにスタイルを作成する必要があります。 この例では、Windowsプラットフォーム向けのカスタマイズしたスタイルのみを作成しています。
他のプラットホームのスタイルをカスタマイズしたい場合は、下図のようにスタイルデザイナのプラットホームを追加するアイコンをクリックして新しいプラットホームを追加してください。
![editcustomstyletochangethebackgroundcolorofafmxteditja126443573 | Embarcadero RAD Studio Delphi C++Builder Blogs edit custom style to change the background color of a fmx tedit ja 12 6443573](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/04/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit-ja-12-6443573.png?resize=512%2C314&ssl=1)
このように、FireMonkey(FMX)のすべてのコントロールは、TStyleBookをフォームにアタッチすることで実現しており、スタイルが読み込まれてフォームに適用されます。このスタイリングシステムによって様々なスタイルにカスタマイズすることができます。
今回ご紹介した例は非常にシンプルですが、是非 FireMonkeyスタイルを自由にカスタマイズしてみてください。
FireMonkeyの関連情報
- スタイルを使った FireMonkey アプリケーションのカスタマイズ
- FireMonkey スタイル デザイナ
- エンバカデロ MVPの細川氏によるビデオ「GWはFireMonkeyで遊んでみよう!」(35:00〜)
- FireMonkey (docwiki ja)
- Cross-platform development the FireMonkey way(英語)
- TMS mCL Software. – Set of components for true native macOS application development.
- FMX.Controls.Presentation.TPresentedControl.ControlType (docwiki ja)
- VCL vs. FireMonkey Pod-Cast(英語)
- FireMonkey プラットフォームに必要な準備(docwiki ja)
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition