web-dev-qa-db-ja.com

Android：上から円形の進行状況バーを開始（270°）

次のドロウアブル"ciruclar_progress_bar.xml"を使用して円形の進行状況バーを定義しました

<?xml version="1.0" encoding="utf-8"?>

<item Android:id="@Android:id/progress">
    <shape
        Android:innerRadiusRatio="2.5"
        Android:shape="ring"
        Android:thicknessRatio="25.0" >
        <gradient
            Android:centerColor="@color/gray"
            Android:endColor="@color/gray"
            Android:startColor="@color/gray"
            Android:type="sweep" />
    </shape>
</item>
<item Android:id="@Android:id/secondaryProgress">
    <shape
        Android:innerRadiusRatio="2.5"
        Android:shape="ring"
        Android:thicknessRatio="25.0" >
        <gradient
            Android:centerColor="@color/green"
            Android:endColor="@color/green"
            Android:startColor="@color/green"
            Android:type="sweep" />
    </shape>
</item>

次のコードを使用して、レイアウトのProgressBarにこのドロウアブルを使用しました

  <ProgressBar
            Android:id="@+id/progressWheel"
            style="?android:attr/progressBarStyleHorizontal"
            Android:layout_width="152dp"
            Android:layout_height="152dp"
            Android:layout_centerInParent="true"
            Android:progress="100"
            Android:indeterminate="false"
            Android:progressDrawable="@drawable/circular_progress_bar" />

次のコードを使用して、ProgressBarの進行状況を表示しました

progressWheel.setSecondaryProgress(percent);

（緑色がリングの黒色の上に来るはずなので、二次進行を使用しました。）

次の図に示すように、開始位置が右（0°）である円形ProgressBarを描画します

enter image description here

次の図に示すように、進行状況を上から始めたい

enter image description here

Android:angle="270"をdrawable xmlのgradientタグに入れてみましたが、運がありませんでした。スイープ角度を上から開始する方法はありますか？

androidandroid-custom-viewandroid-progressbar
29
Rajkiran

進行状況アイテムに回転角度を指定してみてください。

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:id="@Android:id/progress">
        <rotate
            Android:fromDegrees="270"
            Android:toDegrees="270"
            Android:pivotX="50%"
            Android:pivotY="50%" >
            <shape
                Android:innerRadiusRatio="2.5"
                Android:shape="ring"
                Android:thicknessRatio="25.0" >
                <gradient
                    Android:centerColor="@color/gray"
                    Android:endColor="@color/gray"
                    Android:startColor="@color/gray"
                    Android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item Android:id="@Android:id/secondaryProgress">
        <rotate
            Android:fromDegrees="270"
            Android:toDegrees="270"
            Android:pivotX="50%"
            Android:pivotY="50%" >
            <shape
                Android:innerRadiusRatio="2.5"
                Android:shape="ring"
                Android:thicknessRatio="25.0" >
                <gradient
                    Android:centerColor="@color/green"
                    Android:endColor="@color/green"
                    Android:startColor="@color/green"
                    Android:type="sweep" />
            </shape>
        </rotate>
    </item>
</layer-list>
31
Zeba

レイアウトXMLでProgressBarに回転を適用することもできます。あなたの場合、-90°が問題を解決します。

    <ProgressBar
        Android:id="@+id/progressDemo"
        style="?android:attr/progressBarStyleHorizontal"
        Android:layout_width="152dp"
        Android:layout_height="152dp"
        Android:layout_centerInParent="true"
        Android:indeterminate="false"
        Android:progress="10"
        Android:rotation="-90"
        Android:progressDrawable="@drawable/circular_progress_bar" />
24
Bojan Kseneman

ライブラリなしの純粋なコードで円の内側にパーセンテージを表示した円形のプログレスバーを作成した方法を次に示します。

参照はここから取られます： 円形の進行状況バーAndroid

enter image description here

最初にcircular.xmlという名前の描画可能なファイルを作成します

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/secondaryProgress">
        <shape
            Android:innerRadiusRatio="6"
            Android:shape="ring"
            Android:thicknessRatio="20.0"
            Android:useLevel="true">


            <gradient
                Android:centerColor="#999999"
                Android:endColor="#999999"
                Android:startColor="#999999"
                Android:type="sweep" />
        </shape>
    </item>

    <item Android:id="@Android:id/progress">
        <rotate
            Android:fromDegrees="270"
            Android:pivotX="50%"
            Android:pivotY="50%"
            Android:toDegrees="270">

            <shape
                Android:innerRadiusRatio="6"
                Android:shape="ring"
                Android:thicknessRatio="20.0"
                Android:useLevel="true">


                <rotate
                    Android:fromDegrees="0"
                    Android:pivotX="50%"
                    Android:pivotY="50%"
                    Android:toDegrees="360" />

                <gradient
                    Android:centerColor="#00FF00"
                    Android:endColor="#00FF00"
                    Android:startColor="#00FF00"
                    Android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

