Canvas的实际使用--自定义搜索效果

上面效果是使用Canvas实现的一个搜索效果，涉及到三个部分的绘制：搜索放大镜的圆、放大镜的手柄、线条，根据属性动画执行的多少及移动的距离进行绘制；
1、extends View 并重写onDraw方法

public class MySearchView extends View{
    private Paint mPaint;
    private BaseController mController;
    public MySearchView(Context context) {
        this(context,null);
    }

    public MySearchView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MySearchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStrokeWidth(5);
        mPaint.setColor(Color.RED);
    }
    public void setController(BaseController controller){
        this.mController=controller;
        mController.setSearchView(this);
        invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mController.draw(canvas,mPaint);
    }

    /**
     * 开启动画
     */
    public void startAnimation(){
        if(mController!=null){
            mController.startAnim();
        }
    }

    /**
     * 重置动画
     */
    public void resetAnimation(){
        if(mController!=null){
            mController.resetAnim();
        }
    }
}

在这里类里面会发现只有一个Paint画笔，开启动画，重置动画的方法，正真onDraw绘制的时候是在BaseController里面进行绘制；

public abstract class BaseController {
    private MySearchView mySearchView;
    public static final int STATE_ANIM_NONE = 0;
    public static final int STATE_ANIM_START = 1;
    public static final int STATE_ANIM_STOP = 2;
    public static final int DEFAULT_ANIM_TIME = 5000;
    public static final float DEFAULT_ANIM_STARTF = 0;
    public static final float DEFAULT_ANIM_ENDF = 1;
    public int mState = STATE_ANIM_NONE;
    private AnimatorListenter animatorListenter;

    /**
     * 开始动画
     */
    public void startAnim(){

    }

    /**
     * 重置动画
     */
    public void resetAnim(){

    }

    /**
     * 绘制
     * @param canvas
     * @param paint
     */
    public abstract void draw(Canvas canvas, Paint paint);
    public void setSearchView(MySearchView mySearchView){
        this.mySearchView=mySearchView;
    }

    /**
     * 获取宽度
     * @return  返回MySearchView的宽度
     */
    public int getWidth(){
        return mySearchView.getWidth();
    }

    /**
     * 获取高度
     * @return 返回MySearchView的高度
     */
    public int getHeight(){
        return mySearchView.getHeight();
    }
    public float mpro=-1;

    /**
     * 设置动画效果
     * @return  设置好的ValueAnimator
     */
    public ValueAnimator startViewAnimation(){
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(800l);
        //设置动画插值器
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mpro = (float) animation.getAnimatedValue();
                mySearchView.invalidate();
            }
        });
        //监听动画完成
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                if(animatorListenter!=null){
                    animatorListenter.animatorListenter();
                }
            }
        });
        valueAnimator.start();
        mpro=0;
        return valueAnimator;
    }
    public void addAnimatorFishListener(AnimatorListenter listenter){
        this.animatorListenter=listenter;
    }
}

这里的BaseController是一个抽象类，onDraw方法也是抽象方法，子类必须要实现，这里主要对ValueAnimator进行设置已经监听回调；真正的绘制动作还是在BaseController子类中完成；

public class SearchController extends BaseController{
    private RectF mRectF;
    private String mColor="#4CAF50";
    private int cx,cy,cr;
    private int j=15;
    public SearchController(){
        mRectF=new RectF();
    }
    @Override
    public void draw(Canvas canvas, Paint paint) {
        canvas.drawColor(Color.parseColor(mColor));
        switch (mState){
            case STATE_ANIM_NONE:
                drawNormalView(canvas,paint);
                break;
            case STATE_ANIM_START:
                drawStartAnimView(canvas,paint);
                break;
            case STATE_ANIM_STOP:
                drawStopAnimView(canvas,paint);
                break;
        }
    }

    /**
     * 绘制停止动画view
     * @param canvas
     * @param paint
     */
    private void drawStopAnimView(Canvas canvas, Paint paint) {
    }

