作成した画像イメージをスタイルとして適用する

Written by Chikako Yonezawa on Posted in TOOLS

Delphi/C++Builder/RAD Studio でサポートされた FireMonkey では、各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しています。

この記事では、自分で作成した画像イメージをスタイルとして適用する手順について説明します。(XE7を使用しています)

     1. 画像イメージを作成する

  1. この例では簡単に Button用の画像イメージを作成します。
  2. ペイントを起動して、下地となる部分を適当な大きさに設定します。
  3. 次に Button用の画面イメージを作成します。この例では、解りやすいよう簡単に三角形の同じ形で色違いのものを作成しました。
  4. メニューの選択部分をクリックして「すべて選択」を選びます。
  5. メニューの選択部分をクリックして「透明の選択」を選びます。
  6. これで白い部分が透過処理されている画像が作成できました。
  7. [ファイル|名前を付けて保存]を選択して、PNG画像として保存します。ここでは testbutton.pngと名前を付けました。

     2. スタイルファイルを作成する

  1. RAD Studio/Delphi/C++Builderのメニューから [ツール|ビットマップ スタイル デザイナ]を選択します。
  2. ビットマップスタイルデザイナが起動します。
  3. [ファイル|新規作成|VCL または FireMonkey 用スタイル]を選択します。
  4. 左側のオブジェクト内のImagesを選択します。
  5. 右側に表示された画面上の[追加]ボタンをクリックします。
  6. 1.で作成した画像ファイル testbutton.pngを指定します。
  7. 左側のソース画像部分の白い背景色(これをマスク色とします)をクリックします。右側のマスクありの画像の背景にマスク色の指定が行われたことを確認(下の画像)して[OK]ボタンを押します。
  8. 左側のオブジェクト内のObjectsの左側にある△ボタンを押し展開します。
  9. 展開された項目内のButtonの左側にある△ボタンを押し、更に展開します。
  10. 展開された中にある Faceを選択します。右側の画面がオブジェクトビューアとインスペクタに変わります。
  11. インスペクタ上のBitmapを選択し[...]ボタンを押します。
  12. ビットマップのプロパティ画面が開きます。左側の「ビットマップ」の所に作成した testbutton.pngが表示されているので、そちらを選択します。
  13. マウスの左クリックで、左上位置、右クリックで右下の位置を指定し、ボタンのイメージとして表示したいイメージを囲います。
  14. 囲い終わったら[適用]ボタンを押します。
  15. この例では5色のボタンを Bitmap, BitmapDisabled, BitmapFocused, BitmapHot, BitmapPressd にそれぞれ設定しています。(それぞれ通常時や、ボタンを押した時のイメージとなります)
  16. メニューの[ファイル|上書き保存]を選択し、スタイルテンプレートファイル(.vsf)を保存します。
  17. スタイルファイルを作成するため、メニューから[ファイル|名前を付けて保存]を選択します。ここで、ファイルの種類を「FireMonkeyスタイル」側を選び、スタイルファイル(.style)を作成します。この例ではTestStyle.styleとしています。
  18. ビットマップスタイルデザイナのツールバーの所にある緑の△ボタン隣にある▼ボタンを押し「FireMonkeyスタイルのテスト」を選択すると設定したボタンイメージを確認することができます。(標準と書かれている部分をクリックして緑色を表示させています)

     3. 作成したスタイルを適用する。

  1. 作ったスタイルを使います。
  2. [ファイル|新規作成|マルチデバイスアプリケーション - Delphi](または C++Builder) を選択します。
  3. 空のアプリケーションを選択して[OK]ボタンを押します。
  4. フォーム上に TButtonを2つと、TStyleBookコンポーネントを貼ります。
  5. デザイナ上の StyleBookコンポーネントをダブルクリックしてスタイルデザイナ画面に切り替えます。
  6. [読み込み]ボタンを押し、作成した TestStyle.styleファイルを指定します。
  7. [適用して閉じる]ボタンを押し、フォームデザイナ側に戻ります。
  8. オブジェクトインスペクタ上で、Formの StyleBookプロパティに StyleBookコンポーネントを設定します。
  9. Buttonの形状が、設定したスタイルに変わります。
  10. Buttonのスタイルはオブジェクトインスペクタ上で StyleLookupプロパティを指定することで変更することができます。

 

この記事では簡単にペイントを使用して画像ファイルを作成していますが、グラフィック編集ソフトウェアを使用して見栄えの良い画像を作成してご使用ください。

Tags: Style Delphi C++Builder FireMonkey Tools Programming



Check out more tips and tricks in this development video: