Androd自定义控件（二）自定义类继承view

来源：互联网发布：程序员团队建设编辑：程序博客网时间：2024/05/06 05:34

在自定义控件（一）中呢，大家已经对自定义控件有了一个基本的认识，今天就和大家分享一下如何自定义类继承view来实现我们的功能。

需求

这里写图片描述
效果图如上图所示，要求如下：

背景颜色从上到下由深变浅。
小黄点的数量从上到下由多到少。
小黄点的颜色大小随机。
该控件可分为5个等级，最佳为背景全白，没有小黄点。最严重为颜色最深，小黄点最多。

好，需求就是这个样子。看到这里呢，希望小伙伴们先不要着急往下看，可以设身处地的想一想，如果是自己做的话，要怎样实现。

实现方案

接下来跟大家分享一下我的实现方案。看到这个需求我想到的方案有两个。

把每一颗牙齿作为一个单位，我们去控制单个牙齿的背景色和小黄点的数量。然后绘制出四颗牙齿，按顺序摆放。优点是可以比较精确的控制每颗牙齿的显示情况。缺点是每颗牙齿都要去绘制，需要自己去用画笔滑出牙齿的轮廓，背景和小黄点。
把四颗牙齿作为一个单位，分成上下两层。上层是一张中间透明，两边是白色的图片。下层是一个从上到下颜色由深到钱，小黄点由少到多的自定义view。通过绘制不同的背景层，显示我们要的效果。优点是只需要绘制背景即可实现我们要的功能，不需要去分别绘制每颗牙齿的轮廓。鉴于我们的需求，不需要精确到每颗牙齿，这里我们选择第二种实现方案。

具体实现

我们先梳理一下第二种实现方式需要用到的知识点

1.自定义类继承view实现自定义控件的步骤。

2.如何去测量控件的大小。

3.画笔的使用。

好，接下来我们来按步骤实现这个控件。

初始化

/**     * 定义两种模式,平均和渐变     */    public enum MODE {        AVERAGE, SHADE    }    public Chart(Context context) {        super(context);        init();    }    public Chart(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public Chart(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        mPaint = new Paint();        mPaint.setAntiAlias(true);        random = new Random();        isNull = false;        isBig = false;        deltaX = 20;        deltaY = 30;        bgAlpha = 50;        sizeY = 1;        floatY = 10;        de = 3;        mode = MODE.AVERAGE;    }

为了让小黄点从上到下由少到多的显示，我是这样实现的，随机生成一个0-20的初始Y轴坐标，然后绘制每列的小黄点。小黄点的间距是逐渐减小的，这样小黄点就会越来越密集。而X的坐标是一个初始值加上一个随机值，这样绘制出来的小黄点每两列间距也是随机的。显示效果会比较好看。
在初始化的方法里，我们初始化了一些x轴和y轴的初始数据。同时我定义了两种模式，一种是小黄点均匀分布，两一种是逐渐增多。

测量

系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。
所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMesure方法”：

重写之前先了解MeasureSpec的specMode,一共三种类型：

EXACTLY：一般是设置了明确的值或者是MATCH_PARENT

AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT

UNSPECIFIED：表示子布局想要多大就多大，很少使用

下面是测量的方法

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(getMeasuredLength(widthMeasureSpec, true, this), getMeasuredLength(heightMeasureSpec, false, this));    }    /**     * 根据布局模式计算宽高     *     * @param measureSpec     * @param isWidth     * @return     */    public static int getMeasuredLength(int measureSpec, boolean isWidth, View view) {        int result;        int specMode = View.MeasureSpec.getMode(measureSpec);        int specSize = View.MeasureSpec.getSize(measureSpec);        if (specMode == View.MeasureSpec.EXACTLY) {            result = specSize;        } else {            if (isWidth) {                result = view.getPaddingLeft() + view.getPaddingRight();            } else {                result = view.getPaddingTop() + view.getPaddingBottom();            }            if (specMode == View.MeasureSpec.AT_MOST) {                result = Math.min(result, specSize);            }        }        return result;    }

绘制

