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

Box Progress（ボックス･プログレス）

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

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

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

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

TouchGFX DesignerのBox Progress

プロパティ​

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

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

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

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

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

Progressは、進捗ボックスの色を設定します。
Progress PositionXおよびY座標は、進捗インジケータの位置を基準として進捗ボックスの左上隅の位置を指定します。

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

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

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

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

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

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

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

インタラクション​

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

アクション​

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

トリガ​

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

パフォーマンス​

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

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

例​

生成済みコード​

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

Screen1ViewBase.cpp
boxProgress.setXY(148, 126);
boxProgress.setProgressIndicatorPosition(2, 2, 180, 16);
boxProgress.setRange(0, 100);
boxProgress.setDirection(touchgfx::AbstractDirectionProgress::RIGHT);
boxProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_PROGRESS_INDICATOR_BG_SQUARE_0_DEGREES_ID));
boxProgress.setColor(touchgfx::Color::getColorFromRGB(0, 151, 255));
boxProgress.setValue(0);

ユーザ･コード​

次の例は、進捗をシミュレーションするために、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 = boxProgress.getValue();
    int16_t max;
    int16_t min;
    boxProgress.getRange(min, max);

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

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

    boxProgress.setValue(nextValue);
}```
 currentValue+1 : currentValue-1; boxProgress.setValue(nextValue); } </code></pre>

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

### TouchGFX Designerの例 {#touchgfx-designer-examples}

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

<Figure imageSource="/img/development/ui-development/ui-templates/progress-indicator-example-v4.17.webp">TouchGFX DesignerのProgress Indicator Example UIテンプレート</Figure>

## API参照 {#api-reference}

<FurtherReading>
  <li>
    <Link to="../../../../api/classes/classtouchgfx_1_1_box_progress">BoxProgressクラスのAPI参照</Link>
  </li>
</FurtherReading>