web-dev-qa-db-ja.com

アンドロイドで円形のProgressBarを作成する方法？

Google Fitアプリケーションのように円形のプログレスバーを作成する方法をご存知ですか。下の画像のように。

enter image description here

androidandroid-progressbar
150
Mohamed

この Circle Progress ライブラリを試すことができます

enter image description here

enter image description here

注意：プログレスビューには常に同じ幅と高さを使用してください

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"/>
126
Top Cat

これを自分で作るのは簡単です

あなたのレイアウトには、特定のドロウアブルを持つ以下の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 AP​​Iレベル<21）

   <shape
        Android:innerRadiusRatio="2.3"
        Android:shape="ring"
        Android:thickness="3.8sp" >
        <solid Android:color="@color/yourColor" />
   </shape>

circular（> = Lollipop OR AP​​Iレベル> = 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上記の例とは異なり、滑らかなアニメーションが得られます。

334
Murtaza Khursheed Hussain