Android – 设置一个ProgressBar是一个垂直条,而不是水平的?

我正在尝试使用ProgressBar作为显示的测量。 我认为这将是一个容易的任务,并认为ProgressBar有一个属性设置为垂直,但我什么也没有看到。

此外,我希望能够显示标尺旁边的指标,以清楚地表明目前的水平。

指针赞赏 – 谢谢!

Related of "Android – 设置一个ProgressBar是一个垂直条,而不是水平的?"

垂直进度条默认不支持。

我最近遇到了垂直进度条的需求,但无法使用现有的进度条小部件find解决scheme。 我遇到的解决scheme通常需要扩展当前的Progress Bar或者一个全新的类。 我不相信推出一个新class级来实现一个简单的方向改变是必要的。

本文提供了一个简单,优雅,最重要的是,实现一个垂直进度条的一个不破解的解决scheme。 我将跳过这个解释,简单地提供一个cookies解决scheme。 如果您需要更多的细节,请随时与我联系或在下面留言。

在你的drawable文件夹中创build一个xml文件(不可drawable-hdpi或者drawable-mdpi – 把它放在drawable中)。 在这个例子中,我调用了我的xml vertical_progress_bar.xml

这是什么放在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> 

创build一个名为styles.xml的xml文件,并将其放在res / values中。 如果你的项目已经在res / values中包含了styles.xml,那就跳过这一步。

修改您的styles.xml文件并将以下代码附加到文件的末尾:

 <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> 

将新的垂直进度栏添加到布局。 这是一个例子:

 <ProgressBar android:id="@+id/vertical_progressbar" android:layout_width="12dip" android:layout_height="300dip" style="@style/Widget.ProgressBar.Vertical" /> 

这应该是您在项目中使用垂直进度条所需要做的一切。 或者,您可能会使用自定义可绘制的九进制图像,您正在使用进度栏。 您应该在progress_bar_vertical.xml文件中进行相应的更改。 我希望这可以帮助你在你的项目!

你必须创build自己的自定义进度条。

在你的xml中添加这个布局:

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

或者: Jagsaund解决scheme也是完美的。

我知道这是一个旧的post,但我发现这个问题的一个非常简单的解决scheme,也许可以帮助别人。 首先创build一个像这样的progress_drawable_vertical.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="vertical" android:gravity="bottom"> <shape> <gradient android:startColor="#00FF00" android:centerColor="#FFFF00" android:endColor="#FF0000" android:angle="90" /> </shape> </clip> </item> </layer-list> 

那么就在你的progressBar中使用这个:

 <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" /> 

我也创build了一个progress_drawable_horizo​​ntal.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> 

与mantain在progress_drawable_vertical.xml中定义相同的样式的目标

这里的关键是正确使用android:clipOrientationandroid:gravity

我在这里find了这个解决scheme,解决scheme的核心与jagsaund类似,但更简单一点。

要利用ProgressBar并使其垂直,您将不得不创build自己的自定义视图来扩展ProgressBar视图并覆盖onDraw()方法。 这将允许您以相反的方向绘制它。 查看ProgressBar.onDraw() (位于链接底部ProgressBar.onDraw()的源代码 ,以获取有关如何执行此操作的帮助。 最好的情况下,你只需要交换几个x和yvariables。

我发现可能是最好的(最简单和最通用的)解决scheme:)

这是一个旧的post,但我很难find这个简单的解决scheme,所以我想我应该发布..

只需使用可scale-drawable (如果需要,可以使用9个补丁),不需要任何其他代码。

例:

 <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> 

当然,正常的代码是:

 <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" /> 

注意可scale-drawable的xml行(魔术线):

 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 

我有确切的问题。 制作自定义类(扩展ProgressBar)将会创build难以维护的代码。 使用自定义样式会导致新操作系统(例如棒棒糖)的不同主题的兼容性问题,

最后,我只是将旋转animation应用到水平进度条。 受皮特的启发。

  1. 在你的布局xml中像标准的水平进度条一样创build标签。
  2. 确保ProgressBar的大小和位置是旋转后所需的。 (也许设置负利润率将有所帮助)。 在我的代码中,我从0,0旋转视图。
  3. 使用下面的方法旋转并设置新的进度。

码:

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

简单的progrebar图像视图

 viewHolder.proBarTrueImage.setMaximalValue(147); viewHolder.proBarTrueImage.setLevel(45); viewHolder.proBarTrueImage.setColorResource(R.color.corner_blue); 

简单的课程

 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" ... /> 

使用android:rotation =“270”到100%就像是从上到下或者android:rotation =“90”到100%就像从上到下

创build进度条 (我转换我的代码从C#到Java,所以可能不是100%正确的)

 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> 

什么使您的酒吧垂直是vertical_progress_bar.xml中的scaleHeightscaleGravity属性。

它最终看起来像这样:

在这里输入图像说明