Google Fitアプリケーションのように円形のプログレスバーを作成する方法をご存知ですか。下の画像のように。
この Circle Progress ライブラリを試すことができます
注意:プログレスビューには常に同じ幅と高さを使用してください
DonutProgress:
<com.github.lzyzsd.circleprogress.DonutProgress
Android:id="@+id/donut_progress"
Android:layout_marginLeft="50dp"
Android:layout_width="100dp"
Android:layout_height="100dp"
custom:circle_progress="20"/>
CircleProgress:
<com.github.lzyzsd.circleprogress.CircleProgress
Android:id="@+id/circle_progress"
Android:layout_marginLeft="50dp"
Android:layout_width="100dp"
Android:layout_height="100dp"
custom:circle_progress="20"/>
ArcProgress:
<com.github.lzyzsd.circleprogress.ArcProgress
Android:id="@+id/arc_progress"
Android:background="#214193"
Android:layout_marginLeft="50dp"
Android:layout_width="100dp"
Android:layout_height="100dp"
custom:arc_progress="55"
custom:arc_bottom_text="MEMORY"/>
これを自分で作るのは簡単です
あなたのレイアウトには、特定のドロウアブルを持つ以下のProgressBar
を含めます(代わりに寸法から幅を得るべきです)。ここで最大値が重要です。
<ProgressBar
Android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
Android:layout_width="150dp"
Android:layout_height="150dp"
Android:layout_alignParentBottom="true"
Android:layout_centerHorizontal="true"
Android:max="500"
Android:progress="0"
Android:progressDrawable="@drawable/circular" />
次の形であなたのリソースにdrawableを作成しましょう。半径(innerRadius
の代わりにinnerRadiusRatio
を使用することができます)と厚さの値を試してください。
循環型(Pre Lollipop OR APIレベル<21)
<shape
Android:innerRadiusRatio="2.3"
Android:shape="ring"
Android:thickness="3.8sp" >
<solid Android:color="@color/yourColor" />
</shape>
circular(> = Lollipop OR APIレベル> = 21)
<shape
Android:useLevel="true"
Android:innerRadiusRatio="2.3"
Android:shape="ring"
Android:thickness="3.8sp" >
<solid Android:color="@color/yourColor" />
</shape>
APIレベル21(Lollipop)では、デフォルトでuseLevelは "false"です。
アニメーション開始
次にコードの中でObjectAnimator
を使ってレイアウトのProgessBar
のprogressフィールドをアニメートします。
ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();
アニメーション停止
progressBar.clearAnimation();
P.S上記の例とは異なり、滑らかなアニメーションが得られます。