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

Radio Button（ラジオ･ボタン）

TouchGFのRadio Buttonは、タッチ･イベントを認識するウィジェットで、Radio Buttonがクリックされるとコールバックを送信します。 ラジオ･ボタンは4つの画像で構成され、押下状態または解放状態にあるときに選択または未選択のボタンに対応します。 Radio ButtonはRadio Button Groupに追加することができます。ここでは新しい選択が行われたときのラジオ･ボタンの選択解除が処理されます。

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

シミュレータで実行されるRadio Button

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

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

TouchGFX DesignerのRadio Button

プロパティ​

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

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

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

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、画面を介したウィジェットとの相互作用も無効にします。

Visibleは、ウィジェットの可視性を指定します。
ウィジェットを非表示にすると、画面を介したウィジェットとの相互作用も無効にします。
SelectionSelectedは、ボタンの初期選択状態を指定します。 Deselectableは、選択状態のボタンをしばらく押すことで選択解除できるように指定します。
GroupGroupは、このボタンが割り当てられるグループの名前を指定します。 選択および選択解除の動作はこれらのRadio Button Group内に含まれます。
StyleStyleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。
これらのスタイルには無料使用できる画像が含まれます。
ImageReleased ImageおよびPressed Imageは、押下状態と解放状態に割り当てられる画像を、Designerのスキン･ライブラリまたはProjectフォルダから指定します。
AppearanceAlphaは、ウィジェットの透明度を指定します。
ウィジェットのアルファ値の範囲は0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

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

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

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

インタラクション​

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

アクション​

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

トリガ​

トリガ説明
Radio Button is selectedRadio Buttonが選択されました。
Radio Button is deselectedRadio Buttonが選択解除されました。

パフォーマンス​

Radio Buttonは4つの画像で構成され、画像描画に依存します。 このため、Radio Buttonはほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。

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

例​

生成済みコード​

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

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"

creen1ViewBase::Screen1ViewBase() :
    radioButtonSelectedCallback(this, &Screen1ViewBase::radioButtonSelectedCallbackHandler)
{
    radioButtonName.setXY(136, 114);
    radioButtonName.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_CHECK_BUTTONS_CHECK_MARK_INACTIVE_ID), touchgfx::Bitmap(BITMAP_BLUE_CHECK_BUTTONS_CHECK_MARK_PRESSED_ID), touchgfx::Bitmap(BITMAP_BLUE_CHECK_BUTTONS_CHECK_MARK_ACTIVE_ID), touchgfx::Bitmap(BITMAP_BLUE_CHECK_BUTTONS_CHECK_MARK_NORMAL_ID));
    radioButtonName.setSelected(false);
    radioButtonName.setDeselectionEnabled(true);

    add(radioButtonName);
    radioButtonGroupName.add(radioButtonName);

    radioButtonGroupName.setRadioButtonSelectedHandler(radioButtonSelectedCallback);
}

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

TouchGFX Designerの例​

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

TouchGFX DesignerのRadio Button Example UIテンプレート

API参照​

Further reading
  • RadioButtonクラスのAPI参照