Android - 将 ProgressBar 设置为垂直条而不是水平条？

Question

我正在尝试使用 ProgressBar 作为类似计量的显示。我认为这将是一个简单的任务，并认为 ProgressBar 有一个属性可以设置为垂直，但我没有看到任何东西。

此外，我希望能够在栏的侧面显示类似标尺的指示器，以清楚地指示当前级别。

感谢指点 - 谢谢！

Answer 1

我最近遇到了对垂直进度条的需求，但无法使用现有的进度条小部件找到解决方案。我遇到的解决方案通常需要扩展当前的进度栏或本身一个全新的类。我不相信推出一个新课程来实现简单的方向改变是必要的。

本文介绍了一种简单、优雅、最重要的是，一种无需黑客手段即可实现垂直进度条的解决方案。
我将跳过解释并简单地提供一个千篇一律的解决方案。如果您需要更多详细信息，请随时与我联系或在下面发表评论。

在您的drawable文件夹中创建一个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>

创建一个名为 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 文件中进行适当的更改。
我希望这对您的项目有所帮助！

Answer 2

您必须创建自己的自定义进度条。

在您的 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 解决方案也很完美。

Answer 3

我知道这是一篇旧文章，但我找到了一个非常简单的解决方案来解决这个问题，也许可以帮助别人。
首先创建一个这样的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" />

我还创建了一个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>

，其目的是保持progress_drawable_vertical.xml中定义的相同样式

这里的关键是正确使用android:clipOrientation 和 android:gravity。

我在这里找到了这个解决方案该解决方案的核心类似于 ​​jagsaund 但更简单一些。

Answer 4

我找到了可能是最好的（最简单和最通用）的解决方案:)

这是一篇旧帖子，但对我来说很难找到这个如此简单的解决方案，所以我想我应该发布它..

只需使用 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

Answer 5

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

Answer 6

简单易行的方法：

只需将视图添加到 LinearLayout 并缩放它即可。

<LinearLayout
        android:layout_width="4dp"
        android:layout_height="300dp"
        android:background="@color/md_green_50"
        android:orientation="vertical">
    <View
            android:id="@+id/progressView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="top"
            android:layout_weight="1"
            android:background="@color/md_green_500"
            android:scaleY="0.0" />
</LinearLayout>

将视图的pivotY设置为零：

progressView.pivotY = 0F

现在您可以使用scaleY在0F和1F<之间填充进度< /代码>：

progressView.scaleY = 0.3F

---

奖金：
使用 animate() 制作动画进度：

progressView.animate().scaleY(0.3F).start()

Answer 7

创建进度条（我将代码从 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 中的 scaleHeight 和 scaleGravity 属性。

它最终看起来像这样：

Answer 8

这是一个简单的解决方案，只需旋转进度条即可

android:rotation="270"

Answer 9

将其添加到 xml 代码中
机器人：旋转=“90”
机器人：transformPivotX =“0dp”
这就是你的进度条 xml 的样子

<ProgressBar
    android:id="@+id/progressBar6"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="90"
    android:transformPivotX="0dp"
    tools:layout_editor_absoluteX="101dp"
    tools:layout_editor_absoluteY="187dp" />

Answer 10

要利用 ProgressBar 并使其垂直，您必须创建自己的自定义视图来扩展 ProgressBar 视图并重写 onDraw() 方法。这将允许您以相反的方向绘制它。查看源代码ProgressBar.onDraw()（位于链接底部）的 a> 获取有关如何执行此操作的帮助。最好的情况是，您只需交换一些 x 和 y 变量。

Answer 11

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

最终，我只是将旋转动画应用于水平进度条。受到皮特的启发。

1. 在布局 xml 中创建标签，就像普通的水平进度条一样。
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);
}

Answer 12

简单的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();
    }
}

}

Answer 13

<ProgressBar
        android:id="@+id/battery_pb"
        android:rotation="270"
        android:progress="100"
...
/>

使用 android:rotation="270" 到 100% 就像从下到上或 android:rotation="90" 到 100% 就像从上到下

Answer 14

在此处输入链接描述

**查看此链接，我试图使用类似的东西并且您也可以根据您的要求使用步进器，Github 上很少有关于如何在 ANDROID STUDIO 中使用步进器的项目 **

Answer 15

为了制作垂直的 ProgressBar，我解决的方法是首先将其旋转 90 度，然后用手动输入的值对其进行缩放。

scaleX = 布局高度/布局宽度

这是我在进度条上的属性的示例

android:layout_width="20dp"
android:layout_height="233dp"
android:rotation="-90"
android:scaleX="11.65"

这可能需要一点手动操作，但因为默认情况下它们没有垂直进度条，所以这对我来说是一个非常好的解决方法。 scaleX 可以自动计算，但必须在屏幕上绘制所有内容之后才可以计算。

Answer 16

经过几个小时的搜索，我有了一个想法：
如果您可以旋转 div，则在 STYLE 中输入 rotate: 90deg 或 rotate: 270deg 即可。

Answer 17

默认情况下不支持垂直进度条。