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>

and I have used this drawable for ProgressBar in my layout using the following code

  <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);

(Используется вторичный прогресс, потому что зеленый цвет должен располагаться поверх черного цвета кольца.)

Это рисует круг ProgressBar, начальная позиция которого находится справа (0°), как показано на следующем изображении.

введите здесь описание изображения

Я хочу, чтобы прогресс начинался сверху, как показано на следующем рисунке.

введите здесь описание изображения

Я попытался поместить android:angle="270" в тег градиента drawable xml, но не повезло. Есть ли способ начать угол развертки сверху?


person Rajkiran    schedule 23.04.2014    source источник


Ответы (6)


Попробуйте указать градусы поворота для элементов прогресса.

<?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>    
person Zeba    schedule 23.04.2014
comment
Спасибо. После некоторых экспериментов я обнаружил, что мне нужно fromDegress и toDegrees установить на 270, чтобы он не вращался и начинался сверху. - person Rajkiran; 23.04.2014
comment
Вы можете просто установить вращение для вторичного элемента Progress, нет необходимости в первом. Но все равно спасибо, я боролся с этим. - person RexSplode; 12.02.2019
comment
Могу ли я установить начальный угол в ProgressBar? - person lightning mcqueen; 13.10.2019

Вы также можете применить поворот к вашему ProgressBar в макете XML. В вашем случае -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" />
person Bojan Kseneman    schedule 08.02.2015

Вот как я сделал круглый индикатор выполнения с процентами внутри круга в чистом коде без какой-либо библиотеки.

Ссылка взята отсюда: круговой индикатор выполнения android

введите здесь описание изображения

сначала создайте файл для рисования с именем 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 я использовал одно круглое изображение с белым фоном, чтобы показать белый фон в процентах. Вот изображение:

введите здесь описание изображения

Вы можете изменить цвет этого изображения, чтобы установить собственный цвет вокруг текста в процентах.

Теперь, наконец, добавьте следующий код в 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

person Parsania Hardik    schedule 11.05.2016
comment
Чувак, зачем тебе вообще эта белая картинка? Разве принятый ответ не решил вашу проблему? - person Rajkiran; 11.05.2016

Благодаря @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>

person Rajkiran    schedule 23.04.2014
comment
Используя точно такой же учебник. Как вы справились с проблемой краха всего этого, когда вы устанавливаете вторичный прогресс на 100% / каким бы ни было максимальное значение? - person Sinmok; 24.04.2014
comment
в чем именно проблема?: Я не вижу никаких проблем, даже если прогресс или вторичный прогресс достигает 100%. Максимум для меня только 100. - person Rajkiran; 25.04.2014
comment
К сожалению, это оказалось ошибкой в ​​Android Studio, а не проблемой кода. - person Sinmok; 25.04.2014

Более простое решение, которое я нашел, - это повернуть представление на 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>
person ProBul    schedule 03.10.2016

Простое решение для поворота любого вида на некоторый угол — поворот в 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" />
person Sharath kumar    schedule 16.06.2017