关于自定义view 以及view中的动画实现

最近研究了一下自定义view，现在记一下笔记：看的人不如自己去google developer自己学
自定义view用于定制特殊效果的view，或者在不愿意嵌套多个view（布局）时候实现复杂布局，
首先需要继承View类，或者如果功能比较接进已经有了的view，比如LinearLayout 可以直接继承它，然后实现自己功能；
继承之后，需要实现其构造方法，主要是用于建立内置的变量，可以在xml布局中进行设置的那种，这里掠过，另外，一些初始化也需要在这里做，主要是Paint 对象的初始化，最好不要在ondraw时候初始Paint对象，因为会造成卡顿问题；
通过重写 onMesure 方法，指定view的实际可用的大小，因为他的参数中给出了相应的宽度，也就是xml中设置的大小，需要通过MeasureSpec.getSize 取出，单位是px ，如果想要设置控件大小，需要用工具类将dp转化为px 然后进行设置

   int h = MeasureSpec.getSize(heightMeasureSpec);
   int w = MeasureSpec.getSize(widthMeasureSpec);

获取大小是在onSizeChange 方法中获取的

  //用于设定内容大小 ，因为这个参数会显示实际的大小
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
//        Log.e(TAG, "onSizeChanged: " + "w :" + w + "   h:" + h);  //获取到的是实际的宽高变化
        //rect 是画矩形使用的东西
        mRect = new Rect(0, 0, 150, 150);  //画出来的不是实际大小，而在onmesure设置的是实际大小
        mWidth = w;
        mHeight = h;
        mMipmapRect = new Rect(50, 50, 100, 100);

    }

然后主要的是ondraw 方法，用于绘制界面：主要能够绘制 圆 线 矩形 图像，
其中绘制图像还是比较繁琐一点的，需要借助工具类 Metrix 类对图像做出 位移 旋转 缩放等操作，还可以通过cavas 设置其颜色的渐近变化 和 多个图像之间的遮盖关系，这都是与图层相关的问题：

   LinearGradient mshader=new LinearGradient(50,50,mWidth,mHeight,Color.RED,Color.BLUE,        Shader.TileMode.CLAMP);//长度在sizechangge时候才能获取
   mLinePaint.setShader(mshader);

这是颜色渐近变化，还可以使用repeat 镜像 等几种模式
图层遮盖使用 xformode 方法，具体没用过，可以用来实现圆角图片。。
通过rect 类加载图片可以实现图片的剪切。
主要说的是动画的两种实现方式：
主要都是通过ondraw 的不停重绘实现的，也就是调用 postInvalidate()，先要说一下对手势滑动的接收问题：先要重写ontouch方法，拿到回调，然后通过Detector 类进行动作的处理：

  //需要从ontouchevent 中对滑动事件进行关联
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        boolean result = mDetector.onTouchEvent(event);

        return result;
    }

  /*
    集成手势感应的方式
     */
    class mListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDown(MotionEvent e) {

            return true;
        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {

            return true;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//             mScroller.startScroll((int)e1.getX(),(int)e1.getY(),(int)e2.getX(),(int)e2.getY());
//            postInvalidate();
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

            //模仿滑动的时候的滚动
            mScroller.fling((int) e1.getX(), (int) e1.getY(), (int) velocityX/4, (int) velocityY/4, 0, Integer.MAX_VALUE, Integer.MIN_VALUE, Integer.MAX_VALUE);

            //操作1 的方式是通过view的重绘实现的，因为onfling 的调用了好几次 所以重绘了好几次 然后就有了动画效果
            if (Build.VERSION.SDK_INT >= 11) {
                //valueanimator 是对值的平滑过渡
                mScrollAnimator.setDuration(mScroller.getDuration());
                mScrollAnimator.start();
            }else{
            //第一种动画
            postInvalidate();//滑动之后进行更新UI的操作   通过重绘进行操作的步骤
             }
            return true;
        }
    }

