Cómo crear barra de progreso circular (gráfico circular) como indicador - Android

Question

Ahora tengo una barra de progreso horizontal que se actualiza mediante programación a través de ProgressBarsetProgress método:

<ProgressBar 
      style="@android:style/Widget.ProgressBar.Horizontal" 
      android:layout_width="0dip" 
      android:layout_weight="1" 
      android:layout_height="20dip" 
      android:id="@+id/progressbar" 
      > 
    </ProgressBar> 

¿Hay una manera de convertir esta barra de progreso para un círculo (gráfico circular) y también para poder actualizar el progreso programáticamente?

ejemplo de lo que quiero:

Answer 1

Para una circular barra de progreso, utilice:

style="?android:attr/progressBarStyle" 

Más detalles se pueden encontrar aquí: What's the meaning of android:progressBarStyle attribute in ProgressBar?

En cuanto a la configuración de su Progreso: la barra de progreso circular seguirá girando. Simplemente ocúltalo cuando ya no sea necesario.

O podría implementar algo personalizado: mostrar un TextView junto a él y actualizarlo en lugar de utilizar Progressbar.setProgress.

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

Answer 2

Usted puede hacer una vista personalizada (por ejemplo PieProgressView) o una Disponibles personalizada (por ejemplo PieProgressDrawable). Tomé el enfoque de vista personalizada, pero tampoco es perfectamente viable.

Un vistazo rápido a la fuente de Android ProgressView produce una implementación tremendamente compleja. Obviamente, están cubriendo todas sus bases, pero no tienes que escribir algo tan complejo. Realmente solo necesitamos dos cosas:

1. Un miembro para realizar un seguimiento del progreso actual.
2. Un método para dibujar el gráfico basado en el progreso actual.

El número uno es fácil, simplemente mantenga un campo de miembro que rastree el porcentaje actual del pastel para dibujar. El número 2 es un poco más complicado pero, afortunadamente, podemos hacerlo con los métodos de dibujo estándar de Canvas.

Convenientemente, la clase Canvas de Android proporciona un método drawArc(). Puede usar esto para obtener su efecto Pie. Suponiendo que guardaron el porcentaje en un campo miembro de llamada mPercent como un flotador entre 0 y 1, un método onDraw() podría tener este aspecto:

@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! 
    ... 
} 

Esto es lo que la vista completado ve como en una aplicación de ejemplo:

Editar

Desde la publicación, he decidido realmente no hay re Cuando necesite implementar una vista personalizada. Simplemente puede usar una propiedad dibujable y de nivel para hacer exactamente lo que se necesita.Hice un gist with the full drawable.

Answer 3

Ahórrese un tiempo y antes de reinventar la rueda (o el indicador de progreso), verifique si el que está en http://github.com/Sage42/AndroidViewUtils le conviene. Solo agrégalo a tu proyecto y diviértete. Es personalizable y ofrece opciones para conteo regresivo o conteo regresivo también.

Olvidé agregar que las imágenes se ven casi exactamente como la imagen de muestra de su pregunta.

Answer 4

Pruebe esta pieza de código para crear una barra de progreso circular (gráfico circular). pase su valor entero para dibujar el porcentaje del área de llenado. :)

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

Answer 5

Aunque es una vieja pregunta, espero que esta respuesta pueda ayudar a los futuros espectadores.

Salida esta biblioteca - https://github.com/lzyzsd/CircleProgress

Para un simple progreso circular, dinámica o estática, este lib es bastante sencillo y tiene muchos atributos para una fácil personalización (como el grosor del trazo, ángulo inicial, el fondo interior, el color del texto, etc.) Para la interfaz de usuario que OP quería lograr, esta biblioteca sería perfecta.