Android_开发_Day29_自己绘制控件

Android_开发Day29自己绘制控件

目的：

在Android中很多时候系统的控件是不能满足需要的，组合方式定义控件又非常繁琐，因此此时需要自己画一个控件，才能满足需要

技术：

<1> 绘制控件时的步骤：

1.创建一个类并找一个类来继承
2.重写里面的三个构造方法
3.在onDraw(Canvas canvas)方法里绘制你的控件

<2> onDraw：

onDraw方法是系统调用的方法，在界面被创建之前改方法被系统调用，然后在里面用户可以自定义要画的东西，然后再由系统统一渲染到屏幕上，方法里面的一个参数canvas是系统提供的画布，在该画布上画控件，什么时候需要画控件，就是在系统的控件没法满足你要的控件的形状，特征和功能时就需要自己画控件，你画好的控件将由GPU渲染到屏幕上显示出来。缺点：如果频繁绘制那么占用内存可能会吃紧，因此能够使用系统的就不要自己画，原则。系统提供了一些基本的形状，下面看一看canvas里的一些基本方法：

方法 用法
drawLine() 参数是其实点坐标和终止点坐标最后加上一支画笔
drawCircle() 参数是圆点的坐标和半径和一支画笔
drawText() 参数是一个文本加要显示文本的x于y和一支画笔
drawBitmap() 参数是一张bitmap和一只画笔
drawColor() 参数就是一个颜色
drawOval() 画一个椭圆，参数是左右上下的距离和一支画笔
drawArc() 画一个扇形，参数是上下左右起始角度和终止角度和是否使用中心，最后还有一支画笔
<3> onMeasure方法：

加载控件时系统会调用此方法，其中的参数widthMeasureSpec是代表父控件预测的该控件的最大宽度，相对应的heightMeasureSpec是代表父控件预测的该控件的最大高度，一般在自己需要自定义控件的大小时可以重写该方法，如果不需要那父视图说你这个控件是多大那就是多大，调用关系如图：


image.png
<4> onSizeChanged方法：

控件测量完毕，或者控件尺寸改变了都会调用此方法，该方法一般作为一个过度，许多要控件定型后才能使用的代码可以在这里写。没 什么好讲的。

<5> 改变自定义控件的某个属性并及时展现出来的方法：

方法有多种，这里展示三种：
第一种：简单粗暴，点一下改变一下刷新一下
方法：1.讲要改变的属性弄成一个成员变量，并设置set，get方法
2.在onTouchEvent方法里面去set该属性
3.调用invalidate()方法，刷新并重绘控件
第二种：用一个子线程来每隔一定的时间改变一次，推荐使用Timer
方法：1.讲要改变的属性弄成一个成员变量，并设置set，get方法
2.new 一个Timer，调用schedule方法，参数传一个TimerTask接口对象，实现里面的run方法，run方法的内容就是set该属
性，第二个参数是多少秒后执行该run方法，传0，第三个参数是要隔多少秒后再次执行该方法，这个可以根据实际需要来
定。
3.调用invalidate()方法，刷新并重绘控件
缺点：上面的方法很多情况下会出错，因为我们在子线程里面去改变UI线程(主线程)的东西，系统很多时候不认账的，小弟怎么能动大哥的动西呢，但也不排除有些时候是可以的，具体是什么时候不清楚，可能和你写的代码的实际情况有关，可以自行百度，当然如果系统没报错，那你就尽情的用吧。若要改进可以用一个Handler，每当你改变完后通知主线程刷新就行了，小弟动不得大哥的东西，我通知你，让你自己动总行了吧。Handler用法可以参考以下代码：

       //用handler来接收消息
        final Handler handler = new Handler(){
            public void handleMessage(Message msg) {
                headPicture.invalidate();
            }
        };
        //显示剩余时间
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                headPicture.setAchieve(getDATE(startDate));
                handler.sendEmptyMessage(1);
            }
        },0, 1000);

第三种：还记得前面说Android中的动画时讲了几种动画，其中有一个ValueAnimator没用到么，因为它只能得到动画过程中的每一个中间值，却不会去做动画，说到这里是不是就发现什么了，我只要得到动画过程中的每一个值，然后手动set一下那个值，然后刷新一下不就行了吗，没错就是这样就可以做自定义控件的动画了。
方法：1.创建一个ValueAnimator的对象，然后ValueAnimator.ofInt/ValueAnimator.ofFloat你要的值是什么类型的就of什么，然后参
数传开始时的值和结束时的值就行，当然你要传中间值也没问题，从左往右依次传就行了。
2.添加监听器，调用addUpdateListener(),参数new一个ValueAnimator.AnimatorUpdateListener()接口，实现里面的
onAnimationUpdate方法，该方法会传一个ValueAnimator的对象过来，传过来时调用里面的getAnimatedValue()就得到了
这一时刻对应得值，赋值给要改变得属性即可，当然别忘刷新哦
下面是演示代码：