    /**
     * 绘制开启动画的view
     * @param canvas
     * @param paint
     */
    private void drawStartAnimView(Canvas canvas, Paint paint) {
        canvas.save();
        if(mpro<=0.5f){
            /**
             * -360 ~ 0 需要变换的范围
             *   0  ~ 0.5 mpro实际的变化范围
             * 转换公式：360*(mpro*2-1),
             */
            //绘制圆和把手
            canvas.drawArc(
                    mRectF,
                    45,
                    360*(mpro*2-1),
                    false,
                    paint
            );
            canvas.drawLine(
                    mRectF.right - j,
                    mRectF.bottom - j,
                    mRectF.right+cr-j,
                    mRectF.bottom+cr-j,
                    paint
            );
        }else{
            /**
             *   0    ~ 1 需要变换的范围
             *   0.5  ~ 1 mpro实际的变化范围
             * 转换公式：(mpro*2-1),
             */
            //绘制把手
            canvas.drawLine(
                    mRectF.right - j + cr*(mpro*2-1),
                    mRectF.bottom - j + cr*(mpro*2-1),
                    mRectF.right - j + cr,
                    mRectF.bottom+cr-j,
                    paint);

        }
        //绘制下面的横线
        canvas.drawLine(
                (mRectF.right - j + cr)*(1-mpro*0.8f),
                mRectF.bottom+cr-j,
                mRectF.right - j + cr,
                mRectF.bottom+cr-j,
                paint);
        canvas.restore();

        mRectF.left = cx -cr + mpro*250;
        mRectF.right = cx + cr +mpro*250;
        mRectF.top = cy - cr;
        mRectF.bottom = cy + cr;
    }

    /**
     * 绘制普通view
     * @param canvas
     * @param paint
     */
    private void drawNormalView(Canvas canvas, Paint paint) {
        cr=getWidth()/20;
        cx=getWidth()/2;
        cy=getHeight()/2;

        mRectF.left=cx-cr;
        mRectF.right=cx+cr;
        mRectF.top=cy-cr;
        mRectF.bottom=cy+cr;
        //保存画布
        canvas.save();
        //重置画笔
        paint.reset();
        //设置抗锯齿
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
        //将画布选择45度
        canvas.rotate(45,cx,cy);
        //绘制线条
        canvas.drawLine(cx+cr,cy,cx+cr*2,cy,paint);
        canvas.drawArc(
                mRectF,
                0,
                360,
                false,
                paint
        );
        canvas.restore();
    }

    @Override
    public void startAnim() {
        super.startAnim();
        mState = STATE_ANIM_START;
        startViewAnimation();
    }

    @Override
    public void resetAnim() {
        super.resetAnim();
        mState = STATE_ANIM_STOP;
        startViewAnimation();
    }

    @Override
    public void addAnimatorFishListener(AnimatorListenter listenter) {
        super.addAnimatorFishListener(listenter);
    }
}

SearchController是BaseController的子类，在SearchController的onDraw方法中进行绘制，如果需要不同的效果，直接写一个新的类 extends BaseController，调用就可以了，并不需要去修改SearchController里面的代码，具体的代码中都有注释；
2、使用

public class MainActivity extends AppCompatActivity {
    private MySearchView sv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sv = (MySearchView) findViewById(R.id.sv);
        SearchController searchController=new SearchController();
        sv.setController(searchController);

        searchController.addAnimatorFishListener(new AnimatorListenter() {
            @Override
            public void animatorListenter() {
                Toast.makeText(MainActivity.this,"执行完毕",Toast.LENGTH_LONG).show();
            }
        });
    }
    public void start(View v){
        sv.startAnimation();
    }
}

找到MySearchView，调用它的setController方法，将创建好的SearchController对象传入就可以了。

源码地址：
http://download.csdn.net/download/wangwo1991/9974198