studio - Android: ¿configura una Barra de progreso para que sea una barra vertical en lugar de horizontal?
personalizar progressbar android studio (12)
Encontré la solución probablemente mejor (más fácil y más versátil) :)
Esta es una publicación antigua, pero fue tan difícil para mí encontrar esta solución tan fácil, así que pensé que debía publicarla ...
Simplemente use una scale-drawable (o un parche de 9 si lo desea), sin necesidad de NINGÚN OTRO código.
Ejemplo:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@color/transparent"/>
<item android:id="@android:id/progress">
<scale android:scaleGravity="bottom" android:scaleWidth="0%" android:scaleHeight="100%">
<shape >
<solid android:color="@color/blue"/>
<corners android:topRightRadius="1dp" android:topLeftRadius="1dp"/>
</shape>
</scale>
</item>
</layer-list>
Y por supuesto el código normal:
<ProgressBar
android:id="@+id/progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="24dp"
android:layout_height="match_parent"
android:max="1000"
android:progress="200"
android:progressDrawable="@drawable/progress_scale_drawable" />
Observe las líneas xml de la scale-drawable (las líneas mágicas):
android:scaleGravity="bottom" //scale from 0 in y axis (default scales from center Y)
android:scaleWidth="0%" //don''t scale width (according to ''progress'')
android:scaleHeight="100%" //do scale the height of the drawable
Estoy tratando de usar una Barra de progreso como una visualización similar a la medición. Pensé que iba a ser una tarea fácil y pensé que ProgressBar tenía una propiedad que debía ser vertical, pero no veo nada.
Además, me gustaría poder mostrar un indicador similar a una regla a lo largo del lado de la barra para indicar claramente el nivel actual.
Punteros apreciados - Gracias!
Las barras de progreso verticales no son compatibles de forma predeterminada.
Para utilizar la Barra de progreso y hacerla vertical, tendría que crear su propia Vista personalizada extendiendo la vista de Barra de progreso y anular el método onDraw (). Esto te permitirá dibujarlo en una orientación inversa. Eche un vistazo al código fuente de ProgressBar.onDraw() (ubicado en la parte inferior del enlace) para obtener ayuda sobre cómo hacerlo. En el mejor de los casos, solo tendrás que intercambiar algunas variables x e y.
Recientemente me había topado con la necesidad de una barra de progreso vertical, pero no pude encontrar una solución utilizando el widget de la barra de progreso existente. Las soluciones que encontré en general requerían una extensión de la barra de progreso actual o una clase completamente nueva. No estaba convencido de que fuera necesario implementar una nueva clase para lograr un cambio de orientación simple.
Este artículo presenta una solución simple, elegante y, lo que es más importante, sin trucos para lograr una barra de progreso vertical. Voy a omitir la explicación y simplemente proporcionaré una solución para cortar galletas. Si necesita más detalles, no dude en ponerse en contacto conmigo o dejar un comentario a continuación.
Cree un xml en su carpeta dibujable (no drawable-hdpi o drawable-mdpi - colóquelo en drawable). Para este ejemplo llamo a mi xml vertical_progress_bar.xml
Esto es lo que hay que colocar en el archivo xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="180"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="180"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="180"
/>
</shape>
</clip>
</item>
</layer-list>
Cree un archivo xml llamado styles.xml y colóquelo en res / values. Si su proyecto ya contiene styles.xml en res / valores, omita este paso.
Modifique su archivo styles.xml y agregue el siguiente código al final del archivo:
<style name="Widget">
</style>
<style name="Widget.ProgressBar">
<item name="android:indeterminateOnly">true</item>
<item name="android:indeterminateBehavior">repeat</item>
<item name="android:indeterminateDuration">3500</item>
<item name="android:minWidth">48dip</item>
<item name="android:maxWidth">48dip</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
<style name="Widget.ProgressBar.Vertical">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@drawable/progress_bar_vertical</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minWidth">1dip</item>
<item name="android:maxWidth">12dip</item>
</style>
Añade tu nueva barra de progreso vertical a tu diseño. Aquí hay un ejemplo:
<ProgressBar
android:id="@+id/vertical_progressbar"
android:layout_width="12dip"
android:layout_height="300dip"
style="@style/Widget.ProgressBar.Vertical"
/>
Eso debería ser todo lo que necesita hacer para utilizar una barra de progreso vertical en su proyecto. Opcionalmente, puede tener imágenes personalizables de nueve parches que puede usar para la barra de progreso. Debe realizar los cambios adecuados en el archivo progress_bar_vertical.xml. Espero que esto te ayude en tu proyecto!
Sé que es una publicación antigua, pero encontré una solución muy simple para este problema que tal vez pueda ayudar a alguien. En primer lugar, cree un progress_drawable_vertical.xml como este:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<color android:color="#777" />
</item>
<item android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<gradient
android:startColor="#00FF00"
android:centerColor="#FFFF00"
android:endColor="#FF0000"
android:angle="90" />
</shape>
</clip>
</item>
</layer-list>
Entonces solo usa esto en tu barra de progreso:
<ProgressBar
android:id="@+id/progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:max="100"
android:progress="33"
android:progressDrawable="@drawable/progress_drawable_vertical" />
También he creado un progress_drawable_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<color android:color="#777" />
</item>
<item android:id="@android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape>
<gradient
android:startColor="#00FF00"
android:centerColor="#FFFF00"
android:endColor="#FF0000" />
</shape>
</clip>
</item>
</layer-list>
con el objetivo de mantener el mismo estilo definido en progress_drawable_vertical.xml
La clave aquí es el uso correcto de android:clipOrientation y android:gravity .
Encontré esta solución here y el núcleo de la solución es similar a pero un poco más simple.
Tengo el mismo problema. Crear una clase personalizada (extendiendo ProgressBar) creará un código que es difícil de mantener. El uso de un estilo personalizado causará problemas de compatibilidad con diferentes temas del nuevo sistema operativo (por ejemplo, lollipop)
Finalmente, solo aplico una animación de rotación a una barra de progreso horizontal. Inspirado por Pete .
- Cree la etiqueta en su xml de diseño como la barra de progreso horizontal normal.
- Asegúrese de que el tamaño y la posición de la Barra de progreso sean los que desea después de la rotación. (Quizás el ajuste de margen negativo ayude). En mi código giro la vista desde 0,0.
- Usa el método de abajo para rotar y establecer un nuevo progreso.
Código:
private void setProgress(final ProgressBar progressBar, int progress) {
progressBar.setWillNotDraw(true);
progressBar.setProgress(progress);
progressBar.setWillNotDraw(false);
progressBar.invalidate();
}
private void rotateView(final View v, float degree) {
Animation an = new RotateAnimation(0.0f, degree);
an.setDuration(0);
an.setRepeatCount(0);
an.setFillAfter(true); // keep rotation after animation
v.setAnimation(an);
}
Tienes que crear tu propia barra de progreso personalizada.
En tu xml agrega este diseño:
<com.example.component.VerticalProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:id="@+id/verticalRatingBar1"
android:layout_width="wrap_content"
android:progress="50"
android:layout_height="fill_parent" />
VerticalProgressBar.java
public class VerticalProgressBar extends ProgressBar{
private int x, y, z, w;
@Override
protected void drawableStateChanged() {
// TODO Auto-generated method stub
super.drawableStateChanged();
}
public VerticalProgressBar(Context context) {
super(context);
}
public VerticalProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public VerticalProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(h, w, oldh, oldw);
this.x = w;
this.y = h;
this.z = oldw;
this.w = oldh;
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}
protected void onDraw(Canvas c) {
c.rotate(-90);
c.translate(-getHeight(), 0);
super.onDraw(c);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
setSelected(true);
setPressed(true);
break;
case MotionEvent.ACTION_MOVE:
setProgress(getMax()
- (int) (getMax() * event.getY() / getHeight()));
onSizeChanged(getWidth(), getHeight(), 0, 0);
break;
case MotionEvent.ACTION_UP:
setSelected(false);
setPressed(false);
break;
case MotionEvent.ACTION_CANCEL:
break;
}
return true;
}
@Override
public synchronized void setProgress(int progress) {
if (progress >= 0)
super.setProgress(progress);
else
super.setProgress(0);
onSizeChanged(x, y, z, w);
}
}
O bien: la solución de Jagsaund también está siendo perfecta.
ingrese la descripción del enlace aquí
** Revise este enlace. Estaba tratando de usar algo similar y también puede usar el paso a paso para sus requisitos, hay pocos proyectos disponibles en Github sobre CÓMO USAR STEPPER EN ANDROID STUDIO **
Crear la barra de progreso (convertí mi código de c # a java, por lo que podría no ser 100% correcto)
ProgressBar progBar = new ProgressBar(Context, null, Android.resource.attribute.progressDrawable);
progBar.progressDrawable = ContextCompat.getDrawable(Context, resource.drawable.vertical_progress_bar);
progBar.indeterminate = false;
vertical_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<solid android:color="@color/grey" />
<corners android:radius="20dip" />
</shape>
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/vertical_progress_bar_blue_progress"
android:scaleHeight="100%"
android:scaleGravity="bottom"/>
</item>
</layer-list>
vertical_progress_bar_blue_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="20dip" />
<solid android:color="@color/ProgressBarFourth" />
</shape>
Lo que hará que su barra sea vertical son los scaleHeight y scaleGravity en vertical_progress_bar.xml .
Termina buscando algo como esto:
Vista de la imagen progrebar simple
ejemplo
viewHolder.proBarTrueImage.setMaximalValue(147);
viewHolder.proBarTrueImage.setLevel(45);
viewHolder.proBarTrueImage.setColorResource(R.color.corner_blue);
clase simple
public class ProgressImageView extends ImageView {
private Context mContext;
private Paint paint;
private RectF rectf;
private int maximalValue = 1;
private int level = 0;
private int width;
private int height;
public ProgressImageView(Context context) {
super(context);
init(context, null, 0);
}
public ProgressImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public ProgressImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attrs, int defStyleAttr){
mContext = context;
paint = new Paint();
rectf = new RectF();
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.FILL);
};
@Override
protected void onDraw(Canvas canvas) {
float dif = (float) height / (float) maximalValue;
int newHeight = height - (int) (dif * level);
rectf.set(0,newHeight, width, height);
canvas.drawRect(rectf, paint);
super.onDraw(canvas);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
this.width = w;
this.height = h;
}
public void setMaximalValue(int maximalValue) {
this.maximalValue = maximalValue;
invalidate();
}
public void setLevel(int level) {
this.level = level;
invalidate();
}
public void setColorResource(int color) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
color = mContext.getResources().getColor(color,mContext.getTheme());
}else {
color = mContext.getResources().getColor(R.color.corner_blue);
}
setColor(color);
}
public void setColor(int color){
if (paint != null){
paint.setColor(color);
invalidate();
}
}
}
<ProgressBar
android:id="@+id/battery_pb"
android:rotation="270"
android:progress="100"
...
/>
Use android: rotation = "270" al 100%, sea de abajo hacia arriba o android: rotación = "90" al 100%, sea de arriba a abajo
This perfectly works
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<gradient
android:startColor="#DDDDDD"
android:centerColor="#DDDDDD"
android:centerY="0.75"
android:endColor="#DDDDDD"
android:angle="270"
/>
</shape>
</item>
<item
android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="top">
<shape>
<gradient
android:angle="0"
android:startColor="#302367"
android:centerColor="#7A5667"
android:endColor="#C86D67"/>
</shape>
</clip>
</item>
</layer-list>
<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="5dp"
android:layout_height="match_parent"`enter code here`
android:progressDrawable="@drawable/progress_dialog"/>