这里onDown 方法必须实现，并且必须返回true，否则不能接受到任何回调
然后必须说一下Scroller 类，这个类是个工具类，具体作用，模拟滑动 拖动 或者fling 后不同时间的位置，通过getCurX 和getCurY 来得到一定时间的位置，用于模拟现实世界的变化，这是动画重要的一个类，尤其是在实现手势动作的时候。
第一种方式：通过ondraw 时候调用位置变化：

 if(!mScroller.isFinished()){
            mScroller.computeScrollOffset();
            mRect.offsetTo(mScroller.getCurrX()-75,mScroller.getCurrY()-75);
            Log.e(TAG, "x is :"+mScroller.getCurrX() );
            Log.e(TAG, "y is : "+mScroller.getCurrY() );
        }
        if (!mScroller.isFinished()) {
            postInvalidate();
        }

调用 mScroller.computeScrollOffset(); 会计算出时间内的一个位置 ，没结束就调用刷新继续计算，很直观
第二种方式：通过属性动画实现 ValueAnimator：
这个类主要作用是在一定时间内不停的进行回调，类似于一个闹钟，可以设置间隔和速度，然后调用方法，但是重绘仍然需要自己处理，它不做其他的事，只有值的变化：
在init 方法中：

  mScrollAnimator=ValueAnimator.ofFloat(0,1);
        mScrollAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                if (!mScroller.isFinished()) {
                    mScroller.computeScrollOffset();
                    //计算动画位置
                    mRect.offsetTo(mScroller.getCurrX()-75,mScroller.getCurrY()-75);
                    postInvalidate();
                } else {
                    if (Build.VERSION.SDK_INT >= 11) {
                        mScrollAnimator.cancel();
                    }


                }
            }
        });

这样就不停重绘，改变了位置，Scroller 类很重要，比如fling 这种操作，Scroller 会帮助计算出速度之后，算出某个时间的位置，以及结束之后滑动的总长度。
旋转是通过setRotate 实现的，不过会改变整个view的旋转。。旋转角度算法自己实现

public class TestView extends View {
    private Paint mPaint;
    private Paint mTextPaint;
    private Paint mLinePaint;
    private Paint bitmapPaint;
    private Bitmap mBitmap;//要画出来的bitmap对象
    private int drawableWidth;
    private int drawbleHeight;
    private Paint circlePaint;

    private GestureDetector mDetector;
    //处理图形
    Matrix mMatrix;
    String TAG = "view";
    int mWidth;
    int mHeight;
    Rect mMipmapRect;
    private int angle = 0;
    //获取到滑动的数据
    private Scroller mScroller;
    // 动画使用类
    private ValueAnimator mScrollAnimator;



    /*
    集成手势感应的方式
     */
    class mListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDown(MotionEvent e) {

            return true;
        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {

            return true;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//             mScroller.startScroll((int)e1.getX(),(int)e1.getY(),(int)e2.getX(),(int)e2.getY());
//            postInvalidate();
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            //e1 起点的x y； e2 当前点的位置坐标信息  x y 都是坐标信息
            float scrollTheta = vectorToScalarScroll(
                    velocityX,
                    velocityY,
                    e2.getX() - mWidth / 2,
                    e2.getY() - mHeight / 2);
//            Log.e(TAG, "e1 x :" + e1.getX());
//            Log.e(TAG, "e1 y :" + e1.getY());
//            Log.e(TAG, "e2 x :" + e2.getX());
//            Log.e(TAG, "e2 y :" + e2.getY());
//            Log.e(TAG, "velocity X :" + velocityX);
//            Log.e(TAG, "velocityY  :" + velocityY);
            //模仿滑动的时候的滚动
            mScroller.fling((int) e1.getX(), (int) e1.getY(), (int) velocityX/4, (int) velocityY/4, 0, Integer.MAX_VALUE, Integer.MIN_VALUE, Integer.MAX_VALUE);

//            postInvalidate();//滑动之后进行更新UI的操作   通过重绘进行操作的步骤

            //操作1 的方式是通过view的重绘实现的，因为onfling 的调用了好几次 所以重绘了好几次 然后就有了动画效果
            if (Build.VERSION.SDK_INT >= 11) {
                //valueanimator 是对值的平滑过渡
                mScrollAnimator.setDuration(mScroller.getDuration());
                mScrollAnimator.start();
            }
            return true;
        }
    }

