Android_自定义控件_进度控价

作者: 书虫大王X | 来源:发表于2019-10-30 22:29 被阅读0次

Android_自定义控件_进度控价
跟着徐宜生学Android——
Android_开发_Day28_自定义控件
组合控件1—— 设置框
Quartz 2D - 自定义进度控件
android 圆形进度条
拓展控件——拓展TextView
仿IWatch环形进度条自定义控件
每天五道Android面试题，轻松进大厂2018-12-20
Qt编写项目作品大全（自定义控件+输入法+大屏电子看板+视频监控

要实现的功能：

功能

代码流程

画贝塞尔曲线：

//画贝塞尔曲线

public class waveView extends View {

    private ValueAnimator va;
    private Paint mPaint;
    private Path mPath;
//    屏幕密度
    int  density = (int)(getResources().getDisplayMetrics().density);
//    波长
    private int waveLength = 200*density;
//    波峰
    private int waveCrest = 70*density;
//    动画起始点的偏移值
    private int speed;
    private int lineColor = Color.BLACK;
    private int lineSize = 10;


    public waveView(Context context) {
        this(context,null);
    }

    public waveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(lineColor);
        mPaint.setStrokeWidth(lineSize);
        mPaint.setStyle(Paint.Style.STROKE);

    }
  @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        startWave();
    }

    private void startWave(){

        va = ValueAnimator.ofInt(0,waveLength);
        va.setDuration(500);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.setRepeatMode(ValueAnimator.RESTART);
        va.setInterpolator(new LinearInterpolator());
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//                获取当前值
                speed = (int)valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        va.start();
    }
    public void stopWave(){
        if (va != null) {
            va.cancel();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPath = new Path();
//        计算有几个完整的周期
        int count = getWidth()/waveLength;
//        设置wave的起始点
        mPath.moveTo(-waveLength+speed,getHeight()/2);
//        获取中垂线
        int center = (int)getPivotY();
//        确定曲线的路径
        for(int start = -waveLength+speed;start < getWidth();start += waveLength){
            mPath.cubicTo(start,center,start + waveLength/4,center-waveCrest,start + waveLength/2,center);
            mPath.cubicTo(start + waveLength/2,center,start + waveLength*3/4,center+waveCrest,start + waveLength,center);
        }

        canvas.drawPath(mPath,mPaint);
    }

    public void setLineColor(int lineColor) {
        this.lineColor = lineColor;
        mPaint.setColor(lineColor);
    }

    public void setLineSize(int lineSize) {
        this.lineSize = lineSize;
        mPaint.setStrokeWidth(lineSize);
    }

    public void setWaveCrest(int waveCrest) {
        this.waveCrest = waveCrest;
    }

    public void setWaveLength(int waveLength) {
        this.waveLength = waveLength;
    }
}

画百分数文本和外圈圆环：

public class circleView extends View {

//    控件的外圈
    Paint circlePaint;
//    控件的百分数
    Paint textPaint;
    private int lineWidth = 5;
    private int lineColor = Color.BLACK;
    private int textColor = Color.GRAY;
    private int textSize = 50;
    private String text = "100%";
//    百分数的进度
    private float progress;
    //文字与中心线的距离
    private int centerSpace;


    public circleView(Context context) {
        this(context,null);
    }

    public circleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(lineColor);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeWidth(lineWidth);

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(textColor);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextSize(textSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int radius = Math.min(getWidth(),getHeight()/2) - 2*lineWidth;
//        getPivotX 获取中心点
        canvas.drawCircle(getPivotX(),getPivotY(),radius,circlePaint);

        text = (int)(progress)+"%";
//        计算文本的宽度
        int width = (int) textPaint.measureText(text);
//        获取文字矩阵
        Paint.FontMetricsInt fn = textPaint.getFontMetricsInt();
        canvas.drawText(text,getPivotX() - width/2,getPivotY() + (-fn.ascent)/2+centerSpace,textPaint);
    }


//    定义一系列的setget方法，供外部对控件属性进行设置
    public void setLineColor(int lineColor) {
        this.lineColor = lineColor;
        circlePaint.setColor(lineColor);
    }

    public void setLineWidth(int lineWidth) {
        this.lineWidth = lineWidth;
        circlePaint.setStrokeWidth(lineWidth);
    }

