自定义View，又一种进度条的呈现，CircleProgressView使用解析

转载请注明出处王亟亟的大牛之路

话不多说，先上效果图

循环旋转的状态

项目结构

一个Sample包，一个Lib包。Lib包里面其实只有一个累，很多内容都在素材文件里，比较建议把内容复制出来，贴到自己的项目中

主类:

public class MainActivity extends ActionBarActivity {


    CircleProgressView mCircleView;
    Switch mSwitchSpin;
    Switch mSwitchShowUnit;
    SeekBar mSeekBar;
    SeekBar mSeekBarSpinnerLength;

    @Override
    protected void onCreate(Bundle savedInstanceState) {


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mCircleView = (CircleProgressView) findViewById(R.id.circleView);
        mCircleView.setMaxValue(100);
        mCircleView.setUnit("%");
        mCircleView.setValue(0);

        //Setup Switch
        mSwitchSpin = (Switch) findViewById(R.id.switch1);
        mSwitchSpin.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    mCircleView.spin();
                } else {
                    mCircleView.stopSpinning();
                }
            }
        });

        mSwitchShowUnit = (Switch) findViewById(R.id.switch2);
        mSwitchShowUnit.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    mCircleView.setShowUnit(isChecked);
            }
        });

        //Setup SeekBar
        mSeekBar = (SeekBar) findViewById(R.id.seekBar);
        mSeekBar.setMax(100);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                mCircleView.setValueAnimated(seekBar.getProgress(),1500);
                mSwitchSpin.setChecked(false);
            }
        });

        mSeekBarSpinnerLength = (SeekBar) findViewById(R.id.seekBar2);
        mSeekBarSpinnerLength.setMax(360);
        mSeekBarSpinnerLength.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                mCircleView.setSpinningBarLength(seekBar.getProgress());
            }
        });


    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
//        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
//        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
//        if (id == R.id.action_settings) {
//            return true;
//        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onStart() {
        super.onStart();
        mCircleView.setValue(0);
        mCircleView.setValueAnimated(0);
    }
}

分析:
一个CircleProgressView自定义控件，2个SeekBar来控制进度条的百分比，以及长度，2个Switch用于切换显示内容，和一堆显示的TextView

可以在OnStart()调用setValue()方法，来给进度条赋值。而内部实现也是Handle传参的一系列操作

    /**
     * Set the value of the circle view without an animation.
     * Stops any currently active animations.
     */
    public void setValue(float _value) {
        Message msg = new Message();
        msg.what = AnimationMsg.SET_VALUE.ordinal();
        msg.obj = new float[]{_value, _value};
        mAnimationHandler.sendMessage(msg);
    }

在HandleMessage方法里又调用setValue(msg, circleView);
最终实现的是setValue(Message msg, CircleProgressView _circleView)方法

   private void setValue(Message msg, CircleProgressView _circleView) {
            _circleView.mValueFrom = _circleView.mValueTo;
            _circleView.mCurrentValue = _circleView.mValueTo = ((float[]) msg.obj)[0];
            _circleView.mAnimationState = AnimationState.IDLE;
            _circleView.invalidate();
        }

所以，你在代码操作的过程中，可以肆意调用SetValue()方法，不用在意会对其他部分的内容产生影响。

Sample代码里的 mSeekBarSpinnerLength.setMax(360);就等于mCircleView.setSpinningBarLength(seekBar.getProgress());给环状的SpinningBar传一个int的值让他呈现出一个角度为seekBar.getProgress()/360的图形。当然你传入的数值<360时，SeekBar拉到底了也不会成为整圆 那么>360的话只要到达360圆就已经呈现出来了，多余的值将没有效果。
效果如图：

然后我们来看下核心类CircleProgressView

public class CircleProgressView extends View 继承于View

然后洋洋洒洒1300+行的代码，我就不一一分析了，一些是画的一些是用的，亟亟就不做过多解释了，自己可以看源码，为了用那我们来看下一些配置

    //尺寸参数
    private int mLayoutHeight = 0;
    private int mLayoutWidth = 0;
    private int mFullRadius = 100;
    private int mCircleRadius = 80;
    private int mBarWidth = 40;
    private int mRimWidth = 40;
    private int mTextSize = 20;
    private float mContourSize = 1;
    private float mTextScale = 1;
    private float mUnitScale = 1;

对图形的整个大小啊，半径啊，字体的大小啊等进行设置。

    //颜色
    private final int mBarColorStandard =  0xff009688; //stylish blue
    private int mContourColor = 0xAA000000;
    private int mSpinnerColor = mBarColorStandard; //stylish blue
    private int mFillColor = 0x00000000;  //transparent
    private int mRimColor = 0xAA83d0c9;
    private int mTextColor = 0xFF000000;
    private int mUnitColor = 0xFF000000;
    private int[] mBarColors = new int[]{
            mBarColorStandard, //stylish blue
            mBarColorStandard, //stylish blue
    };

颜色的设置，圆的颜色，字的颜色等

  private float mSpinSpeed = 2.8f; 动画的滚动速度

总体来说，使用起来还是很方便的，附上源码大家自己看吧
http://yunpan.cn/cdLfFUxTaNydr 访问密码 6c65