美文网首页
自定义Progress进度条

自定义Progress进度条

作者: 破荒之恋 | 来源:发表于2016-12-27 13:18 被阅读88次

    自定义Progress进度条

    先定义一个类继承View,实现构造函数(3个),并重写onDraw()方法,定义画笔,开始画图。

    重写onMeasure方法

    1、边界参数-------widthMeasureSpec和heightMeasureSpec,效率的原因以整数的形式传入。在它们使用之前,首先要做的是使用MeasureSpec类的静态方法getMode和getSize来解释。

    2、specMode有三种
    MeasureSpec.EXACTLY --->边界已经确定,match_parent,fill_parent,50dp
    MeasureSpec.AT_MOST---->父控件能给的最大尺寸,这样子View会根据这个上限来设置自己的尺寸,wrap_content.
    MeasureSpec.UNSPECIFIED -->未指定大小,可以是任意大小。这种情况不多,一般都是父控件是AdapterView,通过measure方法传入的模式。

    3、setMesauredDimension(),这个方法必须由onMeasure(int,int)来调用,来存储测量的宽,高值,如果是含有子view的还要调用measureChildren()

    在values文件夹下定义一个attrs.xml,自定义属性

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <declare-styleable name="CustomView">
                <attr name="radius" format="dimension"/>
                <attr name="stroke_width" format="dimension"/>
                <attr name="back_circle_color" format="color"/>
                <attr name="front_circle_color" format="color"/>
                <attr name="text_visibility" format="boolean"/>
            </declare-styleable>
        </resources>
    

    在activity_main中声明命名空间及使用自定义属性

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:attrs="http://schemas.android.com/apk/res-auto"
    
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        tools:context="com.xht.android.customerview.MainActivity">
    
        <com.xht.android.customerview.CustomView
            android:id="@+id/custom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            attrs:radius="80dp"
            attrs:stroke_width="15dp"
            />
    </RelativeLayout>
    

    自定义Progress的主代码编写

        /**
         * Created by Administrator on 2016-10-18.
         *
         *  自定义一个进度条
         */
        
        public class CustomView extends View {
        
            private static final int DEFAULT_RADIUS = 200;
            private float mRadius=200;//园的半径
            private float mStrokeWidth=50;//环的宽度
            private float mStrokeHalf=mStrokeWidth/2;
            private float mX=200+mStrokeHalf;
            private float mY=200+mStrokeHalf;//x、y坐标-----控制图形的中心点
            private Paint mPaintBackCirle;//背景白色圆环画笔
            private Paint mPaintFromCirle;//前景绿色扇形圆环画笔
            private Paint mPaintText;//进度的字体画笔
            private RectF mRectf;
            private int progress=0;
            private int mTargetProgress=70;
            private int maxProgress=100;
            private int mWidth;//屏幕宽高
            private int mHeight;
        
            public CustomView(Context context) {
                this(context,null);
        
            }
        
            public CustomView(Context context, AttributeSet attrs) {
                this(context, attrs,0);
            }
        
            public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
                super(context, attrs, defStyleAttr);
                if (attrs!=null){
                    //获取半径和环形宽度等
                    TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.CustomView);
                    mRadius=array.getDimensionPixelSize(R.styleable.CustomView_radius,DEFAULT_RADIUS);
                    mStrokeWidth=array.getDimensionPixelSize(R.styleable.CustomView_stroke_width,DEFAULT_RADIUS);
                    array.recycle();
                }
                    init();
            }
        
            private void init() {
                mPaintBackCirle=new Paint();
                mPaintBackCirle.setAntiAlias(true);
                mPaintBackCirle.setColor(Color.WHITE);
                mPaintBackCirle.setStrokeWidth(mStrokeWidth);
                mPaintBackCirle.setStyle(Paint.Style.STROKE);
        
        
                mPaintFromCirle=new Paint();//画笔
                mPaintFromCirle.setAntiAlias(true);
                mPaintFromCirle.setColor(Color.BLUE);//颜色
                mPaintFromCirle.setStrokeWidth(mStrokeWidth);//环的宽度
                mPaintFromCirle.setStyle(Paint.Style.STROKE);//环
        
                mPaintText=new Paint();//画笔
                mPaintText.setAntiAlias(true);
                mPaintText.setColor(Color.WHITE);//颜色
                mPaintText.setTextSize(80);//设置字体大小
                mPaintText.setTextAlign(Paint.Align.CENTER);//设置到中心
        
              //  mRectf = new RectF(mStrokeHalf,mStrokeHalf,mRadius*2+mStrokeHalf,mRadius*2+mStrokeHalf);
        
            }
        
            @Override
            protected void onDraw(Canvas canvas) {
                //super.onDraw(canvas);
                initRectF();
        
                float angle=progress/(float)maxProgress*360;//转换成角度
                canvas.drawCircle(mWidth/2,mHeight/2,mRadius,mPaintBackCirle);//画圆
                canvas.drawArc(mRectf,-90,angle,false,mPaintFromCirle);
                canvas.drawText(progress+"%",mWidth/2,mHeight/2,mPaintText);
                if (progress<maxProgress){
                    progress+=2;
                    //强制绘制
                    invalidate();
                }
            }
            //画矩形
            private void initRectF(){
                if (mRectf==null){
                    mRectf=new RectF();
                    int viewSize= (int) (mRadius*2);
                    int left=(mWidth-viewSize)/2;
                    int top=(mHeight-viewSize)/2;
                    int right=left+viewSize;
                    int buttom=top+viewSize;
                    mRectf.set(left,top,right,buttom);
                }
            }
            @Override
            protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
                super.onMeasure(widthMeasureSpec, heightMeasureSpec);
                mWidth = getRealSize(widthMeasureSpec);//获取屏幕宽
                mHeight = getRealSize(heightMeasureSpec);//获取屏幕高
                setMeasuredDimension(mWidth,mHeight);
            }
            public int getRealSize(int measureSpec){
                int result=-1;
                int mode=MeasureSpec.getMode(measureSpec);//模式
                int size=MeasureSpec.getSize(measureSpec);//尺寸
        
                if (mode==MeasureSpec.AT_MOST||mode==MeasureSpec.UNSPECIFIED){
                    //自己计算
                    result= (int) (mRadius*2+mStrokeWidth);
                }else{
                    result=size;
                }
                return result;
            }
        }
    
    
    
    
    //插入图片
    
    这里写图片描述

    相关文章

      网友评论

          本文标题:自定义Progress进度条

          本文链接:https://www.haomeiwen.com/subject/whzsvttx.html