Android竖直方向的进度条实现

it2023-02-24  82

首先看效果:

第一种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);  

 

 

 

 

 

 

最新回复(0)