SeniorUI08_Canvas实战

高级UI汇总​​​​​​​

代码：SeniorUI08_CanvasCaseActivity

1效果图：画板、滚动黑白、搜索动态效果

2 画板

自定义View，监听onTouchEvent事件，手指滑动路径记录在Path中，当手指离开时，绘制path

public class DrawingBoardView extends View {

    float preX;
    float preY;
    private Paint paint;
    //定义一个内存中图片，将他作为缓冲区
    Bitmap cacheBitmap = null;
    //定义缓冲区Cache的Canvas对象
    Canvas cacheCanvas = null;
    private Path path;

    public DrawingBoardView(Context context) {
        this(context,null);
    }

    public DrawingBoardView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public DrawingBoardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //创建缓冲区Cache的Canvas对象
        cacheCanvas = new Canvas();
        path = new Path();

        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setFlags(Paint.DITHER_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setAntiAlias(true);
        paint.setDither(true);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //创建一个与该VIew相同大小的缓冲区
        cacheBitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
        //设置cacheCanvas将会绘制到内存的bitmap上
        cacheCanvas.setBitmap(cacheBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint p = new Paint();
        //将cacheBitmap绘制到该View
        canvas.drawBitmap(cacheBitmap,0,0,p);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //获取拖动时间的发生位置
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x,y);
                preX = x;
                preY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                path.quadTo(preX,preY,x,y);
                preX = x;
                preY = y;
                break;
            case MotionEvent.ACTION_UP:
                //这是是调用了cacheBitmap的Canvas在绘制
                cacheCanvas.drawPath(path,paint);
                path.reset();
                invalidate();//在UI线程刷新VIew
                break;
        }
        return true;
    }
}

3 RevealDrawable

1、自定义的Drawable来做

Drawable就是一个可画的对象，其可能是一张位图（BitmapDrawable），也可能是一个图形（ShapeDrawab），还有可能是一个图层（LayerDrawable），我们根据画图的需求，创建相应的可画对象，就可以将这个可画对象当做“画布Canvas”，在其上面操作可画对象，并最终将这种可画对象显示在画布上，有点类似于“内存画布”

shapeDrawable -xml中shape
LayerDrawable- xml中layer-list
StateListDrawable- xml中selector
ClipDrawable- xml中clip标签
AnimationDrawable -xml中set标签
1.1 最复杂的是两张图片进行拼接，一边灰色，一边彩色的
Drawable 状态，可以根据level来切换不同的状态绘制，level值是从0 ~ 10000进行变化
1）全灰色 — 0 或者 10000
2）全彩色 — 5000
3）左边灰色，右边彩色 5000 ~ 0
4）左边彩色，右边灰色 10000 ~ 5000

2、水平ScrollView来实现滑动

ScrollView里面一层布局，布局里面加载一组ImageView

4 SearchView效果

状态分解：

1、默认状态：圆圈、手柄

2、展开动画状态：

1）动画前半段,圆圈减小至消失，底部横线加长
2）动画前半段,圆圈消失后，手柄减小，底部横线加长

3、可以动手实现下还原动画

4、代码

public class SearchView extends View {

    private Paint mPaint;
    private BaseController mController;

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

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

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStrokeWidth(5);
    }

    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();
        }
    }
}