用开源项目circular progress button实现有进度条的Button

circular progress button可以让button实现进度条，效果和动画都做的很赞，只是有点小bug。需要注意的是按钮上的文字不能太大，否则会出现错位。

项目的地址：https://github.com/dmytrodanylyk/circular-progress-button

下面我们来看看怎么使用它。

一、添加依赖并在xml中放入控件

从项目地址中下载好lib后导入自己的工程，在xml中放入这样一个button

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton06"
        android:layout_width="196dp"
        android:layout_height="64dp"
        android:layout_marginTop="15dp"
        android:textColor="@color/cpb_white"
        android:textSize="18sp"
        app:cpb_cornerRadius="48dp"
        app:cpb_selectorComplete="@drawable/complete_state_selector"
        app:cpb_selectorError="@drawable/error_state_selector"
        app:cpb_selectorIdle="@drawable/idle_state_selector"
        app:cpb_textComplete="Complete"
        app:cpb_textError="Error"
        app:cpb_textIdle="Upload" />

二、在xml文件中设置各种属性

用这些属性需要自定义命名空间。xmlns:app="http://schemas.android.com/apk/res-auto"

textColor：全局字体颜色设置
textSize：全局字体大小设置
cpb_cornerRadius：按钮的边缘弧度数
cpb_textIdle：默认的text文字
cpb_textComplete：完成时显示的text
cpb_textError：出错时显示的text
cpb_iconComplete：完成时显示的图标，这个和cpb_textComplete不能共用
cpb_iconError：出错时显示的图标，这个和cpb_textError不能共用
cpb_paddingProgress：圆形进度条和按钮的边界的差值，设定后按钮会在走进度时缩小到小进度条，走完后再由小进度条扩大到原始按钮
cpb_selectorComplete：自定义完成时按钮背景的颜色，包括获取焦点、按下、普通各种状态
cpb_selectorError：自定义出错时按钮背景的颜色，包括获取焦点、按下、普通各种状态
cpb_selectorIdle：自定义初始时按钮的背景色，包括获取焦点、按下、普通各种状态

对于cpb_selectorComplete、cpb_selectorError、cpb_selectorIdle需要在drawable中写上selector文件。这样就可以设置各种背景色了。

complete_state_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:color="#ff794e9b"/>
    <item android:state_focused="true"
          android:color="#ff794e9b"/>
    <item android:state_enabled="false"
          android:color="@color/cpb_grey"/>
    <item android:state_enabled="true"
          android:color="#ffaa66cc"/>
</selector>

error_state_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:color="#ffcd0a51"/>
    <item android:state_focused="true"
          android:color="#ffcd0a51"/>
    <item android:state_enabled="false"
          android:color="@color/cpb_grey"/>
    <item android:state_enabled="true"
          android:color="#fe0a5a"/>
</selector>

idle_state_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:color="#fff17a0a"/>
    <item android:state_focused="true"
          android:color="#fff17a0a"/>
    <item android:state_enabled="false"
          android:color="@color/cpb_grey"/>
    <item android:state_enabled="true"
          android:color="#fffeaa0c"/>
</selector>

三、在java代码中使用

由于是有进度条的button，我们先来对进度条的设计进行了解。

按钮按下后会触发一个圆形的进度条，这个进度条上面的进度我们是可以自行控制的，如果进度为100，那么说明加载完毕，直接会显示按钮成功的时的状态，如果进度是-1，那么就说明加载失败，按钮会显示出错的状态，如果进度是0，那么就是按钮默认的状态。

 按钮默认的状态，进度=0

按钮加载成功的状态，进度=100.这里面显示图片（对勾）还是显示文字都可以自定义。

加载是吧，按钮显示错误的状态，进度=-1，使用×还是用文字或别的图片由自己定义。

CircularProgressButton是这个按钮的对象，我们找到这个控件后就可以进行设置了，设置方式也很简单。

举例：

1.显示不精准进度的按钮

CircularProgressButton circularButton01 = (CircularProgressButton) findViewById(R.id.circularButton01);
        circularButton01.setIndeterminateProgressMode(true); // 进入不精准进度模式
        circularButton01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CircularProgressButton btn = (CircularProgressButton) v;
                int progress = btn.getProgress();
                System.out.println("progress = " + progress);
                if (progress == 0) { // 初始时progress = 0
                    btn.setProgress(50); // 点击后开始不精准进度，不精准进度的进度值一直为50
                } else if (progress == 100) { // 如果当前进度为100，即完成状态，那么重新回到未完成的状态
                    btn.setProgress(0);
                } else if (progress == 50) { // 如果当前进度为50，那么点击后就显示完成的状态
                    btn.setProgress(100); // -1表示出错，显示出错的图片和背景，100表示完成，显示完成的图片和背景
                }
            }
        });

2.显示精准进度的按钮

按钮点击后调用simulateSuccessProgress方法，如果在进度加载时点击了按钮，那么按钮重新回到初始状态。