ValueAnimator va = ValueAnimator.ofInt(0, 360);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //改变属性值
                outer = valueAnimator.getAnimatedValue()
                //刷新
                invalidate();
            }
        });
        va.start();
<6> 画笔Paint的设置：

画笔Paint的设置来看一下里面的一些常用的方法：

方法 描述
setStrokeWidth 设置画笔的粗细，参数是一个整型变量
setColor 设置画笔的颜色，参数就是颜色值
setTextSize 设置文字的大小，在画文字的时候生效
setStyle 设置画笔的样式，是实心还是空心，参数是：STROKE(空心)，FILL(实心)
setAntiAlias 设置画笔是否抗锯齿，true还是false
setAlpha 设置alpha值，也就是透明度
setStrokeCap 设置画笔的落笔的笔锋
<7> 文字的画法以及位置的确定：

画文字可以使用canvas里面的方法drawText()，该方法的参数是文字的文本以及文字的x和y，和一只画笔，其中画笔决定了文字大小，x和y决定了文字的位置，文本决定文字内容，但是系统是怎么确定文字的位置的，就是用到了文字的基准线，如图：


8[00_00_03][20191130-095441].png

图中的基准线是紧贴文字底部的那条线，有点像英语书写时的基准线，所有字母都写在该线的上面，这样就能很好的对齐。
同时还有一些距离如上图中的，Ascent就是文字的整个高度，当然如果要得到文字的宽度就可以调用paint里面的measureText()方法来计算文字的宽度，返回值即宽度，参数就是你的文字字符串，如果要得到Ascent需要先创建一个FontMetricsInt对象，才能得到，因此计算文字的坐标时算的其实是基准线的坐标。

<8> 贝塞尔曲线的使用：

要画贝塞尔曲线用canvas已经不行了，因为canvas只提供了一些基础图形的方法，复杂的图案还需要用到Path，所谓的Path也就是一个路径，其实你画的任何图形都是一个路径，只要我们跟着这个路径画就能画出图形，Path的基本方法:

方法 用法
moveTo 参数是x，y就是你落笔的点在哪里，默认0，0
lineTo 连线的终点，参数也是x,y
cubicTo 画贝塞尔曲线，参数是三个点，起点终点和拉伸点
quadTo 也是画贝塞尔曲线，参数相比上一个少一个点，也就是起点，可以通过moveTo方法来设定
rXXXXTo 也就是上面的方法名前加一个r就代表坐标的计算方式换成了相对坐标，相对于上一次的坐标的相对坐标

如何将Path画出来，可以通过canvas里面的drawPath()方法来画出路径，参数是Path和Paint

<9> ViewGroup：

ViewGroup是一个抽象类，继承于它时必须要实现里面的方法onLayout()，该方法是布局的时候必要的方法，系统要得到ViewGroup的大小时会先去测量子控件的大小会调用onMeasure()方法，然后再调用onLayout()弄清楚子控件的布局。onLayout方法有四个参数，从左往右依次是：left，top，right，bottom，见名知其意就是上下左右的距离。

技术如何使用：

做一个水波流动效果的进图条，水波流动效果可以通过贝塞尔曲线来做，进度值的改变可以用上面的三种方法中的一种来做，文字的提示百分比需要自己手动画上去，然后外边用一个⚪来将整个控件包起来，形成一个整体。参考代码如下：
类⭕和文字：

package com.example.waveloadingbyself;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class CircleView extends View {
    Paint circlePaint;
    Paint textPaint;
    //-----------------------------------------------------------------//
    private int circleColor = Color.BLACK;
    private int circleWidth = 10;
    private int textColor = Color.BLACK;
    private int textSize = 50;
    private int centerYSpace;
    //-----------------------------------------------------------------//
    private double progress;

    public CircleView(Context context) {
        super(context);
        init();
    }

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

    private void init(){
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(circleColor);
        circlePaint.setStrokeWidth(circleWidth);
        circlePaint.setStyle(Paint.Style.STROKE);
        //-----------------------------------------------------------------//
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //确定半径
        int radius = Math.min(getWidth(), getHeight()/2 - circleWidth);
        //画⚪
        canvas.drawCircle(getPivotX(), getPivotY(), radius, circlePaint);
        //-----------------------------------------------------------------//
        //计算文本宽度
        System.out.println("CircleProgress:--"+progress);
        String text = (int) (progress*100)+"%";
        System.out.println("text:--"+text);
        int width = (int) textPaint.measureText(text);
        //获取文字的fontMetrics
        Paint.FontMetricsInt fm = textPaint.getFontMetricsInt();
        //画文字
        canvas.drawText(text, getPivotX()-width/2, getPivotY()+(-fm.ascent)/2+centerYSpace, textPaint);
    }

    public void setCircleColor(int circleColor) {
        this.circleColor = circleColor;
        circlePaint.setColor(circleColor);
    }

    public void setCircleWidth(int circleWidth) {
        this.circleWidth = circleWidth;
        circlePaint.setStrokeWidth(circleWidth);
    }

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

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

    public double getProgress() {
        return progress;
    }

    public void setProgress(double progress) {
        this.progress = progress;
        //System.out.println(progress);
        invalidate();
    }

    public void setCenterYSpace(int centerYSpace) {
        this.centerYSpace = centerYSpace;
    }
}

