wing带你玩转自定义view系列（1） 仿360内存清理效果

本篇是接自 手把手带你做自定义view系列

宗旨都是一样，带大家一起来研究自定义view的实现，与其不同的是本系列省去了简单的坐标之类的讲解，重点在实现思路，用简洁明了的文章，来与大家一同一步步学习。

转载请注明出处：http://blog.csdn.net/wingichoy/article/details/50500479

上一篇介绍了:神奇的贝塞尔曲线，这篇就来研究其应用。

我自己的学习方法是：学习了贝塞尔曲线之后，去研究他的规律，然后开始联想有没有见过类似的效果，最后自己去研究实现，在没有遇到绝对困难的时候，独立思考。只有遇到了绝对困难或者做出来效果之后，才去参考其他人的做法。

好了，废话不多说了，来看看效果图：

图片是从360安全卫士apk里面解压的。一张背景图，一张小绿的图片。

先定义一些属性

private int mWidth;
    private int mHeight;
    //线的Y坐标
    private int mLineY = 600;
    //判断是否画线回弹
    private boolean isDrawBack = false;

    private int mBitmapX;
    private int mBitmapY;

    //飞行的百分比
    private int mFlyPercent = 100;
    //辅助点坐标 x坐标为线段中点，
    Point supPoint = new Point(350, mLineY);

首先来画背景图片 ，和小人，这里背景图片大小不对，没想到有什么好的方法，这里先写死（求解决，求不打死）。

 Bitmap bitmap = BitmapFactory.decodeResource(getResources(), com.wingsofts.my360clean.R.drawable.mb);

        BitmapFactory.Options opt = new BitmapFactory.Options();
        opt.inJustDecodeBounds = true;

//        BitmapFactory.decodeResource(getResources(), com.wingsofts.my360clean.R.drawable.t,opt);
//        int bgWidth = opt.outWidth;
//        int bgHeight = opt.outHeight;

        //按线的长度缩放背景图
//        Log.e("wing",bgWidth + " " +scale+"");
        opt.inSampleSize= 2;
//        opt.outWidth = 500;
        opt.inJustDecodeBounds = false;
        Bitmap background =BitmapFactory.decodeResource(getResources(), com.wingsofts.my360clean.R.drawable.t,opt);

        Paint p = new Paint();
        p.setStyle(Paint.Style.STROKE);
        p.setStrokeWidth(20);
        Path path = new Path();

        //坐标写死微调。。。别打我
        canvas.drawBitmap(background,100,mLineY - background.getHeight()+100,p);

        Point endPoint = new Point(600, mLineY);

然后画两个圈圈。

        p.setColor(Color.GRAY);
        canvas.drawCircle(100, endPoint.y, 10, p);
        canvas.drawCircle(endPoint.x,endPoint.y,10,p);

之后根据一个标记位 isDrawBack来判断是否画线反弹。这里默认是不反弹。

            p.setColor(Color.YELLOW);
            path.moveTo(100, mLineY);
            path.quadTo(supPoint.x, supPoint.y, endPoint.x, endPoint.y);//绘制贝塞尔曲线，
            canvas.drawPath(path, p);
            canvas.drawPoint(supPoint.x, supPoint.y, p);

            mBitmapX = supPoint.x - bitmap.getWidth() / 2;
            mBitmapY = (supPoint.y -mLineY)/2 + mLineY- bitmap.getHeight();
            canvas.drawBitmap(bitmap, mBitmapX, mBitmapY, p);

注意上面bitmap的坐标计算，这里为了方便，贝塞尔曲线只画中点的。#实际上是不会# 观察辅助点坐标

猜测辅助点到切线点  和切线点到mLineY的距离相等，然后计算出bitmap所在的坐标，进行绘制。

然后来绘制下拉时候的样子，重写onTouchEvent，主要是改变辅助点坐标和bitmap坐标,在action_move改变坐标 最后通知重绘。重写action_up来改变最重点的坐标， 改变isDrawBack标记位，通知阶段为上弹阶段。

知识补充：getX是相对view的坐标  getRawX是相对屏幕的坐标.

 @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:

                supPoint.x = (int) event.getX();
                if(event.getY()>mLineY)
                supPoint.y = (int) event.getY();

                invalidate();
                break;
            case MotionEvent.ACTION_UP:

                endX = (int) event.getX();
                endY = (int) event.getY();

                isDrawBack = true;
                invalidate();
                break;
        }
        return true;
    }

最后来绘制回弹的效果，相信看过之前我的文章的都知道我采用一种percent办法。这里给一个参数mFlyPercent，从100开始递减，递减辅助点的y坐标和bitmap的y坐标，来实现动画效果。 如果mFlyPercent<0 则代表绘制完毕  重置标志位和百分比。

if (isDrawBack) {

            p.setColor(Color.YELLOW);
            path.moveTo(100, mLineY);
            path.quadTo(supPoint.x, mLineY + (supPoint.y - mLineY) * mFlyPercent / 100, endPoint.x, endPoint.y);
            canvas.drawPath(path, p);

            if(mFlyPercent >0) {
                canvas.drawBitmap(bitmap, mBitmapX, mBitmapY * mFlyPercent/100, p);
                mFlyPercent -=5;
                postInvalidateDelayed(10);
            }else {

                mFlyPercent = 100;
                isDrawBack = false;
            }

这样，变结束了模仿360内存清理效果，对于x坐标的计算。。。日后再研究。

本项目地址：点击打开链接

下一篇：wing带你玩转自定义view系列（2） 简单模仿qq未读消息去除效果