自定义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

时间: 2024-10-24 16:42:15

自定义View,又一种进度条的呈现,CircleProgressView使用解析的相关文章

Android自定义View实现钟摆效果进度条PendulumView_Android

在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条.  废话不多说,先上效果图   底部黑边是录制时不小心录上的,可以忽略.  既然是自定义View我们就按标准的流程来,第一步,自定义属性  自定义属性  建立属性文件  在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0&quo

Android自定义View实现钟摆效果进度条PendulumView

在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条. 废话不多说,先上效果图 底部黑边是录制时不小心录上的,可以忽略. 既然是自定义View我们就按标准的流程来,第一步,自定义属性 自定义属性 建立属性文件 在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0" enco

Windows 8开发入门(七) Windows 8 中的三种进度条和两种定时器

在Windows 8中的默认进度条也与时俱进,和之前Silverlight中的不一样.本文将讲述三种不同的进度条 ,另外在本文中也会将两种定时器. 进度条 主要属性: Value:当前进度值. Maximum:最大进度值. IsIndeterminate:指定进度条是否确定. 确定进度条:进度明 确的进度条,已完成进度以另外一种颜色显示 关键代码: <ProgressBar Maximum="100" Value="0" Height="20&quo

Android 七种进度条的样式_Android

当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

Android 七种进度条的样式

当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

ANDROID中自定义ADAPTER实现LISTVIEW动态刷新进度条

http://www.cnblogs.com/xiaoQLu/archive/2011/05/10/2042124.html 这几天做上传图片时,实现动态更新进度条,花费了我不少脑筋,一是android不是很熟悉,二是自己java基础,或者说是编程基础不扎实,不会学以致用,这两发块,是以后加强的重点! 费话不多说!说说我用到的几个知识,一是AsyncTask,实现异步上传,二是自定义Adapter,继承自BaseAdapter,activity使用的是ListActivity(这是费话哈--)

我的Android进阶之旅------&amp;gt;Android如何通过自定义SeekBar来实现视频播放进度条

首先来看一下效果图,如下所示: 其中进度条如下: 接下来说一说我的思路,上面的进度拖动条有自定义的Thumb,在Thumb正上方有一个PopupWindow窗口,窗口里面显示当前的播放时间.在SeekBar右边有一个文本框显示当前播放时间/总时间. step1.先来看一看PopupWindow的布局文件,seek_popu.xml,效果如下图所示: <?xml version="1.0" encoding="utf-8"?> <RelativeLa

Android自定义view实现水波纹进度球效果_Android

今天我们要实现的这个view没有太多交互性的view,所以就继承view. 自定义view的套路,套路很深       1.获取我们自定义属性attrs(可省略)       2.重写onMeasure方法,计算控件的宽和高       3.重写onDraw方法,绘制我们的控件 这么看来,自定义view的套路很清晰嘛. 我们看下今天的效果图,其中一个是放慢的效果(时间调的长) 我们按照套路来. 一.自定义属性 <declare-styleable name="WaveProgressVie

Android实战教程第二篇之简单实现两种进度条效果_Android

本文实例实现点击按钮模拟进度条下载进度,"下载"完成进度条消失,供大家参考,具体内容如下 代码如下: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&quo