final CircularProgressButton circularButton03 = (CircularProgressButton) findViewById(R.id.circularButton03);
        circularButton03.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (circularButton03.getProgress() == 0) {
                    simulateSuccessProgress(circularButton03); // 如果是初始状态就开始进入进度条动画
                } else {
                    circularButton03.setProgress(0); // 如果不是初始状态，那么就回到初始状态
                }
            }
        });

/**
     * 设置成功的进度
     * @param button
     */
    private void simulateSuccessProgress(final CircularProgressButton button) {
        // 这里巧妙运用了valueAnimator这个类来计算动画的值，这个类本身就起计算作用，不处理任何动画，这里在计算好后自行进行了进度的设定
        ValueAnimator widthAnimation = ValueAnimator.ofInt(1, 100); // 设定范围为1到100
        widthAnimation.setDuration(1500); // 设定动画的持续时间
        widthAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); // 设定动画的插值器
        widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { // 在动画进行时进行处理
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                button.setProgress(value); // 设置进度为当前动画的进度
            }
        });
        widthAnimation.start(); // 开始动画的计算工作
    }

三、主要代码

1. xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="CircularProgressButton" />

    <!--
    textColor：全局字体颜色设置
    textSize：全局字体大小设置
    cpb_cornerRadius：按钮的边缘弧度数
    cpb_textIdle：默认的text文字
    cpb_textComplete：完成时显示的text
    cpb_textError：出错时显示的text
    cpb_iconComplete：完成时显示的图标，这个和cpb_textComplete不能共用
    cpb_iconError：出错时显示的图标，这个和cpb_textError不能共用
    cpb_paddingProgress：圆形进度条和按钮的边界的差值，设定后按钮会在走进度时缩小到小进度条，走完后再由小进度条扩大到原始按钮
    cpb_selectorComplete：自定义完成时按钮背景的颜色，包括获取焦点、按下、普通各种状态
    cpb_selectorError：自定义出错时按钮背景的颜色，包括获取焦点、按下、普通各种状态
    cpb_selectorIdle：自定义初始时按钮的背景色，包括获取焦点、按下、普通各种状态\n
     -->

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton06"
        android:layout_width="196dp"
        android:layout_height="64dp"
        android:layout_alignLeft="@+id/circularButton05"
        android:layout_below="@+id/circularButton05"
        android:layout_marginTop="15dp"
        android:textColor="@color/cpb_white"
        android:textSize="18sp"
        app:cpb_cornerRadius="48dp"
        app:cpb_selectorComplete="@drawable/complete_state_selector"
        app:cpb_selectorError="@drawable/error_state_selector"
        app:cpb_selectorIdle="@drawable/idle_state_selector"
        app:cpb_textComplete="Complete"
        app:cpb_textError="Error"
        app:cpb_textIdle="Upload" />

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton05"
        android:layout_width="196dp"
        android:layout_height="64dp"
        android:layout_below="@+id/circularButton04"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="34dp"
        android:textColor="@color/cpb_white"
        android:textSize="18sp"
        app:cpb_cornerRadius="48dp"
        app:cpb_selectorComplete="@drawable/complete_state_selector"
        app:cpb_selectorError="@drawable/error_state_selector"
        app:cpb_selectorIdle="@drawable/idle_state_selector"
        app:cpb_textComplete="Complete"
        app:cpb_textError="Error"
        app:cpb_textIdle="Upload" />

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton04"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_below="@+id/circularButton03"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:textColor="#00ffff"
        android:textSize="18sp"
        app:cpb_cornerRadius="10dp"
        app:cpb_textComplete="Complete"
        app:cpb_textError="Error"
        app:cpb_textIdle="upload" />

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton03"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/circularButton04"
        android:layout_below="@+id/circularButton02"
        android:layout_marginTop="28dp"
        android:textColor="#ffff00"
        android:textSize="18sp"
        app:cpb_cornerRadius="30dp"
        app:cpb_iconComplete="@drawable/ic_action_accept"
        app:cpb_iconError="@drawable/ic_action_cancel"
        app:cpb_textIdle="upload" />

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton02"
        android:layout_width="120dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/circularButton01"
        android:layout_below="@+id/circularButton01"
        android:layout_marginTop="14dp"
        android:textColor="#00ffff"
        android:textSize="18sp"
        app:cpb_cornerRadius="10dp"
        app:cpb_textComplete="Complete"
        app:cpb_textError="Error"
        app:cpb_textIdle="upload" />

    <com.dd.CircularProgressButton
        android:id="@+id/circularButton01"
        android:layout_width="120dp"
        android:layout_height="50dp"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:textColor="#ffff00"
        android:textSize="18sp"
        app:cpb_cornerRadius="30dp"
        app:cpb_iconComplete="@drawable/ic_action_accept"
        app:cpb_iconError="@drawable/ic_action_cancel"
        app:cpb_paddingProgress="15dp"
        app:cpb_textIdle="upload" />