@Override    protected void onDraw(Canvas canvas) {        //isNull为true,背景为纯白色,不显示牙菌斑        if (isNull) {            //填充背景颜色            mPaint.setColor(0xffffffff);            canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);        } else {            //填充背景颜色            mPaint.setColor(0xffFEF8ED);            //绘制点//        int canvasWidth = canvas.getWidth();            int canvasHeight = canvas.getHeight();            LinearGradient lg = new LinearGradient(0, 0, 0, canvasHeight, 0x7ff1b351, 0xfff1b351, Shader.TileMode.MIRROR);            mPaint.setShader(lg);            mPaint.setAlpha(bgAlpha);            canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);            int x = 0;            //绘制Cap为ROUND的点            mPaint.setStrokeCap(Paint.Cap.ROUND);            switch (mode) {                case AVERAGE:                    for (int i = 0; i < 80; i++) {                        int startX = deltaX + random.nextInt(10);//x每次增加的距离                        int startY = 0 + random.nextInt(floatY);                        x = x + startX;                        int y = startY;                        for (int j = 0; j < 80; j++) {                            int alpha = 70 + random.nextInt(100);//随机生成透明度的点                            int size = 5 + random.nextInt(5);//设置线宽，如果不设置线宽，无法绘制点                            mPaint.setStrokeWidth(size);                            mPaint.setAlpha(alpha);                            mPaint.setShader(null);//清空渐变色                            canvas.drawPoint(x, y + deltaY, mPaint);                            y = y + deltaY;                        }                    }                    break;                case SHADE:                    for (int i = 0; i < 80; i++) {                        int startX = deltaX + random.nextInt(10);//x每次增加的距离                        int startY = 0 + random.nextInt(floatY);                        x = x + startX;                        int deltay = deltaY;                        int y = startY;                        boolean isFirst = true;//                    Log.e(TAG, "" + startY);                        for (int j = 0; j < 80; j++) {                            int alpha = 70 + random.nextInt(100);//随机生成透明度的点                            int size;                            if (isBig) {                                size = (int) ((5 + random.nextInt(10)) * de / 3);                            } else {                                size = (int) ((3 + random.nextInt(7)) * de / 3);//设置线宽，如果不设置线宽，无法绘制点                            }                            mPaint.setStrokeWidth(size);                            mPaint.setAlpha(alpha);                            if (deltay < 15) {                                deltay = 20;                            }                            if (isFirst) {                                canvas.drawPoint(x, y, mPaint);                                isFirst = false;                            } else {                                canvas.drawPoint(x, y + deltay, mPaint);                                y = y + deltay;                            }                            deltay -= sizeY;                        }                    }                    break;            }        }    }

在这里，我们给先给画笔设置一个线性随机色，绘制背景。
然后设置设置画笔粗细为随机，透明度随机，来绘制小黄点。为了使小黄点在不同分辨率上显示出相同的效果，它的像素值我们来根据手机的分辨率去计算。

public int getDis(Activity activity) {        DisplayMetrics metric = new DisplayMetrics();        activity.getWindowManager().getDefaultDisplay().getMetrics(metric);        int width = metric.widthPixels; // 屏幕宽度（像素）        int height = metric.heightPixels; // 屏幕高度（像素）        float density = metric.density; // 屏幕密度（0.75 / 1.0 / 1.5 / 2.0）        int densityDpi = metric.densityDpi; // 屏幕密度DPI（120 / 160 / 240 / 320）        if (density < 1.0) {            return -1;        } else if (density == 1.0) {            return 0;        } else if (density == 1.5) {            return 1;        } else {            return 2;        }    }

引用

到这里这个控件基本上就写完了，然后我们需要给外部提供一个方法，去设置这个控件的不同状态。

/**     * 根据不同的时间,显示不同的背景(小图)     *     * @param time     */    public void setChartLittele(int time, float de) {        this.de = de;        if (time >= 400) {            setBg(true, 0, 0, 0, 0, 0, Chart.MODE.SHADE);        } else if (time >= 320 && time < 400) {            setBg(false, 26, 36, 1, 20, 10, Chart.MODE.SHADE);        } else if (time >= 240 && time < 320) {            setBg(false, 22, 32, 1, 20, 20, Chart.MODE.SHADE);        } else if (time >= 160 && time < 240) {            setBg(false, 18, 28, 1, 20, 30, Chart.MODE.SHADE);        } else if (time >= 80 && time < 160) {            setBg(false, 14, 24, 1, 20, 40, Chart.MODE.SHADE);        } else if (time >= 0 && time < 80) {            setBg(false, 10, 20, 1, 20, 50, Chart.MODE.SHADE);        }    }/**     * 设置背景牙菌斑的密集程度     *     * @param deltaX  x轴每次往后移动的距离(随机)     * @param deltaY  y轴每次往下移动的距离     * @param sizeY   渐变模式y每次减少的距离     * @param floatY  Y轴开始的随机坐标     * @param bgAlpha 背景渐变色的透明度     * @param mode    模式     */    public void setBg(boolean isNull, int deltaX, int deltaY, int sizeY, int floatY, int bgAlpha, MODE mode) {        this.isNull = isNull;        this.deltaX = deltaX;        this.deltaY = deltaY;        this.sizeY = sizeY;        this.floatY = floatY;        this.bgAlpha = bgAlpha;        this.mode = mode;        invalidate();    }

看一下布局文件

<LinearLayout 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"    android:background="#fff"    android:gravity="center" >    <FrameLayout        android:layout_width="115dp"        android:layout_height="115dp" >        <com.oracleen.view.Chart            android:id="@+id/chart"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <ImageView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@drawable/check_right_second" />    </FrameLayout></LinearLayout>

这里我们用了一个framelayout，上层是一张镂空的图片，下层是我们绘制的背景。
然后在activity中设置背景的显示级别。

chart = (Chart) findViewById(R.id.chart);chart.setChartLittele(300, getDis(this));

OK，搞定。demo链接。
demo

下一章我会和大家分享一下组合view的实现，把今天实现的view和前景图片做成一个控件，添加一些属性，使用起来会更方便一些。

3 0