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

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

需求

效果图如上图所示，要求如下：

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

---

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

实现方案

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

1. 把每一颗牙齿作为一个单位，我们去控制单个牙齿的背景色和小黄点的数量。然后绘制出四颗牙齿，按顺序摆放。优点是可以比较精确的控制每颗牙齿的显示情况。缺点是每颗牙齿都要去绘制，需要自己去用画笔滑出牙齿的轮廓，背景和小黄点。
2. 把四颗牙齿作为一个单位，分成上下两层。上层是一张中间透明，两边是白色的图片。下层是一个从上到下颜色由深到钱，小黄点由少到多的自定义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和前景图片做成一个控件，添加一些属性，使用起来会更方便一些。