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

Image Progress（画像プログレス）

Image Progressは、バックグラウンドImage（画像）上でTiled Image（タイル化画像）を進捗インジケータとして使用して、現在の進捗状況を示します。 画像の進捗、アルファ値、画像が進む方向を設定できます。 カスタム･バックグラウンド画像を作成し、そのカスタム･バックグラウンド画像に合うように、進捗インジケータのさまざまなパラメータ（位置やサイズなど）を変更することができます。

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

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

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

TouchGFX DesignerのImage Progress

プロパティ​

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

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

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

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

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

Progressは、進捗を表示するために使用する画像を設定します。
Progress PositionXおよびY座標は、進捗インジケータの位置を基準として進捗画像の左上隅の位置を指定します。

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

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

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

Anchor progress image at zeroは、進行方向を基準として0のポイントに進捗画像を固定するかどうか、つまり、画像が徐々に姿を現すのか、引っ張られていくのかを指定します。

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

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

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

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

インタラクション​

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

アクション​

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

トリガ​

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

パフォーマンス​

Image ProgressはTiled Image（タイル化画像）とバックグラウンド画像で構成されます。 このため、Image Progressは画像描画に依存し、ほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。

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

例​

生成済みコード​

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

Screen1ViewBase.cpp
imageProgress.setXY(148, 126);
imageProgress.setProgressIndicatorPosition(2, 2, 180, 16);
imageProgress.setRange(0, 100);
imageProgress.setDirection(touchgfx::AbstractDirectionProgress::RIGHT);
imageProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_PROGRESS_INDICATOR_BG_SQUARE_DEGREES_ID));
imageProgress.setBitmap(BITMAP_BLUE_PROGRESSINDICATORS_FILL_TILING_PROGRESS_INDICATOR_FILL_STRIPED_NORMAL_HORIZONTAL_ID);
imageProgress.setValue(0);
imageProgress.setAnchorAtZero(false);
Tip
ユーザ･コードでは、これらの関数や、ImageProgressクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 imageProgress1.invalidate() を呼び出して、再描画を行う必要があることを忘れないでください。

ユーザ･コード​

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

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    bool increase = true;
};
Screen1View.cpp
void Screen1View::handleTickEvent()
{
    int currentValue = imageProgress.getValue();
    int16_t max;
    int16_t min;
    imageProgress.getRange(min, max);

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

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

    imageProgress.setValue(nextValue);
}

TouchGFX Designerの例​

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

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

API参照​

Further reading
  • ImageProgressクラスのAPI参照