FireMonkey: スタイルのプロパティの変更やメソッドの実行を動的に行う

投稿者:: Chikako Yonezawa

概要: FindStyleResource を使用するとスタイルのサブコンポーネントを検索することができます。簡単なサンプルアプリケーションで、スタイルのメソッドを動的に実行する例を紹介します。

FindStyleResource を使用するとスタイルのサブコンポーネントを検索することができます。

簡単なサンプルアプリケーションで、スタイルのメソッドを動的に実行する例を紹介します。

また、この記事の前に以下の記事をご覧いただくことをお勧めします。

  1. IDEのメニューより [ファイル|新規作成|FireMonkey HD アプリケーション – Delphi]、または [ファイル|新規作成|FireMonkey HD アプリケーション –C++Builder] を選択します。

Hide image
Click to see full-sized image

  1. ツールパレットから、フォーム上に TEditを 1つ、TButton を 2つ置きます。

Hide image
Click to see full-sized image

  1. 設計画面上で、Edit1 を選択し、マウスの右ボタンを押してポップアップメニューを表示し、表示されたメニューの中から「カスタムスタイルの編集」を選択します。

Hide image

  1. 画面がスタイルエディタに切り替わります。スタイルエディタの右側のリストの Edit1Style1をクリックし、オブジェクトインスペクタ上で StyleName プロパティの値を Edit1Style1 から ErrorStyle に変更します。

Hide image
Click to see full-sized image

  1. 次にツールパレットの Shapesカテゴリから TText をドラッグし、ErrorStyle にドロップします。

Hide image
Click to see full-sized image

  1. 追加した TText のプロパティをオブジェクトインスペクタ上で次のように設定します。

プロパティ

Fill.Color

Red

StyleName

Text

Text

必須項目

   

Hide image
Click to see full-sized image

  1. スタイルエディタ上で ErrorStyle が展開されていない場合は、▲をクリックし、展開します。
  2. リストの ErrorStyle:TLayout を選択し、中央のイメージの四方の○をマウスでドラッグして適当な大きさにしておきます。また、リストのText:TText を選択し、この TLayout の右側に来るように位置を調整します。(画面のイメージを参考にしてください)

Hide image
Click to see full-sized image

  1. 展開されているリスト内の TGlowEffect を選択し、オブジェクトインスペクタ上で、プロパティの値を次のように設定します。

プロパティ

Enabled

True

ClowColor

Red

Softness

0.1

Trigger

(空白)

   

Hide image
Click to see full-sized image

  1. そのままオブジェクトインスペクタ上で Softness プロパティを選択し、右側の▼をクリックし「TFloatAnimationの新規作成」を選択して、TFloatAnimation を生成します。

Hide image

  1. スタイルエディタのリスト部分で生成された TFloatAnimation を選択し、オブジェクトインスペクタ上で、プロパティの値を次のように設定します。

プロパティ

AutoReverse

True

Duration

0.5

Inverse

True

Loop

True

StartValue

0.1

StopValue

0.6

StyleName

FAni

   

Hide image
Click to see full-sized image

  1. [適用して閉じる] をクリックし、設計画面に戻ります。
  2. 設計画面上で Button1 コンポーネントをマウスでダブルクリックし、OnClick イベントハンドラを生成し、生成されたイベントハンドラに、次のコードを記述します。

Delphi

  Edit1.StyleLookup := 'ErrorStyle';
 

C++Builder

  Edit1->StyleLookup = "ErrorStyle";
 
  1. 設計画面上で Button2 コンポーネントをマウスでダブルクリックし、OnClick イベントハンドラを生成し、生成されたイベントハンドラに、以下のコードを記述します。

Delphi

  Edit1.StyleLookup := '';
 

C++Builder

  Edit1->StyleLookup = "";
 
  1. キーボードの [F9] ボタンを押し、作ったアプリケーションを実行します。

[Button1]をクリックすると、スタイルが適用されるのですが、設定したアニメーションが動作しません。

Hide image

この場合、このスタイルのサブコンポーネントであるTFloatAnimation に対して動作するためのStart メソッドを実行させる必要があります。

  1. 設計画面上で Button1 コンポーネントをマウスでダブルクリックし、OnClick イベントハンドラを、次のように修正します。また、Delphi の場合は uses に FMX.Ani を、C++Builder の場合は .hファイル側に #include <FMX.Ani.hpp> を追加します。

Delphi

procedure TForm1.Button1Click(Sender: TObject);
var
  F: TFloatAnimation;  
begin
  Edit1.StyleLookup := 'ErrorStyle';
  F:=Edit1.FindStyleResource('FAni') as TFloatAnimation;
  if Assigned(F) then begin
    F.Start;
  end;
end;
 

C++Builder

void __fastcall TForm1::Button1Click(TObject *Sender)
{
  Edit1->StyleLookup = "ErrorStyle";
  TFloatAnimation *F;
  F = (TFloatAnimation*)(Edit1->FindStyleResource("FAni"));
  if (F != NULL) {
    F->Start();
  }
}
 

このサンプルコードでは、サブコンポーネントのクラスを定義し、FindStyleResource で、Edit1 に設定されているスタイルのサブコンポーネントを検索し、定義した変数に格納します。サブコンポーネントが見つかったかどうかを確認し、サブコンポーネントのStart メソッドを実行し、動作させています。

  1. コードの修正が終わったところで、キーボードの [F9] ボタンを押し、作ったアプリケーションを実行します。

今度は適用したスタイルのアニメーションが実行され、警告らしく動作します。

Hide image

このように FindStyleResouce を使用すると、動的にスタイルのプロパティの変更や動作を行うことが可能です。


次からのサーバー応答:: ETNASC04