Как создать круговой индикатор выполнения (круговая диаграмма), как индикатор - Android

Ответ 1

Вы можете создать пользовательский вид (например, PieProgressView) или пользовательский Drawable (например, PieProgressDrawable). Я взял подход к пользовательскому представлению, но либо совершенно жизнеспособный.

Быстрый взгляд на источник для Android ProgressView дает невероятно сложную реализацию. Очевидно, они покрывают все их базы, но вам не нужно писать что-то такое сложное. Нам действительно нужны только две вещи:

• Член, чтобы отслеживать текущий прогресс.
• Метод рисования пирога на основе текущего прогресса.

Номер один прост, просто держите поле участника, которое отслеживает текущий процент пирога, чтобы рисовать. Номер 2 немного сложнее, но, к счастью, мы можем сделать это со стандартными методами рисования Canvas.

Удобно, что Android Canvas класс предоставляет drawArc(). Вы можете использовать это, чтобы получить эффект пирога. Предполагая, что мы сохранили наш процент в поле члена, называемом mPercent, как float между 0 и 1, метод onDraw() может выглядеть следующим образом:

@Override
protected void onDraw(Canvas canvas) {

    final float startAngle = 0f;
    final float drawTo = startAngle + (mPercent * 360);

    // Rotate the canvas around the center of the pie by 90 degrees
    // counter clockwise so the pie stars at 12 o'clock.
    canvas.rotate(-90f, mArea.centerX(), mArea.centerY());
    canvas.drawArc(mArea, startAngle, drawTo, true, mPaint);

    // Draw inner oval and text on top of the pie (or add any other
    // decorations such as a stroke) here..
    // Don't forget to rotate the canvas back if you plan to add text!
    ...
}

Здесь, как выглядит готовое представление в примерном приложении:

Edit

После публикации я решил, что нет причин, по которым вам нужно реализовать пользовательский вид. Вы можете просто использовать свойство drawable и it level, чтобы сделать именно то, что необходимо. Я создал gist с полным рисунком.

Ответ 2

Сэкономьте некоторое время и до повторного создания колеса (или индикатора прогресса), проверьте, работает ли в http://github.com/Sage42/AndroidViewUtils вы. Просто добавьте его в свой проект и получайте удовольствие. Он настраивается и предлагает опции для подсчета или подсчета вниз.

Я забыл добавить, что изображения выглядят почти так же, как образ образца из вашего вопроса.

Ответ 3

Попробуйте этот фрагмент кода, чтобы создать круговой индикатор выполнения (круговая диаграмма). передайте его целочисленное значение, чтобы нарисовать, сколько процентов площади заполнения.:)

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

Ответ 4

Для круговой шкалы выполнения используйте:

style="?android:attr/progressBarStyle"

Более подробную информацию можно найти здесь: В чем смысл атрибута android: progressBarStyle в ProgressBar?

Что касается настройки его хода: круговой индикатор выполнения продолжает вращаться. Просто спрячьте его после того, как он больше не нужен.

Или вы можете реализовать что-то пользовательское: покажите TextView рядом с ним и обновите его, а не используйте Progressbar.setProgress.

Step 0: setText("0%");
Step 1 (2 seconds later): setText("3%");
Step 2 (4 seconds later): setText("9%"); etc.

Ответ 5

Даже если это старый вопрос, я надеюсь, что этот ответ может помочь будущим зрителям.

Посмотрите эту библиотеку - https://github.com/lzyzsd/CircleProgress

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