2012-01-06 12 views
6

Quiero hacer una barra de progreso vertical en el androide mientras se realiza una acción en particular. El progreso debe comenzar desde el primer ícono y finalizar en el icono final que muestra el progreso constante. No puedo encontrar una manera de hacerlo.barra de progreso vertical en Android

si cualquier cuerpo puede ayudar a conseguir un pie en la puerta. Estaré muy agradecido.

+1

posible duplicado de [Android - estableció un ProgressBar para ser una barra vertical en lugar de horizontal] (http://stackoverflow.com/questions/3926395/android-set-a-progressbar-to- BE-a-vertical de la barra, en lugar de horizontal) –

+3

en realidad no es un duplicado de eso en absoluto. –

Respuesta

14

Es un poco difícil de decir la transición que está intentando tratar entre estas dos imágenes. Por lo que desea comenzar con la imagen B/W, pero lo hace de transición de B/W de color por un fundido cruzado, o te lentamente desea aplicar piezas de la imagen en color de abajo hacia arriba sobre el B/pieza W?

Si éste es su elección, entonces su imagen real comprenderá de dos dibujables juntos dentro de una <layer-list>. Una estática y la otra representando un ClipDrawable que revelará una parte de la imagen en color en función de su valor de nivel. Por ejemplo, cree un archivo XML:

res/estirable/progress_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item> 
    <bitmap android:src="@drawable/ic_launcher_bw"/> 
    </item> 
    <item> 
    <clip 
     android:clipOrientation="vertical" 
     android:gravity="bottom" 
     android:drawable="@drawable/ic_launcher"/> 
    </item> 
</layer-list> 

asentando después de que Drawable en algo así como un ImageView para mostrar el progreso, y cambiar el valor con llamadas a setLevel() , es decir,

//This is any view subclass that you have chosen to do this 
ImageView progress; 

progress.setImageResource(R.drawable.progress_background); 

//Adjust the progress by adjusting the drawable's level 
progress.setImageLevel(500); 
// -- OR -- 
progress.getDrawable().setLevel(500); 

Los niveles de Drawable se configuran por defecto de 0 a 10,000 para representar completamente recortado a completamente revelado.

HTH

+0

lo has enganchado, quiero la última opción (como la pantalla de carga de God of War en su sitio web). Definitivamente voy a intentar su sugerencia muchas gracias – windwaker

+0

Estoy enfrentando un problema. En una actividad de prueba, estoy usando una única vista de imagen y usando progress_background.xml como definió anteriormente. Después de establecer setImageResource y establecer el nivel de configuración en 6000 estático, obtengo una pantalla en blanco. No hay rastro de ninguna imagen.Ahora bien, si elimino el static "flame_bw" del progress_background.xml y solo guardo un elemento, entonces puedo ver una imagen recortada. No tengo idea de por qué no muestra nada al usar 2 elementos :( – windwaker

+0

Noté un pequeño error en mi XML que puede haberlo hecho tropezar. La etiqueta '' requiere un atributo 'src' en oposición a un atributo' drawable'. Además, tomé nota del hecho de que también querrás usar el atributo 'gravity' para hacer que venga desde la parte inferior. Por defecto se revela desde el centro. La respuesta ha sido editada. – Devunwired

0

La mejor manera que puedo pensar para hacerlo es utilizar el mapa de bits original como fondo y luego dibujar las partes de la imagen final sobre ella desde abajo hacia arriba. De esta forma, no necesita un montón de imágenes diferentes: simplemente dibuje de forma incremental la imagen final. Creo que se puede hacer con algo como esto:

// setup 
// assuming firstImage is the initial one and secondImage is the final one 
int totalHeight = firstImage.getHeight(); 
Canvas canvas = new Canvas(firstImage); 
ImageView imgView = (ImageView)findViewById(R.id.flame_bar_view); 
imgView.setImageBitmap(firstBitmap); 
Rect src = new Rect (0, totalHeight, 
        firstImage.getWidth(), totalHeight); 

// then on each update 
void updateFlameBar(float percentage) { 
    int height = (int)(totalHeight * percentage); 
    src.top = totalHeight - height; 
    canvas.drawBitmap(secondImage, src, src, null); 
} 
+0

Gracias, pero me pregunto si va a trabajar para la barra de progreso en las notificaciones, así – windwaker

+0

No, no funcionarán a menos que conectar todas las piezas manualmente. Este método es más DIY. La solución de Devunwired es mejor. –

Cuestiones relacionadas