Android 實現環形進度按鈕circular-progress-button

※效果

※簡單介紹

顯示運行進度的button，可用於數據的提交。系統登錄等。動畫效果非常棒。提高用戶體驗。

※使用說明

Declare button inside your layout XML file:

<com.dd.CircularProgressButton
    android:id="@+id/btnWithText"
    android:layout_width="196dp"
    android:layout_height="64dp"
    android:layout_marginTop="16dp"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:textComplete="@string/Complete"
    app:textError="@string/Error"
    app:textIdle="@string/Upload" />

Button state depends on progress:

• normal state [0]
• progress state [1-99]
• success state [100]
• error state [-1]

To change progress use CircularProgressButton.setProgress(int value) method.

Idle state

CircularProgressButton.setProgress(0)

• To change text app:textIdle="@string/Upload"
• To change background color app:colorIdle="@color/green"

Progress state 1

CircularProgressButton.setProgress(1) will automatically morph button from idle (square shape) state to progress (circle shape) state.

• To change indicator color app:colorIndicator="@color/blue"
• To change indicator background color app:colorIndicatorBackground="@color/grey"
• To change circle background color app:colorProgress="@color/white"

Progress state 50

CircularProgressButton.setProgress(50)

Complete state 100

CircularProgressButton.setProgress(-1)

• To change text app:textError="@string/Error"
• To change background color app:colorError="@color/red"

Error state -1

CircularProgressButton.setProgress(-1)

• To change text app:textComplete="@string/Complete"
• To change background color app:colorComplete="@color/green"

You can set rounded corners

app:cornerRadius="48dp"

You can use icons for complete & error states

app:iconComplete="@drawable/ic_action_accept"

app:iconError="@drawable/ic_action_cancel"

※代碼

1.button的幾種狀態

• 初始狀態 [0]
• 載入中 [1-99]
• 載入成功 [100]
• 載入失敗 [-1]
  

通過調用此方法改變 CircularProgressButton.setProgress(int value) 

2.改動進度條樣式

• 改動載入進度的顏色 app:colorIndicator="@color/blue"
• 改動載入進度的背景色 app:colorIndicatorBackground="@color/grey"
• 改動中間圓形的顏色 app:colorProgress="@color/white"
  

3.其它屬性

• 失敗時的文字 app:textError="@string/Error"
• 失敗時的背景色 app:colorError="@color/red"
• 成功時的文字 app:textComplete="@string/Complete"
• 成功時的背景色 app:colorComplete="@color/green"
• 設置button圓角 app:cornerRadius="48dp"
• 設置成功時的圖標 app:iconComplete="@drawable/ic_action_accept"
• 設置失敗時的圖標 app:iconError="@drawable/ic_action_cancel"
  

※注意事項

一行放置一個以上的button時須要注意一下，由於button點擊后變為進度框時視圖的寬度要發生改變。所以位置可能發生變化。須要注意下你的布局，能夠放到按比例分開的線性布局，或放相對布局中定義寬度讓它始終居中

※常見錯誤

        http://blog.csdn.net/linglongxin24/article/details/38057501

※項目地址 

       https://github.com/dmytrodanylyk/circular-progress-button

※DEMO下載地址

      http://download.csdn.net/detail/u010785585/7666287

※樓主博客

       http://blog.csdn.net/linglongxin24    （這里會稍早些更新。還會定時更新些平時的一些開發技巧）