    //需要从ontouchevent 中对滑动事件进行关联
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        boolean result = mDetector.onTouchEvent(event);

        return result;
    }

    public void setAngle(int angle) {
        this.angle = angle;
        invalidate();
        requestLayout();
    }

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

    public TestView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public TestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    //初始化paint
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(getResources().getColor(android.R.color.holo_blue_bright));
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿的效果 假如我要我的文字的位置在哪
        mTextPaint.setColor(getResources().getColor(android.R.color.black));
        mTextPaint.setTextSize(DensityUtils.sp2px(getContext(), 12));
//        mTextPaint.setShader();  设置颜色的渐进
        //设置线条 颜色的渐变 渐变起点（像素 x,y）终点（x,y） 起始颜色 ，终点颜色，渐变模式
        //clamp 渐变

        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//        mLinePaint.setColor(Color.RED);
//        mLinePaint.setShader(mshader);
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setStrokeWidth(DensityUtils.dp2px(getContext(), 4));
        //画图
        bitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.indicator_arrow);//拿到bitmap的对象
        drawableWidth = mBitmap.getWidth();
        drawbleHeight = mBitmap.getHeight();
        bitmapPaint = new Paint();
        mMatrix = new Matrix();

        //画圆
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setStyle(Paint.Style.STROKE);
        mDetector = new GestureDetector(TestView.this.getContext(), new mListener());

        //根据当前的版本创建Scroller 对象
        if (Build.VERSION.SDK_INT < 11) {
            mScroller = new Scroller(getContext());
        } else {
            mScroller = new Scroller(getContext(), null, true);
        }
        /**
         * 通过animation 动画实现 和通过 重绘进行实现的原理都是一样的 都调用了重绘
         * 这个动画作用是只要不调用停止   mScrollAnimator.cancel(); 就会一直有回调
         * 然后在回调里面不停改变绘制参数，对里面空间进行位置上面的重绘
         * 并没有调用view对象之类的东西， 不比直接在ondraw里面直观，但是更合理 （官方说的）
         * duaration  就是不停的调用的时间
          *
         */

        mScrollAnimator=ValueAnimator.ofFloat(0,1);
        mScrollAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                if (!mScroller.isFinished()) {
                    mScroller.computeScrollOffset();
                    //计算动画位置
                    mRect.offsetTo(mScroller.getCurrX()-75,mScroller.getCurrY()-75);
                    postInvalidate();
                } else {
                    if (Build.VERSION.SDK_INT >= 11) {
                        mScrollAnimator.cancel();
                    }


                }
            }
        });


    }

    //实际画出来的大小是由 setMeasuredDimension 设定的 根据设定获取到设定的宽高，然后将其画出来

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int h = MeasureSpec.getSize(heightMeasureSpec);
        int w = MeasureSpec.getSize(widthMeasureSpec);

//        Log.e(TAG, "onMeasure: " + "with=" + w + "   " + "height=" + h);
        //这样获取的就是像素点，也就是实际的像素大小，不是dp  需要将dp转化为px  然后运算

//        width=getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec); // 也可以这么设置宽高
//        height=getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(w, h);  //设置宽高， onsizechangge 时候显示出大小
    }

    //最后执行的ondraw 不需要太在意效率
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setRotation(30);
        canvas.drawRect(mRect, mPaint);

        /*
         画出文字和直线
         */
