Android實現帶箭頭的自訂Progressbar，androidprogressbar

Android實現帶箭頭的自訂Progressbar，androidprogressbar

一、閑話：

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

 

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

 

 

二、實現原理：

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

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

<ProgressBar        android:id="@+id/downloadProgressId"style="?android:attr/progressBarStyleHorizontal"android:layout_width="893.0dp"android:layout_height="14.0dp"android:layout_centerInParent="true"android:progressDrawable="@drawable/arrow_progress_bg"android:max="100"android:progress="0"/>

arrow_progress_bg.xml如下：

<?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/arrow_progress_bar_bottom_layer"        />    <!-- 進度 -->    <item        android:id="@android:id/progress"        android:drawable="@drawable/arrow_progress_bar_top_layer"        /></layer-list>

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如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <RelativeLayout        android:id="@+id/progressLayoutId"        android:layout_width="fill_parent"        android:layout_height="43.0dp"        android:layout_centerHorizontal="true">        <ProgressBar        android:id="@+id/downloadProgressId"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="893.0dp"        android:layout_height="14.0dp"        android:layout_centerInParent="true"        android:progressDrawable="@drawable/arrow_progress_bg"        android:max="100"        android:progress="0"        />    <ImageView        android:id="@+id/arrowImgId"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/arrow_progress_bar_arrow"        android:contentDescription="@string/app_name"        />    </RelativeLayout>    <TextView        android:id="@+id/progressTxtId"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:gravity="center"        android:layout_below="@id/progressLayoutId"        android:layout_marginTop="10.0dp"        android:background="@drawable/arrow_progress_text_background"        android:textColor="@android:color/white"        android:textSize="30.0dp"        /></RelativeLayout>

四、Demo程式：

Android自訂帶箭頭的ProgressBar

安卓開發之ProgressBar與Button

你就用Button和ProgeessBar組合實現吧
 
android編程用shape實現progressbar的轉圈效果怎控制轉速

建議用真機試一下，一般來說模擬器啟動並執行要比真機的慢