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

Text Progress（テキスト･プログレス）

Text Progressは、指定された桁数の数値で進捗状況を表示します。 バックグラウンドImage（画像）上でTextArea（テキスト･エリア）を進捗インジケータとして使用して、現在の進捗状況を示します。 色、アルファ値、およびテキスト･エリアのテキストを設定できます。 カスタム･バックグラウンド画像を作成し、そのカスタム･バックグラウンド画像に合うように、進捗インジケータのさまざまなパラメータ（位置やサイズなど）を変更することができます。

シミュレータで実行されるText Progress

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

Text Progressは、TouchGFX DesignerのProgress Indicatorsウィジェット･グループ内にあります。

TouchGFX DesignerのText Progress

プロパティ​

TouchGFX DesignerのText Progressのプロパティは以下のとおりです。

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

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

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

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
StyleStyleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。
これらのスタイルには、自由に使用できる画像が含まれています。
ImageBackgroundは、バックグラウンド画像を指定します。
TextIDは、使用されるテキストを指定します。 ウィジェットが自動生成のテキストを使用している場合、IDには'Auto-generated'と表示されます。

Translationは、表示されるテキストのコンテンツを指定します。 テキスト･フィールドはワイルドカード"<\> %"を使用するように自動設定されます。つまり、作成されたワイルドカードには、進捗状況の設定に適合した数値が入ることになります。 Text Progressが正しく機能するには、ワイルドカードが必須ですが、ワイルドカードの前後には任意の他のテキストをセットできます。

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

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

テキスト設定の詳細については、「テキストとフォントの使用」セクションを参照してください。
Text Position & SizeXおよびYは、親のText Progressの位置を基準として進捗テキストの左上隅の位置を指定します。

WおよびHは、進捗テキストの幅と高さを指定します。
ValuesRange MinおよびRange Max<は、インジケータの最小および最大整数値を指定します。

Initialは、進捗インジケータの初期値を指定します。Steps Totalは、進捗インジケータが新しい値をレポートするときの間隔を指定します。 たとえば、進捗を0%、10%、20%、...100%という粒度でレポートする必要がある場合、トータル値は10に設定します。

Steps Minは、進捗インジケータが示す最小ステップ数を指定します。

Number of Decimalsは、進捗を表示するために必要な精度を指定します。 指定可能な値は、0、1、または2です。
AppearanceColorは、表示されるテキストの色を指定します。

Alphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は、0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

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

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

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

インタラクション​

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

アクション​

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

トリガ​

トリガ説明
Value update completeアニメーションの更新の完了時にトリガされます。 更新の時間が0の場合、瞬時に更新されますが、その場合もこのイベントはトリガされます。
Value updated瞬時の更新とアニメーション更新時の中間ステップの両方でトリガされます。 新しい値が現在の値と異なる場合のみトリガされます。

パフォーマンス​

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

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

例​

生成済みコード​

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

Screen1ViewBase.cpp
textProgress.setXY(198, 119);
textProgress.setProgressIndicatorPosition(0, 0, 84, 34);
textProgress.setRange(0, 100);
textProgress.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0));
textProgress.setNumberOfDecimals(0);
textProgress.setTypedText(touchgfx::TypedText(T_SINGLEUSEID1));
textProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_TEXT_PROGRESS_BG_SQUARE_ID));
textProgress.setValue(50);

ユーザ･コード​

次の例は、進捗をシミュレーションするために、handleTickEvent()関数を実装する方法を示しています。 このコードを実行すると、この記事の冒頭で示したアプリケーションが作成されます。

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    bool increase = true;
    uint8_t counter;
};
Screen1View.cpp
void Screen1View::handleTickEvent()
{
    counter++;
    if(counter%15 == 0) // Every 0.25 seconds
    {
        int currentValue = textProgress.getValue();
        int16_t max;
        int16_t min;
        textProgress.getRange(min, max);

        if (currentValue == min)
        {
            increase = true;
        }
        else if (currentValue == max)
        {
            increase = false;
        }

        int nextValue = increase == true ? currentValue+1 : currentValue-1;

        counter = 0;
        textProgress.setValue(nextValue);
    }
}
Tip
ユーザ･コードでは、これらの関数や、TextProgressクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 textProgress1.invalidate() を呼び出して、再描画を行う必要があることを忘れないでください。

TouchGFX Designerの例​

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

TouchGFX DesignerのProgress Indicator Example UIテンプレート

API参照​

Further reading
  • TextProgressクラスのAPI参照