</RelativeLayout>

2. java

package com.kale.buttontest;

import com.dd.CircularProgressButton;

import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CircularProgressButton circularButton01 = (CircularProgressButton) findViewById(R.id.circularButton01);
        circularButton01.setIndeterminateProgressMode(true); // 进入不精准进度模式
        circularButton01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CircularProgressButton btn = (CircularProgressButton) v;
                int progress = btn.getProgress();
                System.out.println("progress = " + progress);
                if (progress == 0) { // 初始时progress = 0
                    btn.setProgress(50); // 点击后开始不精准进度，不精准进度的进度值一直为50
                } else if (progress == 100) { // 如果当前进度为100，即完成状态，那么重新回到未完成的状态
                    btn.setProgress(0);
                } else if (progress == 50) { // 如果当前进度为50，那么点击后就显示完成的状态
                    btn.setProgress(100); // -1表示出错，显示出错的图片和背景，100表示完成，显示完成的图片和背景
                }
            }
        });

        CircularProgressButton circularButton02 = (CircularProgressButton) findViewById(R.id.circularButton02);
        circularButton02.setIndeterminateProgressMode(true);
        circularButton02.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CircularProgressButton btn = (CircularProgressButton) v;
                int progress = btn.getProgress();
                System.out.println("progress = " + progress);
                if (progress == 0) { // 初始时progress = 0
                    btn.setProgress(50); // 点击后开始不精准旋转，进度为50
                } else if (progress == -1) { // 如果当前进度为-1，即出错状态，那么重新回到初始状态
                    btn.setProgress(0);
                } else if (progress == 50) { // 如果当前进度为50，那么点击后就显示出错的状态
                    btn.setProgress(-1); // -1表示出错，显示出错的图片和背景
                }
            }
        });

        final CircularProgressButton circularButton03 = (CircularProgressButton) findViewById(R.id.circularButton03);
        circularButton03.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (circularButton03.getProgress() == 0) {
                    simulateSuccessProgress(circularButton03); // 如果是初始状态就开始进入进度条动画
                } else {
                    circularButton03.setProgress(0); // 如果不是初始状态，那么就回到初始状态
                }
            }
        });

        final CircularProgressButton circularButton04 = (CircularProgressButton) findViewById(R.id.circularButton04);
        circularButton04.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (circularButton04.getProgress() == 0) { // 如果是初始状态就开始进入进度条动画
                    simulateErrorProgress(circularButton04);
                } else {
                    circularButton04.setProgress(0); // 如果不是初始状态，那么就回到初始状态
                }
            }
        });

        final CircularProgressButton circularButton05 = (CircularProgressButton) findViewById(R.id.circularButton05);
        circularButton05.setIndeterminateProgressMode(true);
        circularButton05.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (circularButton05.getProgress() == 0) {
                    circularButton05.setProgress(50);
                } else if (circularButton05.getProgress() == 100) {
                    circularButton05.setProgress(0);
                } else {
                    circularButton05.setProgress(100);
                }
            }
        });

        final CircularProgressButton circularButton06 = (CircularProgressButton) findViewById(R.id.circularButton06);
        circularButton06.setIndeterminateProgressMode(true);
        circularButton06.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (circularButton06.getProgress() == 0) {
                    circularButton06.setProgress(50);
                } else if (circularButton06.getProgress() == -1) {
                    circularButton06.setProgress(0);
                } else {
                    circularButton06.setProgress(-1);
                }
            }
        });
    }

    /**
     * 设置成功的进度
     * @param button
     */
    private void simulateSuccessProgress(final CircularProgressButton button) {
        // 这里巧妙运用了valueAnimator这个类来计算动画的值，这个类本身就起计算作用，不处理任何动画，这里在计算好后自行进行了进度的设定
        ValueAnimator widthAnimation = ValueAnimator.ofInt(1, 100); // 设定范围为1到100
        widthAnimation.setDuration(1500); // 设定动画的持续时间
        widthAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); // 设定动画的插值器
        widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { // 在动画进行时进行处理
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                button.setProgress(value); // 设置进度为当前动画的进度
            }
        });
        widthAnimation.start(); // 开始动画的计算工作
    }

    /**
     * 设置出错时的进度条
     * @param button
     */
    private void simulateErrorProgress(final CircularProgressButton button) {
        ValueAnimator widthAnimation = ValueAnimator.ofInt(1, 99);
        widthAnimation.setDuration(1500);
        widthAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                button.setProgress(value); // 将当前动画的进度设置为按钮的进度
                if (value == 99) { // 如果按钮的进度到了99，那么直接设置为出错状态
                    button.setProgress(-1);
                }
            }
        });
        widthAnimation.start(); // 开始动画的计算
    }

}

源码下载：http://download.csdn.net/detail/shark0017/8354435