メイン･コンテンツまでスキップ

Button With Label（ラベル付きボタン）

TouchGFXのButton With Labelは、タッチ･イベントを認識するウィジェットで、Button With Labelが解放されるとコールバックを送信します。 押下と解放の各状態は、画像およびテキストと関連付けられます。

Button With Labelは、Flex Buttonによって再現できます。 Flex Buttonはさらに詳しい設定が可能なボタンで、柔軟性と引き換えにRAM使用量も少し多くなります。

シミュレータで実行されるButton With Label（押下状態）

ウィジェット･グループ​

Button With Labelは、TouchGFX DesignerのButtonsウィジェット･グループ内にあります。

TouchGFX DesignerのButton With Label

プロパティ​

次のセクションでは、Button With Labelのプロパティについて説明します。

プロパティ･グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。
Button With Labelのサイズは、選択した画像のサイズによって決まります。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります 。

Visibleは、ウィジェットの可視性を指定します。
ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
TextIDは、使用されるテキストを指定します。 ウィジェットが自動生成のテキストを使用している場合、IDには'Auto-generated'と表示されます。

Translationは、表示されるテキストのコンテンツを指定します。

Typographyは、テキストのフォーマットを指定します。

Alignmentは、テキストの水平方向の配置を指定します。

テキスト設定の詳細については、「テキストとフォントの使用」セクションを参照してください。
Text AppearanceReleased ColorおよびPressed Colorは、押下状態と解放状態のテキストの色を指定します。

Alphaは、ウィジェットの透明度を指定します。
ウィジェットのアルファ値の範囲は0〜255です。 0は完全な透明で、255は塗りつぶされた状態です。

Text Rotationは、テキストの回転角度を指定します。 0度、90度、180度、270度の4つの角度を指定できます。
StyleStyleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。
これらのスタイルには自由に使用できる画像が含まれます。
ImageReleased ImageおよびPressed Imageは、押下状態と解放状態に割り当てられる画像を、Designerのスキン･ライブラリまたはProjectフォルダから指定します。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。

MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

インタラクション​

以下のセクションでは、Button With Labelによってサポートされるアクションとトリガについて説明します。

アクション​

特定のウィジェット･アクション説明
Change button label colorsラベルの色を変更します。
標準のウィジェット･アクション説明
Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
Fade widget時間の経過に伴ってウィジェットのアルファ値を変更します。
Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ​

トリガ説明
Button is clickedButton With Labelがクリックされました。

パフォーマンス​

Button With Labelは2つの画像とテキストで構成され、画像とテキストの描画に依存します。 テキスト描画は一般的な画像描画と非常によく似ています（ただし、テキスト文字の特性から、かなりの量のアルファブレンディングが行われます）。 このため、Button With Labelはほとんどのプラットフォーム上で高速のウィジェットであると見なされます。

テキスト描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例​

生成済みコード​

View基底クラスの生成済みコードを見ると、TouchGFX DesignerによるButton With Labelの設定方法がわかります。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <texts/TextKeysAndLanguages.hpp>
#include <touchgfx/Color.hpp>

Screen1ViewBase::Screen1ViewBase() :
    buttonCallback(this, &Screen1ViewBase::buttonCallbackHandler)
{
    buttonWithLabelName.setXY(155, 106);
    buttonWithLabelName.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    buttonWithLabelName.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    buttonWithLabelName.setLabelColor(touchgfx::Color::getColorFromRGB(255, 255, 255));
    buttonWithLabelName.setLabelColorPressed(touchgfx::Color::getColorFromRGB(255, 255, 255));
    buttonWithLabelName.setLabelRotation(TEXT_ROTATE_0);
    buttonWithLabelName.setAction(buttonCallback);

    add(buttonWithLabelName);
}

void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
    if (&src == &buttonWithLabelName)
    {
        //InteractionName
        //When buttonName clicked calls the new virtual function "functionName()" set by the user
        functionName();
    }
}
Tip
ユーザ･コードでは、これらの関数や、ButtonWithLabelクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 buttonWithLabelName.invalidate() を呼び出して、再描画を行う必要があることを忘れないでください。

TouchGFX Designerの例​

Button With Labelをさらに探索するには、次のUIテンプレートを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのCustom Trigger Action Example UIテンプレート

TouchGFX DesignerのPool Demo UIテンプレート

API参照​

Further reading
  • ButtonWithLabelクラスのAPI参照