Android竖直方向的进度条实现

首先看效果：

第一种clip的方式：

第二种scale方式：

实现思路：

1.布局

    <ProgressBar
        android:layout_margin="20dp"
        style="@style/my_progressbar_style_ver"
        android:layout_width="wrap_content"
        android:progress="35"
        android:layout_height="match_parent"/>

2.在style中添加一个样式（继承自系统的水平进度条样式）

<style name="my_progressbar_style_ver" parent="Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progressbar_ver</item>
    </style>

3.在drawable下自定义进度条形状progressbar_ver.xml（id需要与原始一致）

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape >
            <corners android:radius="50dip" />
            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#F5F5F5"
                android:startColor="#BEBEBE" />
        </shape>
    </item>

    <item android:id="@android:id/progress">

       <scale
        android:scaleGravity="bottom"
        android:scaleHeight="100%"
        >
        <shape >
            <corners android:radius="50dip" />
            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#165CBC"
                android:startColor="#85B0E9" />
        </shape>
        </scale>
<!--scale和clip只能二选一，一种是缩放一种是切割方式，进度条末端形状不同-->
       <!-- <clip
            android:gravity="bottom"
            android:clipOrientation="vertical"
            >
            <shape >
                <corners android:radius="50dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#165CBC"
                    android:startColor="#85B0E9" />
            </shape>
        </clip>-->

    </item>
</layer-list>

总结：

其实就是在自定义progressDrawable中id为progress下修改其进度改变方式，一种是缩放scale一种是切割clip，并在该属性上添加两个方向属性即可，自己改这两个属性，就可以实现从上到下或从右到左了。

scale

<scale
        android:scaleGravity="bottom"
        android:scaleHeight="100%"
        >

clip

<clip
            android:gravity="bottom"
            android:clipOrientation="vertical"
            >

前景色设置

ProgressBar.setProgressDrawable(drawable);

Android竖直方向的进度条实现

猜你喜欢