1. 技术文章
  2. Android 自定义进度条（指示器）

Android 自定义进度条（指示器）

由 本秂侑毒 提交于 2019-12-05 16:33:50

进度条分类

Android中进度条控件有3个（不算ProgressDialog），分别是ProgressBar、SeekBar和RatingBar，对于自定义样式来说又得按照需求分为2中情况，第一种是刻度型，第二种是循环类型。

一、“刻度型”进度条（指示器）

也就是他有起点和终点，起点值小于终点值

这种样式的修改，要修改三个属性即可分别是：

  • 背景（主要是进度的轨道样式）
  • 第一级别滚动条progressDrawable
  • 第二级别progressDrawable

遗憾的是Android提供的api很难设置，不过可以通过LayerListDrawable实现，下面以RatingBar或者SeekBar为例子展示

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item
    android:id="@+android:id/background"
    android:drawable="@drawable/unselect">
</item> 
<item
    android:id="@+android:id/secondaryProgress"
    android:drawable="@drawable/unselect">
</item> 
<item
    android:id="@+android:id/progress"
    android:drawable="@drawable/selected">
</item> 
</layer-list>
<style name="roomRatingBar" parent="@android:style/Widget.RatingBar"> 
<item name="android:progressDrawable">@drawable/ratingbar_drawable</item> 
<item name="android:minHeight">48dip</item> 
<item name="android:maxHeight">48dip</item> 
</style>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <RatingBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/roomRatingBar"
        android:layout_marginLeft="10dip"
        android:id="@+id/ratingbar"
        android:rating="1.5"
        android:stepSize="0.15"
        android:numStars="8"
    />
</LinearLayout>

 

二、循环类型（无刻度型）进度条

对于这种情况来说，这是一种动画效果，而且是往复府循环的，因此来说适合做没有进度的滚动条，loading效果，甚至可以作为课旋转的头像，或者其他动画吧。

方法一：传统方式

因此来说，这里适合无限循环的帧动画 或者旋转动画。

我们可以修改

android:indeterminateDrawable=""
android:indeterminateDuration="1000"

android:indeterminateDrawable的值如果是帧动画，则无需设置android:indeterminateDuration,如果是其他补间动画，需要设置android:indeterminateDuration

帧动画

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    android:visible="true" >

    <item
        android:drawable="@drawable/common_loading_icon1"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon2"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon3"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon4"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon5"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon6"
        android:duration="33"/>
    <item
        android:drawable="@drawable/common_loading_icon7"
        android:duration="33"/>
</animation-list>
   <ProgressBar
            android:layout_width="34dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp" 
            android:indeterminateDrawable="@drawable/common_loading_icon" />

补间动画：

<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/window_loading"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="1000"
    />
<ProgressBar 
	        android:layout_width="60dip"
	        android:layout_height="60dip"
	        android:indeterminate="true"
	        style="?android:attr/progressBarStyleSmall"
	        android:indeterminateDrawable="@anim/base_loading_anim"
	        android:indeterminateDuration="1000"
	        android:padding="10dip"
	        />

我们也可以自定义这种

<rotate 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:duration="100"
    >
  <shape 
        android:innerRadiusRatio="3" 
        android:shape="[ring|oval]" 
        android:thicknessRatio="8" 
        android:useLevel="false" >  
   
        <gradient 
            android:centerColor="#FFFFFF" 
            android:centerY="0.50" 
            android:endColor="#FFFF00" 
            android:startColor="#000000" 
            android:type="sweep" 
            android:useLevel="false" />  
    </shape>  
   </rotate>

   

方式二：AnimatedRotateDrawable + View背景

此外，对于旋转，Android系统也提供AnimatedRotateDrawable，但只能通过xml使用。AnimatedRotateDrawable是一种可以自动旋转的Drawable，无需ProgressBar，通过普通View即可。

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/spinner_black_48"
    android:pivotX="50%"
    android:pivotY="50%"
    >
</animated-rotate >

三、裁剪型指示器

 

另外，对于一种裁剪（咖啡杯逐渐满杯的的动画）是动画，很多开发者一般选择的是帧动画，其实有一种更好的方式是使用 ImageView+ClipDrawable+Handler/Thread来代替，对于ClipDrawable来说，地默认的最大level是10000:

我们可以给ImageView设置一个被裁减图片的高度吻合暗灰色背景，然后在设置ClipDrawable的Level值

关于ClipDrawable请参阅博客:http://my.oschina.net/ososchina/blog/346562

先自定义一个XML（命名为clip.xml），放在Drawable文件夹下面：

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/green_progress_drawable"
    android:gravity="left" >

</clip>

在界面布局文件layout中引用上面定义的这个ClipDrawable，比如：

    <View
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="22dip"
        android:layout_centerInParent="true"
        android:background="@drawable/clip" >
    </View>

页面代码

package WangLi.Resouce.ClipDrawableTest;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.graphics.drawable.ClipDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ImageView;

public class ClipDrawableTest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageview = (ImageView)findViewById(R.id.image);
        //获取图片所显示的ClipDrawble对象
        final ClipDrawable drawable = (ClipDrawable)imageview.getDrawable();
        final Handler handler = new Handler()
        {
        	public void handleMessage(Message msg)
        	{
        		if(msg.what == 0x1233)
        		{
        			//修改ClipDrawable的level值
        			drawable.setLevel(drawable.getLevel() +200);
        		}
        	}
        };
        final Timer timer = new Timer();
        timer.schedule(new TimerTask()
        {
        	public void run()
        	{
        		Message msg = new Message();
        		msg.what = 0x1233;
        		//发送消息,通知应用修改ClipDrawable对象的level值
        		handler.sendMessage(msg);
        		//取消定时器
        		if(drawable.getLevel() >= 10000)
        		{
        			timer.cancel();
        		}
        	}
        },0,300);
    }
}

 

四、动画型的进度条（指示器）

既然说到动画，动画完全可以模拟滚动条的，对于滚动条你还可以使用   LinearLayout+View的方式来实现（可实现垂直或者水平的），或者直接使用绘图方式也行。

 

关于动画的相对位置

1.日常中对动画了解最有问题的地方是相对点，这里顺便说一句，相对点决定动画的参照系。对于xml而言，以下属性的设置可以自动转换相对点

android:pivotX="" 相对x位置[float][fraction]
android:pivotY=""相对y位置[float][fraction]

其中android:pivotX为实数时，是相对自己的点，比如:android:pivotX="0.5",android:pivotY="0.5"或android:pivotX="50",android:pivotY="50"相对动画本身的位置，一般来说是自身的中心

2.相对于屏幕的动画,可以说是 Relative_TO_Parent

android:pivotY="50%p",android:pivotX="50%p"，这个点事相对于屏幕的，50%意味着屏幕的中间。

 

try doing it

 

 

 

标签
ratingbar
android
pivotx
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!