Button With Icon(アイコン付きボタン)
TouchGFのButton With Iconは、タッチ・イベントを認識するウィジェットで、Button With Iconが解放されるとコールバックを送信します。 押下と解放の各状態は、画像およびアイコンと関連付けられます。
Button With Iconは、Flex Buttonによって再現できます。 Flex Buttonはさらに詳しい設定が可能なボタンで、柔軟性と引き換えにRAM使用量も少し多くなります。
ウィジェット・グループ
Button With Iconは、TouchGFX DesignerのButtonsウィジェット・グループ内にあります。
プロパティ
TouchGFX DesignerのButton With Iconのプロパティは以下のとおりです。
プロパティ・グループ | プロパティの説明 |
---|---|
Name | ウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。 |
Location | XおよびYは、親を基準としてウィジェットの左上隅を指定します。 WおよびHは、ウィジェットの幅と高さを指定します。 Button With Iconのサイズは、選択した画像のサイズによって決まります。 Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。 ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります 。 Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。 |
Image | Button Styleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。 これらのスタイルには、無料で使用できる画像が含まれています。 Released ImageおよびPressed Imageは、Dは、押下状態と解放状態に割り当てられる画像を、Designerのスキン・ライブラリまたはProjectフォルダから指定します。 |
Icon | Icon Styleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。 これらのスタイルには、無料で使用できる画像が含まれています。 Released ImageおよびPressed Imageは、Dは、押下状態と解放状態に割り当てられる画像を、Designerのスキン・ライブラリまたはProjectフォルダから指定します。 |
Icon Location | XおよびYは、親を基準としてウィジェットの左上隅を指定します。 WおよびHは、選択した画像に基づいてウィジェットの幅と高さを指定します。 |
Appearance | Alphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は0~255です。 0は完全に透明で、255は塗りつぶされた状態です。 |
Mixins | Draggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。 ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。 FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。 MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。 |
インタラクション
以下のセクションでは、Button With Iconによってサポートされるアクションとトリガについて説明します。
アクション
標準のウィジェット・アクション | 説明 |
---|---|
Move widget | 時間の経過に伴ってウィジェットを新しい位置に移動します。 |
Fade widget | 時間の経過に伴ってウィジェットのアルファ値を変更します。 |
Hide widget | ウィジェットを非表示にします(可視性をfalseに設定します)。 |
Show widget | 非表示のウィジェットを表示します(可視性をtrueに設定します)。 |
トリガ
トリガ | 説明 |
---|---|
Button is clicked | Button With Iconがクリックされました。 |
パフォーマンス
Button With Iconは4つの画像で構成され、画像描画に依存します。 このため、Button With Iconはほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。
画像描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。
例
生成済みコード
ビューの基底クラスの生成済みコードを見ると、TouchGFX DesignerによるButton With Iconの設定方法がわかります。
Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
Screen1ViewBase::Screen1ViewBase() :
buttonCallback(this, &Screen1ViewBase::buttonCallbackHandler)
{
buttonWithIconName.setXY(155, 106);
buttonWithIconName.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID), touchgfx::Bitmap(BITMAP_BLUE_ICONS_ADD_NEW_32_ID), touchgfx::Bitmap(BITMAP_BLUE_ICONS_ADD_NEW_32_ID));
buttonWithIconName.setIconXY(71, 16);
buttonWithIconName.setAction(buttonCallback);
add(buttonWithIconName);
}
void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
if (&src == &buttonWithIconName)
{
//InteractionName
//When buttonName clicked calls the new virtual function "functionName()" set by the user
functionName();
}
}
Tip
ユーザ・コードでは、これらの関数や、ButtonWithIconクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、
buttonWithIconName.invalidate()
を呼び出して、再描画を行う必要があることを忘れないでください。TouchGFX Designerの例
Button With Iconをさらに探索するには、次のUIテンプレートを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。