activity_main.xmlに以下を追加します：

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        Android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        Android:layout_width="250dp"
        Android:layout_height="250dp"
        Android:indeterminate="false"
        Android:max="100"
        Android:progress="50"
        Android:layout_centerInParent="true"
        Android:progressDrawable="@drawable/circular"
        Android:secondaryProgress="100"
        />

    <ImageView
        Android:layout_width="90dp"
        Android:layout_height="90dp"
        Android:background="@drawable/whitecircle"
        Android:layout_centerInParent="true"/>

    <TextView
        Android:id="@+id/tv"
        Android:layout_width="250dp"
        Android:layout_height="250dp"
        Android:gravity="center"
        Android:text="25%"
        Android:layout_centerInParent="true"
        Android:textColor="@color/colorPrimaryDark"
        Android:textSize="20sp" />

</RelativeLayout>

activity_main.xmlでは、白い背景の円形画像を1つ使用して、パーセンテージで白い背景を表示しています。これが画像です：

enter image description here

この画像の色を変更して、パーセントテキストの周囲にカスタム色を設定できます。

最後に、次のコードをMainActivity.Javaに追加します。

import Android.content.res.Resources;
import Android.graphics.drawable.Drawable;
import Android.os.Handler;
import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.animation.DecelerateInterpolator;
import Android.widget.ProgressBar;
import Android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (pStatus < 100) {
                    pStatus += 1;

                    handler.post(new Runnable() {

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

水平プログレスバーを作成したい場合は、次のリンクをたどってください。ソースコードに関する多くの貴重な例があります。
http://www.skholingua.com/Android-basic/user-interface/form-widgets/progressbar

6
Parsania Hardik

@Zebaに感謝します。同じ問題を抱えている人のために更新されたcircular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>

<item Android:id="@Android:id/progress">
        <shape
            Android:innerRadiusRatio="2.5"
            Android:shape="ring"
            Android:thicknessRatio="25.0" >
            <gradient
                Android:angle="120"
                Android:centerColor="@color/gray"
                Android:endColor="@color/gray"
                Android:startColor="@color/gray"
                Android:type="sweep" />
        </shape>
</item>
<item Android:id="@Android:id/secondaryProgress">
    <rotate
        Android:fromDegrees="270"
        Android:pivotX="50%"
        Android:pivotY="50%"
        Android:toDegrees="270" >
        <shape
            Android:innerRadiusRatio="2.5"
            Android:shape="ring"
            Android:thicknessRatio="25.0" >
            <gradient
                Android:angle="120"
                Android:centerColor="@color/green"
                Android:endColor="@color/green"
                Android:startColor="@color/green"
                Android:type="sweep" />
        </shape>
    </rotate>
</item>
5
Rajkiran

私が見つけたより簡単な解決策は、ビューを270度回転し、内側のテキストを透明に設定し、データを含む円形のプログレスバーの上に新しいTextViewを設定することです-

<FrameLayout
    Android:id="@+id/linearLayout5"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <com.github.lzyzsd.circleprogress.DonutProgress
        Android:id="@+id/donut_progress_lodging"
        Android:layout_width="90dp"
        Android:layout_height="90dp"
        Android:layout_gravity="left|top"
        Android:layout_marginLeft="30dp"
        app:donut_text_color="@color/tw__transparent"
        Android:rotation="270"
        app:donut_finished_color="#34c6f1"
        app:donut_finished_stroke_width="5dp"
        app:donut_unfinished_color="#276894"
        app:donut_unfinished_stroke_width="5dp" />

  <TextView
        Android:layout_width="40dp"
        Android:layout_height="wrap_content"
        Android:text="0%"
        Android:textColor="#ffffff"
        Android:layout_marginLeft="55dp"
        Android:layout_marginBottom="10dp"
        Android:textAlignment="center"
        Android:id="@+id/textView_percentage_lodging"
        Android:layout_gravity="left|center_vertical" />

</FrameLayout>
1
ProBul

ある角度だけビューを回転させる簡単な解決策は、XMLで回転させることです。

<ProgressBar
      Android:id="@+id/progress_bar"
      style="?android:attr/progressBarStyleHorizontal"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:max="100"
      Android:progress="0"
      Android:rotation="-90"
      Android:progressDrawable="@drawable/circular" />
0
sharath kumar