web-dev-qa-db-ja.com

インジケーターのような円形のプログレスバー（円グラフ）を作成する方法-Android

これで、ProgressBarsetProgressメソッドを介してプログラムで更新される水平プログレスバーができました。

<ProgressBar
            style="@Android:style/Widget.ProgressBar.Horizontal"
            Android:layout_width="0dip"
            Android:layout_weight="1"
            Android:layout_height="20dip"
            Android:id="@+id/progressbar"
            >
    </ProgressBar>

この進行状況バーを円（円グラフ）に変換し、プログラムで進行状況を更新できるようにする方法はありますか？

私が欲しいものの例：

androidandroid-progressbar
15
Paul

カスタムビュー（例：PieProgressView）またはカスタムドローアブル（例：PieProgressDrawable）のいずれかを作成できます。私はカスタムビューアプローチを採用しましたが、どちらも完全に実行可能です。

Androidのソースをざっと見ると ProgressView は、非常に複雑な実装になります。明らかに、彼らはすべての基盤をカバーしていますが、それほど複雑なものを書く必要はありません。本当に必要なのは2つだけです。

  1. 現在の進捗状況を追跡するメンバー。
  2. 現在の進捗状況に基づいてパイを描く方法。

一番は簡単です。描画するパイの現在の割合を追跡するメンバーフィールドを保持するだけです。 2番目はもう少し複雑ですが、幸いなことに、標準のCanvas描画方法でそれを行うことができます。

便利なことに、Androidの Canvas クラスは drawArc（） メソッドを提供します。これを使用して、Pie効果を得ることができます。パーセンテージをmPercentというメンバーフィールドに0と1の間の浮動小数点数として格納したとすると、onDraw()メソッドは次のようになります。

@Override
protected void onDraw(Canvas canvas) {

    final float startAngle = 0f;
    final float drawTo = startAngle + (mPercent * 360);

    // Rotate the canvas around the center of the pie by 90 degrees
    // counter clockwise so the pie stars at 12 o'clock.
    canvas.rotate(-90f, mArea.centerX(), mArea.centerY());
    canvas.drawArc(mArea, startAngle, drawTo, true, mPaint);

    // Draw inner oval and text on top of the pie (or add any other
    // decorations such as a stroke) here..
    // Don't forget to rotate the canvas back if you plan to add text!
    ...
}

サンプルアプリで完成したビューは次のようになります。

PieProgressView in action!

編集

投稿してから、カスタムビューを実装する必要がある理由は本当にないと判断しました。ドローアブルとそのlevelプロパティを使用するだけで、必要なことを正確に実行できます。 完全なドローアブルの要点 を作成しました。

20
dcow

時間を節約し、ホイール（または進行状況インジケーター）を再発明する前に、 http://github.com/Sage42/AndroidViewUtils にあるものが機能するかどうかを確認してください。プロジェクトに追加して楽しんでください。カスタマイズ可能で、カウントアップまたはカウントダウンのオプションも提供します。

ビジュアルが質問のサンプル画像とほぼ同じに見えることを付け加えるのを忘れました。

3
asiby

このコードを試して、円形のプログレスバー（円グラフ）を作成してください。整数値を渡して、塗りつぶし領域の何パーセントを描画します。 :)

private void circularImageBar(ImageView iv2, int i) {

    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        Paint.setColor(Color.parseColor("#c4c4c4"));
        Paint.setStrokeWidth(10);
        Paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, Paint);
        Paint.setColor(Color.parseColor("#FFDB4C"));
        Paint.setStrokeWidth(10);   
        Paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        Paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);
        canvas.drawArc(oval, 270, ((i*360)/100), false, Paint);
        Paint.setStrokeWidth(0);    
        Paint.setTextAlign(Align.CENTER);
        Paint.setColor(Color.parseColor("#8E8E93")); 
        Paint.setTextSize(140);
        canvas.drawText(""+i, 150, 150+(Paint.getTextSize()/3), Paint); 
        iv2.setImageBitmap(b);
}
2
mani

古い質問ですが、この回答が将来の視聴者に役立つことを願っています。

このライブラリをチェックしてください- https://github.com/lzyzsd/CircleProgress

動的または静的の単純な循環進行の場合、このlibは非常に単純で、簡単にカスタマイズできる多くの属性（ストローク幅、開始角度、背景の内側、テキストの色など）があります。 OPが実現したいUIには、このライブラリが最適です。

Circular progress sample image

0
abhiank

円形のプログレスバーの場合は、次を使用します。

style="?android:attr/progressBarStyle"

詳細については、こちらをご覧ください： ProgressBarのAndroid：progressBarStyle属性の意味は何ですか？

プログレスの設定については、円形のプログレスバーが回転し続けます。不要になったら非表示にするだけです。

またはカスタムを実装できます。Progressbar.setProgressを使用する代わりに、その横にTextViewを表示して更新します。

Step 0: setText("0%");
Step 1 (2 seconds later): setText("3%");
Step 2 (4 seconds later): setText("9%"); etc.
0
Buffalo