Как создать круговую панель прогресса в Android, которая вращается на ней?

Я пытаюсь создать округленный индикатор прогресса. Это то, чего я хочу достичь.

Существует серое цветное фоновое кольцо. Вдобавок к этому появляется индикатор прогресса синего цвета, который перемещается по круговой траектории от 0 до 360 в 60 или любое количество секунд.

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

Вот мой примерный код.

 

Чтобы сделать это, в drawable progressBarBG, я создаю список слоев и внутри этого списка слоев я даю два элемента, как показано.

              

Теперь первое серое кольцо генерируется отлично. Тем не менее, синее кольцо начинается слева от выталкиваемого и направляется вправо, точно так же, как работает линейная панель прогресса. Это показывает, что он показывает 50% прогресса с красной стрелкой цвета, показывающей направление.

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

Я хочу переместить синий индикатор прогресса по круговой траектории, как ожидалось.

Вот мое два решения.

Короткий ответ:

Вместо создания layer-list я разделил его на два файла. Один для ProgressBar и один для своего фона.

Это файл ProgressDrawable (папка @drawable): circle_progress_bar.xml

       1       

И это для его background (папка @drawable): circle_shape.xml

     1     

И в конце, внутри макета, над которым вы работаете:

  

Вот результат:

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

Длительный ответ:

Подclass classа View, пользовательский вид

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

Вот полный проект по github

Я сделал с легким способом:

Пожалуйста, проверьте скриншот за то же самое.

CustomProgressBarActivity.java :

 public class CustomProgressBarActivity extends AppCompatActivity { private TextView txtProgress; private ProgressBar progressBar; private int pStatus = 0; private Handler handler = new Handler(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_custom_progressbar); txtProgress = (TextView) findViewById(R.id.txtProgress); progressBar = (ProgressBar) findViewById(R.id.progressBar); new Thread(new Runnable() { @Override public void run() { while (pStatus <= 100) { handler.post(new Runnable() { @Override public void run() { progressBar.setProgress(pStatus); txtProgress.setText(pStatus + " %"); } }); try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); } pStatus++; } } }).start(); } } 

activity_custom_progressbar.xml :

       

custom_progressbar_drawable.xml :

       

Надеюсь, что это поможет вам.

Я написал подробный пример о круговом индикаторе прогресса в android здесь, на моем блоге demonuts.com . Вы также можете любить полный исходный код и объяснять там.

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

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

сначала создайте растягиваемый файл, называемый circular.xml

                 

Теперь в вашем activity_main.xml добавьте следующее:

        

В 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

Я понял библиотеку с открытым исходным кодом на GitHub CircularProgressBar, которая делает именно то, что вы хотите простейшим способом:

Демо-версия Gif CircularProgressBar

ПРИМЕНЕНИЕ

Чтобы сделать круговой ProgressBar, добавьте CircularProgressBar в свой макет XML и добавьте библиотеку CircularProgressBar в свой проектор, или вы также можете захватить его через Gradle:

 compile 'com.mikhaellopez:circularprogressbar:1.0.0' 

XML

  

Вы должны использовать следующие свойства в своем XML, чтобы изменить CircularProgressBar.

Свойства:

  • app:progress (integer) >> default 0
  • app:progressbar_color (цвет) >> default BLACK
  • app:background_progressbar_color (цвет) >> по умолчанию GREY
  • app:progressbar_width (измерение) >> default 7dp
  • app:background_progressbar_width (измерение) >> default 3dp

ЯВА

 CircularProgressBar circularProgressBar = (CircularProgressBar)findViewById(R.id.yourCircularProgressbar); circularProgressBar.setColor(ContextCompat.getColor(this, R.color.progressBarColor)); circularProgressBar.setBackgroundColor(ContextCompat.getColor(this, R.color.backgroundProgressBarColor)); circularProgressBar.setProgressBarWidth(getResources().getDimension(R.dimen.progressBarWidth)); circularProgressBar.setBackgroundProgressBarWidth(getResources().getDimension(R.dimen.backgroundProgressBarWidth)); int animationDuration = 2500; // 2500ms = 2,5s circularProgressBar.setProgressWithAnimation(65, animationDuration); // Default duration = 1500ms 

Вилка или Загрузить эту библиотеку здесь >> https://github.com/lopspower/CircularProgressBar

Я новичок, поэтому не могу прокомментировать, но решил поделиться ленивым исправлением. Я также использовал оригинальный подход Педрама и просто столкнулся с тем же вопросом Lollipop. Но у alanv в другом посте была исправлена ​​одна строка. Его некоторая ошибка или надзор в API21. Буквально просто добавьте android:useLevel="true" к вашему кругу progress xml. Новый подход Педрама по-прежнему является правильным решением, но я просто подумал, что я разделяю ленивое решение.

https://github.com/passsy/android-HoloCircularProgressBar – один из примеров библиотеки, которая делает это. Как заявила Tenfour04, это должно быть несколько обычным, поскольку это не поддерживается непосредственно из коробки. Если эта библиотека не ведет себя так, как вы хотите, вы можете ее разветвить и изменить детали, чтобы они работали по вашему вкусу. Если вы реализуете что-то, что другие могут повторно использовать, вы даже можете отправить запрос на получение, чтобы вернуть его обратно!

попробуйте этот метод для создания растрового изображения и установите его в режим просмотра изображений.

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

@Pedram, ваше старое решение работает на самом деле отлично и в леденец (и лучше, чем новое, поскольку оно используется повсеместно, в том числе в удаленных представлениях) просто измените код circular_progress_bar.xml на это:

        1        
 package com.example.ankitrajpoot.myapplication; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ProgressBar; public class MainActivity extends Activity { private ProgressBar spinner; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); spinner=(ProgressBar)findViewById(R.id.progressBar); spinner.setVisibility(View.VISIBLE); } } 

XML

            

+ Изменить

 android:useLevel="false" 

в

 android:useLevel="true" 

для второго sahpe с id="@android:id/progress

надеюсь, что это работает

Interesting Posts

См. Доступные диски из Windows CLI?

Как я могу записать фильм с субтитрами?

Если утверждение с сопоставлением строк не выполняется

Как отправить запрос HTTPS через прокси-сервер в Java?

MySQL: ОШИБКА 1227 (42000): доступ запрещен – невозможно СОЗДАТЬ ПОЛЬЗОВАТЕЛЯ

Совместное использование принтера Windows 7 без домашних групп?

Как создать образ диска VHD из живой системы Linux?

Как использовать несколько учетных записей SkyDrive на одном компьютере?

Тип выборки по умолчанию для одного-к-одному, много-к-одному и один-ко-многим в спящем режиме

Как добавить описание в столбцы в коде Entity Framework 4.3 с использованием миграции?

Spring не может найти конфигурационный файл bean xml, если он существует

Использование alloc init вместо нового

Как удалить повторяющиеся текстовые строки из файлов размером более 4 ГБ?

Токенизация строки, но игнорирование разделителей в кавычках

Случайные числа, которые добавляют к 100: Matlab

Давайте будем гением компьютера.