Android實現帶箭頭的自定義Progressbar

一、閒話：

Android原生的進度條可以根據不同的主題有不同的視覺效果，但任何一種主題下的進度條和應用程序的視覺配合起來都顯得格格不入，所以多數時候我們需要自定義Progressbar，最簡單的是在布局文件中通過“android:progressDrawable”為Progressbar換背景和進度圖片，換圖後的效果類似於這樣：

但你會發現，進度圖片像是被截斷了一樣，看上去同樣不美觀，所以現在很多應用都會在進度條上玩花樣，做出各種各樣的效果，本例介紹的是在進度條的頭部加上光暈箭頭的效果，最終效果類似於這樣，知道如何做這個效果和，其它效果（一個動畫帶著進度條跑、火箭進度條等）自然而然也就會了：

二、實現原理：

實現上述自定義的Progressbar需要做兩件事情：

1、給ProgressBar換前景和背景圖，這個在布局文件中定義Progressbar的時候直接設置其progressDrawableJ就可以了，eg:

arrow_progress_bg.xml如下：

2、給進度加上光暈箭頭效果，本例是通過在布局文件中定義一個ImageView，在Progressbar進度改變時，通過LayoutParams時動態改變ImageView的位置。

三、核心代碼：

我將上述效果封裝在一個類，形成一個自定義的Progressbar,如下：

public class ArrowProgressBar extends RelativeLayout {
	public ArrowProgressBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initArrowProgressBar( context );
	}

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

	public ArrowProgressBar(Context context) {
		super(context);
		initArrowProgressBar( context );
	}
	
	private void initArrowProgressBar( Context context ){
		LayoutInflater layoutInflater = LayoutInflater.from( context );
		View view = layoutInflater.inflate(R.layout.arrow_progress_bar_layout, null);
		
		mProgressBar = ( ProgressBar )view.findViewById( R.id.downloadProgressId );
		mProgressTxt = ( TextView )view.findViewById( R.id.progressTxtId );
		mArrowImg = ( ImageView )view.findViewById( R.id.arrowImgId );
		mArrowImg.setVisibility( ImageView.GONE );
		
		addView( view );
	}
	
	public void setProgress( int progress ){
		if( progress < PROGRESS_MAX ){
			LayoutParams arrowParams = ( LayoutParams )mArrowImg.getLayoutParams( );
			float leftPosition = ( ( mProgressBar.getWidth( )/PROGRESS_MAX ) * ( progress - 2 ) ) + mProgressBar.getLeft();
			arrowParams.leftMargin = ( int )Math.ceil( leftPosition );
			
			mArrowImg.setLayoutParams( arrowParams );
		}else{
			mArrowImg.setVisibility( ImageView.GONE );
		}
		
		mProgressBar.setProgress( progress );
		mProgressTxt.setText( progress + % );
	}
	
	private ProgressBar mProgressBar = null;
	private TextView mProgressTxt = null;
	private ImageView mArrowImg = null;
	private static final float PROGRESS_MAX = 100.0f;
}

arrow_progress_bar_layout.xml如下：

四、Demo程序：

Android自定義帶箭頭的ProgressBar