自定义View(一)可拖拽的悬浮控件

可拖拽的悬浮控件是个比较常见的很简单的效果,主要知识点:

1.View的简单自定义,onDraw的重写等

2.View事件的简单应用

我们在这个可拖拽的View上加个黄色的线,简单操作下这个View的样子,另外,给这个拖拽View加上偏左吸左偏右吸右的效果。下面直接上代码:

public class CustomView extends android.support.v7.widget.AppCompatTextView {

    private Paint paint;//画笔
    private int lastX;//记录上一个X坐标
    private int lastY;//记录上一个Y坐标


    public CustomView(Context context) {
        super(context);
        initDraw();
    }

    public CustomView(Context context, @Nullable  AttributeSet attrs) {
        super(context, attrs);
        initDraw();

    }

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


    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int x = (int) event.getX();
        int y = (int) event.getY();

        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();

        int offsetX = x - lastX;
        int offsetY = y - lastY;

        ViewGroup mViewGroup = (ViewGroup) getParent();

        //取组件父集的宽高
        int pWidth = mViewGroup.getWidth();
        int pHeight = mViewGroup.getHeight();

        //设置上下左右的坐标临界值
        int left = getLeft() + offsetX;
        left = left <= 0 ? 0 : left;

        int top = getTop() + offsetY;
        top = top <= 0 ? 0 : top;

        int right = getRight() + offsetX;
        right = right >= pWidth ? pWidth : right;

        int bottom = getBottom() + offsetY;
        bottom = bottom >= pHeight ? pHeight : bottom;

        //设置上下左右的坐标为临界值时相关变量的值
        if(top==0){
            bottom =getHeight();
        }
        if(left==0){
            right=getWidth();
        }
        if(right==pWidth){
            left=pWidth-getWidth();
        }
        if(bottom==pHeight){
            top=pHeight-getHeight();
        }
        //判断时间种类
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                layout(left, top, right, bottom);//移动式更新布局
                break;
            case MotionEvent.ACTION_UP:
                //松开手时根据组件中间的位置,判断吸左吸右
                if (rawX <= pWidth / 2) {
                    layout(0, top, getWidth(), bottom);
                } else {
                    layout(pWidth - getWidth(), top, pWidth, bottom);
                }

                break;
        }

        return true;
    }

    /**
     * 初始化画笔
     * */
    private void initDraw() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.YELLOW);
        paint.setStrokeWidth(1.5f);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        //画布划线
        canvas.drawLine(0, height / 2, width, height / 2, paint);
    }
}

ok,把这个组件直接在布局中展示就行了,很简单。
demo git地址

    原文作者:ScottStone
    原文地址: https://www.jianshu.com/p/15f8f4f3d385
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