模拟滑动解锁界面

模拟滑动解锁界面

实现逻辑

1. 自定义一个view继承view类,实现里面的方法
2. 在构造方法中加载出图片资源.在onMeasure中获取背景的宽和高作为自定义控件的宽和高
3. 在onDraw方法中绘制出滑块,在控件的布局文件中设置控件的背景图片
4. 设置滑块的触摸事件,分别算出当手指按下屏幕.移动,离开屏幕时滑块的位置
5. 在移动的过程中,对滑块的位置进行限定,使滑块的位置不能超过指定的区域
6. 在手指离开屏幕的事件中判定手指的位置,如果滑块没有到达最右边,那就让滑块回到开始的位置
7. 通过重写computeScroll方法,让滑块在手指离开屏幕的时候如果没有到达最右边,那就让他回到开始的位置
8. 设置一个回调接口,用来监听滑块是否到达最右侧

布局文件

<?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:id="@+id/activity_main"
android:layout_width="match_parent" android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:gravity="center_horizontal"
tools:context="com.example.a7_.MainActivity">

<com.example.a7_.MyView
    android:layout_alignParentBottom="true"
    android:id="@+id/mv"
    android:background="@mipmap/lockviewbg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</RelativeLayout>

自定义控件代码

package com.example.a7_;

    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.Scroller;

    /**
     * Created by Administrator on 2017.05.28.0028.
     */

    public class MyView extends View {

    private final Bitmap slidBitmap;
    private final Bitmap bgBitmap;
    private int startx;
    private int destance;
    private float endx;
    private final Scroller scroller;


    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //加载图片资源
        slidBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.switch_button);
        bgBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.lockviewbg);
        //创建scroller对象
        scroller = new Scroller(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //设置自定义控件的宽和高,,以背景图片为标准
        setMeasuredDimension(bgBitmap.getWidth(),bgBitmap.getHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制图片
        canvas.drawBitmap(slidBitmap,0,0,null);
    }

    //设置滑块的触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //当手指按下的时候,记录坐标
                startx = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                //当手指移动的时候,记录移动的距离
                destance = (int)(event.getX()-startx);
                //限制滑块移动的区间
                if (destance<0){
                    destance = 0;
                }else if (destance>bgBitmap.getWidth()-slidBitmap.getWidth()){
                    destance = bgBitmap.getWidth()-slidBitmap.getWidth();
                }
                //将滑块移动至该位置
                scrollTo( -destance,0);
                break;
            case MotionEvent.ACTION_UP:
                //当手指离开时,记录手指离开的位置
                if (destance<bgBitmap.getWidth()-slidBitmap.getWidth()){
                    //手指抬起时,如果滑块不在右边,那就让他回到左边
                    startx = destance;
                    int dx = 0-destance;
                    scroller.startScroll(startx,0,dx,0);
                    invalidate();
                }else {
                    //开启解锁
                    listener.onUnlock(this);
                }
                break;
        }
        invalidate();
        return true;
    }

    //重写computeScroll方法  调用invalidate之后 会调用draw draw会调用到这个computeScroll
    @Override
    public void computeScroll() {
        if (scroller.computeScrollOffset()){
            //获取滑块当前的位置
            int currx = scroller.getCurrX();
            scrollTo(-currx,0);
            //重新绘制
            invalidate();
        }
    }

    //设置一个解锁的接口
    interface onUnLockListener{
        void onUnlock(MyView view);
    }

    private onUnLockListener listener;

    public void setOnLockListener(onUnLockListener listener){
            this.listener = listener;
    }

    }

##核心代码

    package com.example.a7_;

    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;

    public class MainActivity extends AppCompatActivity {

    private MyView myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        myView = (MyView) findViewById(R.id.mv);
        //设置监听事件
        myView.setOnLockListener(new MyView.onUnLockListener() {
            @Override
            public void onUnlock(MyView view) {
                //触发监听,结束页面
                finish();
            }
        });
    }
    }