    public void setText(String text) {
        this.text = text;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
        textPaint.setColor(textColor);
    }

    public void setTextSize(int textSize) {
        this.textSize = textSize;
        textPaint.setStrokeWidth(textSize);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        if (this.progress >= 100) {
            this.progress = 100;
        }
        invalidate();
    }

    public float getProgress() {
        return progress;
    }

    public void setCenterSpace(int centerSpace) {
        this.centerSpace = centerSpace;
    }
}

继承viewGroup承载两个视图：

public class waveLodingView extends ViewGroup {

//    文本的进程
    private float progress;
    circleView cv;
    waveView wv;

    public waveLodingView(Context context) {
        this(context,null);
    }

    public waveLodingView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

//    viewGroup中，通过子视图来确定容器的尺寸（权力大过xml中的布局）
//    1.先调用这个函数测量控件的尺寸
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

//    3.在这里对控件进行布局
    //    对所有子视图进行布局
//    i:left   i1:top  i2:right i3:button
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        cv = new circleView(getContext());
        cv.setLineColor(Color.RED);
        cv.setLineWidth(40);
        cv.setCenterSpace(-80);
        cv.layout(0,0,getWidth(),getHeight());
        addView(cv);

        wv = new waveView(getContext());
        wv.setWaveCrest(30);
        wv.setWaveLength(100);
        wv.setLineColor(Color.RED);
        wv.layout(getWidth()/4,getHeight()/2-30,getWidth()*3/4,getHeight()/2+30);
        addView(wv);
    }

//    2.在这里控件的尺寸已经确定
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        cv.setProgress(progress);
        if (progress >= 100) {
            wv.stopWave();
        }
    }
    public float getProgress() {
        return progress;
    }
}

在xml创建waveLodingView 视图：

   <xn.ky.a1027_zdy_1.waveLodingView
       android:id="@+id/load"
       android:layout_width="300dp"
       android:layout_height="300dp"
       android:layout_centerInParent="true">
   </xn.ky.a1027_zdy_1.waveLodingView>

在MainActivity中实现waveLodingView 的onTouch方法：

public class MainActivity extends AppCompatActivity {

    waveLodingView lodingView;

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

        lodingView = findViewById(R.id.load);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){

            new Timer().schedule(new TimerTask() {
                @Override
                public void run() {
                    runOnUiThread(new Runnable() {
//                        将任务抛到主线程
                        @Override
                        public void run() {
                            lodingView.setProgress(lodingView.getProgress() + 5);
                        }
                    });

                }
            },0,100);
        }
        return true;
    }
}

成果展示

Android_自定义控件_进度控价
要实现的功能：画贝塞尔曲线：画百分数文本和外圈圆环：继承viewGroup承载两个视图：在xml创建wav...
跟着徐宜生学Android——
[TOC] Android 控件架构与自定义控件详解 Android控价架构控件树，上层控件负责下层子控件的测量...
Android_开发_Day28_自定义控件
Android_开发Day28自定义控件目的：学会组合一些系统控件成一个控件，以满足某些需要技术： <1> ...
组合控件1—— 设置框
之前的自定义控件——初识自定义控件，我们了解到了自定义控件分为三种，自制控件，组合控件，拓展控件。而我们在自制控...
Quartz 2D - 自定义进度控件
简单自定义下载进度控件使用UISlider作为控制进度条下载进度控件.gif 界面非常简单,storyBoard...
android 圆形进度条
圆形的进度条，自定义控件实现
拓展控件——拓展TextView
在先前的文章自定义控件——初识自定义控件中，我们已经对自定义控件的进行了描述和分类，其分类分别是自制控件组合控...
仿IWatch环形进度条自定义控件
一、环形进度条1、自定义属性2、绘制3、实现动态刷新机制4、部署控件二、进度条嵌套集合1、自定义属性2、控件部署...
每天五道Android面试题，轻松进大厂2018-12-20
一、View的绘制流程自定义控件： 1、组合控件。这种自定义控件不需要我们自己绘制，而是使用原生控件组合成的新控...
Qt编写项目作品大全（自定义控件+输入法+大屏电子看板+视频监控
一、自定义控件大全（一）、控件介绍超过150个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺...