Android垂直ProgressBar的实现

最新推荐文章于 2025-06-30 15:59:47 发布

怀念依旧

最新推荐文章于 2025-06-30 15:59:47 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android开发

本文链接：https://blog.csdn.net/a0407240134/article/details/51889710

Android开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Android中实现垂直方向的ProgressBar和SeekBar。通过创建自定义View类并重写onDraw()、onMeasure()及onSizeChanged()方法，实现了组件的旋转和尺寸调整。同时，通过自定义样式文件改变进度条颜色，并在布局文件中使用自定义组件。对于SeekBar，还需要解决拇指同步问题，并动态设置滑动颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 定义类继承ProgressBar
public class VerticalProgressBar extends ProgressBar {
    public VerticalProgressBar(Context context) {
        super(context);
    }

    public VerticalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VerticalProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
   protected synchronized void onDraw(Canvas canvas)
   {
       // TODO Auto-generated method stub
       canvas.rotate(-90);//反转90度，将水平ProgressBar竖起来
       canvas.translate(-getHeight(), 0);//将经过旋转后得到的VerticalProgressBar移到正确的位置,注意经旋转后宽高值互换
       super.onDraw(canvas);
   }

   @Override
   protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(heightMeasureSpec, widthMeasureSpec);
       setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());//互换宽高值
   }

   @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(h, w, oldw, oldh);//互换宽高值
   }
}

2. 自定义样式文件
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="8dip" />
            <solid android:color="#696969" />　//　progress的颜色
            
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="8dip" />
                
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="8dip" />
                <solid android:color="#ffffff" />
                
            </shape>
        </clip>
    </item>
</layer-list>
３. Layout文件（左右各一个）
    <RelativeLayout
        android:id="@+id/volumn_light_pannel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingStart="30dp"
        android:paddingEnd="30dp" >

        <com.example.mediaplayer.VerticalProgressBar
            android:id="@+id/light_bar"
            android:layout_width="4dp"　   //　此时的width表示progress的高度
            android:layout_height="220dp"　//　因为是垂直的ProgressBar, 所以height和width是互换的
            android:progressDrawable="@drawable/progressbar"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" // 垂直居中
            android:max="100"
            android:progress="50"
            style="?android:attr/progressBarStyleHorizontal" />
        <com.example.mediaplayer.VerticalProgressBar
            android:id="@+id/volume_bar"
            android:layout_width="4dp"
            android:layout_height="220dp"
            android:progressDrawable="@drawable/progressbar"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:max="100"
            android:progress="50"
            style="?android:attr/progressBarStyleHorizontal" />
</RelativeLayout>
4 自定义SeeBar样式
SeeBar继承ProgressBar, 所以和自定义ProgressBar相同,但是要注意的是, 布局文件中, 对ProgressBar来说, layout_height是ProgressBar的高度,但是对于SeekBar, layout_height需要设置为wrap_content
            <com.example.mediaplayer.VerticalProgressBar
                android:id="@+id/light_progressbar"
                android:layout_width="wrap_content"
                android:layout_height="160dp"
                android:thumb="@drawable/switchbtn"
                android:paddingLeft="7dp"
                android:paddingRight="7dp"
                android:progressDrawable="@drawable/progressbar"
                android:maxHeight="7dp"
                android:minHeight="7dp"
                android:layout_centerHorizontal="true"
                style="?android:attr/progressBarStyleHorizontal" />

还有一个要注意的地方, 就是垂直seekbar时, thumb有可能不同步. 解决方法是自定义的SeekBar子类重新实现setProgress方法, 实现如下:
@Override
public void setProgress(int progress) {
   super.setProgress(progress);
   onSizeChanged(getWidth(), getHeight(), 0, 0); // 在SeekBar父类AbsSeekBar中onSizeChanged会调用updateThumbPos来更新thumb的位置
}
5 动态设置ProgressBar的颜色
设置ProgressBar滑动的颜色，其函数为：progressBar.setProgressDrawable(Drawable d);
但是，设置一个普通的Drawable是没有用的，ProgressBar会把该图片平铺。