Android 自定義進度條（指示器）

時間 2019-11-10

標籤 android 自定義進度指示器欄目 Android 简体版

原文原文鏈接

進度條分類

Android中進度條控件有3個（不算ProgressDialog），分別是ProgressBar、SeekBar和RatingBar，對於自定義樣式來講又得按照需求分爲2中狀況，第一種是刻度型，第二種是循環類型。java

1、「刻度型」進度條（指示器）

也就是他有起點和終點，起點值小於終點值android

這種樣式的修改，要修改三個屬性便可分別是：api

背景（主要是進度的軌道樣式）
第一級別滾動條progressDrawable
第二級別progressDrawable

遺憾的是Android提供的api很難設置，不過能夠經過LayerListDrawable實現，下面以RatingBar或者SeekBar爲例子展現app

<?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>

2、循環類型（無刻度型）進度條

對於這種狀況來講，這是一種動畫效果，並且是往復府循環的，所以來講適合作沒有進度的滾動條，loading效果，甚至能夠做爲課旋轉的頭像，或者其餘動畫吧。ide

方法一：傳統方式佈局

所以來講，這裏適合無限循環的幀動畫或者旋轉動畫。動畫

咱們能夠修改spa

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

android:indeterminateDrawable的值若是是幀動畫，則無需設置android:indeterminateDuration,若是是其餘補間動畫，須要設置android:indeterminateDuration.net

幀動畫code

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

3、裁剪型指示器

另外，對於一種裁剪（咖啡杯逐漸滿杯的的動畫）是動畫，不少開發者通常選擇的是幀動畫，其實有一種更好的方式是使用 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);
    }
}

4、動畫型的進度條（指示器）

既然說到動畫，動畫徹底能夠模擬滾動條的，對於滾動條你還可使用 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。