类波浪：

package com.example.waveloadingbyself;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

public class WaveView extends View {
    private Paint paint;
    private Path path;
    private ValueAnimator va;
    float density = getResources().getDisplayMetrics().density;

    private int waveLength = (int) (100*density);
    private int waveCrest = (int) (50*density);
    private int speed;
    private int lineColor = Color.BLACK;//线条颜色
    private int lineSize = 10;//线条粗细
    private int centerYSpace;

    public WaveView(Context context) {
        super(context);
        init();
    }

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

    private void init(){
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(lineColor);
        paint.setStrokeWidth(lineSize);
        paint.setStyle(Paint.Style.STROKE);
    }

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

        startWave();//开始动画
    }

    public 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);
        path = new Path();
        //计算周期，完整的波
        int count = getWidth() / waveLength;

        path.moveTo(-waveLength, getHeight() / 2);
        //获取中心线
        int centerY = (int) getPivotY();
        //确定曲线的路径
        for (int start = -waveLength+speed; start < getWidth(); start += waveLength) {
            path.cubicTo(start, centerY+centerYSpace, start+waveLength/4, centerY-waveCrest+centerYSpace, start+waveLength/2, centerY+centerYSpace);
            path.cubicTo(start+waveLength/2, centerY+centerYSpace, start+waveLength*3/4, centerY+waveCrest+centerYSpace, start+waveLength, centerY+centerYSpace);
        }
        canvas.drawPath(path, paint);
    }

    /**
     * 父容器会按照自己的规则给出一个方案
     * 子View通过MeasureSpec.getMode  .getSize获取相应的值
     * getMode：
     * Unspecified  无限制的  父容器没有对控件进行约束  肌肤不可能
     * At_Most  不能超过最大值  一般就是包裹内容
     * Exactly  确定的值  （200dp）
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);

        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                System.out.println("UNSPECIFIED："+width);
                break;
            case MeasureSpec.AT_MOST:
                System.out.println("AT_MOST："+width);
                break;
            default:
                System.out.println("EXACTLY："+width);
                break;
        }
    }

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

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

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

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

    public void setCenterYSpace(int centerYSpace) {
        this.centerYSpace = centerYSpace;
    }
}

组合类上述控件类：

package com.example.waveloadingbyself;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.ViewGroup;

public class WaveLodging extends ViewGroup {
    private double process;

    public WaveLodging(Context context) {
        super(context);
    }

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

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        WaveView waveView = new WaveView(getContext());
        waveView.layout(0, 0, getWidth(), getHeight());
        waveView.setLineSize(20);
        waveView.setLineColor(Color.BLUE);
        waveView.setCenterYSpace((int) (getHeight() / 2 - process *getHeight()));
        addView(waveView);

        CircleView circleView = new CircleView(getContext());
        circleView.setCircleColor(Color.RED);
        circleView.setCircleWidth(30);
        circleView.layout(0, 0, getWidth(), getHeight());
        circleView.setProgress(process);
        addView(circleView);

        CircleView circleView1 = new CircleView(getContext());
        circleView1.setCircleWidth(180);
        circleView1.setCircleColor(0xFFF8F8F9);
        circleView1.setProgress(process);
        circleView1.layout(-250, -250, getWidth()+250, getHeight()+250);
        addView(circleView1);

    }

    public void setProcess(double process) {
        this.process = process;
    }
}

MainActivity代码：

package com.example.waveloadingbyself;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        WaveLodging waveLodging = findViewById(R.id.lView);
        waveLodging.setProcess(0.33);
    }
}

xml里面的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.waveloadingbyself.WaveLodging
        android:id="@+id/lView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />

</RelativeLayout>

实际使用效果：

运行结果图.png

总结：

自定义控件的方式，最好的肯定是自己画的，但效率最高的还是系统的，因此当系统控件能用时一定要用系统的，不能用时才要自己定义，因此那些自己定义的好的控件可以封装起来保存好了，以便以后要用的时候随时都能拿出来用。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容