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

Circle Progress（サークル･プログレス）

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

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

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

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

TouchGFX DesignerのCircle Progress

プロパティ​

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

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

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

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

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

Progressは、サークルの塗りつぶしに使用する色または画像を指定します。
ValuesRange MinおよびRange Maxは、インジケータの最小および最大整数値を指定します。

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

Steps Minは、進捗インジケータが示す最小ステップ数を指定します。
AppearanceCenter Position XおよびCenter Position Yは、親のCircle Progressを基準として進捗サークルの中心位置を指定します。

Start & End Angleは、描画するサークルの開始角度と終了角度を指定します。

Radiusは、進捗サークルのサイズを指定します。

Line Widthは、進捗サークルのライン幅を指定します。 この値が0の場合、進捗サークルは半径（Radius）と同じ大きさになります。 そうでない場合、ここで指定する幅によって、外側から内側に向かう進捗サークルの幅が設定されます。

Cap Styleは、ラインの末尾のスタイルを指定します。

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

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

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

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

インタラクション​

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

アクション​

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

トリガ​

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

パフォーマンス​

Circle Progressはサークルとバックグラウンド画像で構成されます。 サークルはCanvasWidgetに基づくので、描画ではマイクロコントローラに大きく依存します。 このため、Circle Progressは、ほとんどのプラットフォーム上で要求の厳しいウィジェットであると見なされます。

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

例​

生成済みコード​

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

Screen1ViewBase.cpp
circleProgress.setXY(188, 84);
circleProgress.setProgressIndicatorPosition(0, 0, 104, 104);
circleProgress.setRange(0, 100);
circleProgress.setCenter(52, 52);
circleProgress.setRadius(50);
circleProgress.setLineWidth(0);
circleProgress.setStartEndAngle(0, 360);
circleProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_CIRCLE_INDICATOR_BG_FULL_ID));
circleProgressPainter.setBitmap(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_FILL_MEDIUM_CIRCLE_INDICATOR_FILL_FULL_ID));
circleProgress.setPainter(circleProgress1Painter);
circleProgress.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 = circleProgress.getValue();
    int16_t max;
    int16_t min;
    circleProgress.getRange(min, max);

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

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

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

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

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

Circle 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_circle_progress">CircleProgressクラスのAPI参照</Link>
  </li>
</FurtherReading>