转载请注明出处王亟亟的大牛之路
话不多说,先上效果图
循环旋转的状态
项目结构
一个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