自定义view 的绘制

效果图:滑动解锁

一.主页面的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000"
    tools:context="com.example.viewdraw.MainActivity">

 <com.example.viewdraw.LockView
     android:layout_alignParentBottom="true"
     android:background="@drawable/back"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     ></com.example.viewdraw.LockView>
</RelativeLayout>

二.自定义控件

1.测量宽度沿用父容器的期望,高度,使用图片的高度.正好让图片覆盖背景.

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //宽度沿用父容器的期望,高度使用图片的高度.
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width, mBitmap.getHeight());
}

2.绘制:

@Override
protected void onDraw(Canvas canvas) {
    //在页面中画出图片
    canvas.drawBitmap(mBitmap, 0, 0, mPaint);
}

3.监听事件的处理

/
//对图片设置监听,滑动处理
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //点击滑块时,滑块中线移动鼠标下面
                float pointX = event.getX();//滑块点击的位置
                float dx = -(pointX - mBitmap.getWidth() / 2);//偏移量
                if (dx > 0) {//确定边界,不能向左边偏移.
                    dx = 0;
                }
                if (pointX > mBitmap.getWidth()) {
                    return false;//点击滑块外部没有响应
                }
                scrollTo((int) dx, 0);
                break;
            case MotionEvent.ACTION_MOVE:
                float moveX = event.getX();//当前的坐标
                float ddx = mBitmap.getWidth() / 2 - moveX;//始终是以开始的位置作为参照.
                //最大的偏移量
                mMaxX = getWidth() - mBitmap.getWidth();
                //确定偏移的最大边界
                if (ddx > 0) {
                    ddx = 0;
                } else if (ddx < -mMaxX) {
                    ddx = -mMaxX;
                }
                scrollTo((int) ddx, 0);
                break;
            case MotionEvent.ACTION_UP:
                float x3 = event.getX() - mBitmap.getWidth() / 2;//当前的偏移量
                if (x3 <mMaxX) {
                    //放下后,回到原点
                    int startX = getScrollX();
                    int startY = 0;
                    int dmx = 0-startX;//结束的-开始的
                    int ddy = 0;
                    int duration = 500;
                    mScroller.startScroll(startX, startY, dmx,ddy, duration);
                    invalidate();

                } else {
                    //解锁
                    return false;
                }
                break;
        }
        return true;
    }

    @Override
    public void computeScroll() {
        //返回值为true,还没有到达终点
       if (mScroller.computeScrollOffset()){
           //移动当前应该在的位置
           scrollTo(mScroller.getCurrX(),0);
           invalidate();
       }
    }

4.构造方法

private static final String TAG = "LockView";
    private Bitmap mBitmap;
    private Paint mPaint;
    private float mMaxX;
    private Scroller mScroller;

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

    public LockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //创建画笔
        mPaint = new Paint();
        //拿到背景资源图片
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.switch_button);
        //创建scroller对象
        mScroller = new Scroller(context);
    }