//        canvas.drawText("hello world", 50, 50, mTextPaint);
//        //设置渐变
//        LinearGradient mshader=new LinearGradient(50,50,mWidth,mHeight,Color.RED,Color.BLUE, Shader.TileMode.CLAMP);//长度在sizechangge时候才能获取
//        mLinePaint.setShader(mshader);
//        canvas.drawLine(50, 50, mWidth, mHeight, mLinePaint);
        /*
        画出bitmap
         */
//        canvas.drawBitmap(mBitmap,0,0,bitmapPaint);
        //其实是剪切图形是时候比较有用
//        canvas.drawBitmap(mBitmap,new Rect(20,20,160,160),new Rect(40,40,150,150),bitmapPaint);
//          mMatrix.

//        mMatrix.setTranslate(mWidth / 2, mHeight / 2);//图片平移  确定位置
//
//        //先旋转之后再从x 宽度上面进行拉伸两倍，高度不变
//        mMatrix.postScale(1, 2, mWidth / 2, mHeight / 2);
//        mMatrix.postRotate(angle, mWidth / 2, mHeight / 2);//图片根据角度1和初始位置进行旋转
//        canvas.drawBitmap(mBitmap, mMatrix, bitmapPaint);
//
//        //画圆
//        canvas.drawCircle(mWidth/2,mHeight/2,DensityUtils.dp2px(getContext(),70),circlePaint);
//        tickScrollAnimation();

        /**scroller 是个能够模拟滑动的类，根据滑动会给出一系列的值 然后进行界面重绘
         * 通过scroller 类进行重绘
         * 原理很直观，每次调用后重新得到scroller的位置
         *
         */
//        if(!mScroller.isFinished()){
//            mScroller.computeScrollOffset();
//            mRect.offsetTo(mScroller.getCurrX()-75,mScroller.getCurrY()-75);
//            Log.e(TAG, "x is :"+mScroller.getCurrX() );
//            Log.e(TAG, "y is : "+mScroller.getCurrY() );
//        }
//        if (!mScroller.isFinished()) {
//            postInvalidate();
//        }
        /**
         * 通过动画操作运动
         * 通过动画也能够实现，但是实现原理？？
         *  动画类会在设定的时间内不停的回调 然后就会执行重新绘制
         */


    }
//    private void tickScrollAnimation() {
//        if (!mScroller.isFinished()) {
//            mScroller.computeScrollOffset();
//            setPieRotation(mScroller.getCurrY());
//
//        } else {
//           if (Build.VERSION.SDK_INT >= 11) {
//               mScrollAnimator.cancel();
//            }
//            onScrollFinished();
//
//        }
//    }
    Rect mRect;

    //用于设定内容大小 ，因为这个参数会显示实际的大小
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
//        Log.e(TAG, "onSizeChanged: " + "w :" + w + "   h:" + h);  //获取到的是实际的宽高变化
        //rect 是画矩形使用的东西
        mRect = new Rect(0, 0, 150, 150);  //画出来的不是实际大小，而在onmesure设置的是实际大小
        mWidth = w;
        mHeight = h;
        mMipmapRect = new Rect(50, 50, 100, 100);

    }


    /**
     * 旋转的工具类 计算旋转位置
     * Helper method for translating (x,y) scroll vectors into scalar rotation of the pie.
     *
     * @param dx The x component of the current scroll vector.
     * @param dy The y component of the current scroll vector.
     * @param x  The x position of the current touch, relative to the pie center.
     * @param y  The y position of the current touch, relative to the pie center.
     * @return The scalar representing the change in angular position for this scroll.
     */
    private static float vectorToScalarScroll(float dx, float dy, float x, float y) {
        // get the length of the vector
        float l = (float) Math.sqrt(dx * dx + dy * dy);

        // decide if the scalar should be negative or positive by finding
        // the dot product of the vector perpendicular to (x,y).
        float crossX = -y;
        float crossY = x;

        float dot = (crossX * dx + crossY * dy);
        float sign = Math.signum(dot);

        return l * sign;
    }
}