Day12 实现手势解锁

1. MainActivity extends AppCompatActivity

实现图片的添加封装

image.png

image.png

详细代码

public class MainActivity extends AppCompatActivity {
 //   ArrayList dotlist;

    float padding;
    RelativeLayout rl;
    ArrayList dotViews;
    DrawView drawView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //创建正常的点
        initNineDot(R.drawable.normal,View.VISIBLE);

        //添加一层视图
        DrawView();

        //创建点亮的点
        initNineDot(R.drawable.selected,View.INVISIBLE);

        //将所有点的数组传递给DrawView
        drawView.setDotViews(dotViews);


    }

    private void DrawView(){
        drawView = new DrawView(this);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

        rl.addView(drawView, params);
    }

    private void initNineDot(int res,int visible){
        rl = findViewById(R.id.parent);
        dotViews = new ArrayList<>();

        //确定左右间距大小
        padding = piexlFromDp(50);

        //计算两个点中心点之间的间距
        //得到屏幕宽度
        Point p = new Point();
        getWindowManager().getDefaultDisplay().getSize(p);
        //获取图片
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.normal);
        float space = (p.x - 2 * padding - bitmap.getWidth()) / 2;

        //确定第一个点的x,y
        float x = padding;
        float y = p.y / 2 - space - bitmap.getHeight();

        //使用for循环快速添加九个点
        for (int i = 0; i < 3; i++){
            for(int j = 0; j < 3; j++){

                //调用函数添加图片
                creatDot(res,(int) (x + space * j),(int) (y + space * i),visible);

            }
        }

    }

    //将添加图片的功能进行封装
    private void creatDot(int res,int left,int top,int visible){
        //创建图片视图
        ImageView iv = new ImageView(this);
        iv.setBackgroundResource(res);
        iv.setVisibility(visible);

        //创建容器
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.leftMargin = left;
        params.topMargin = top;

        //添加视图
        rl.addView(iv,params);

        //判断res对应的是否为selected
        if (res == R.drawable.selected){
            dotViews.add(iv);
        }

    }

    //计算dp对应的像素值
    private float piexlFromDp(int size){
        //获取屏幕的密度
        return size * getResources().getDisplayMetrics().density;
    }
}

2. DrawView extends View

实行主要功能划线

详细代码

public class DrawView extends View {
    private ArrayList dotViews;
    private Point startPoint;
    private Point endPoint;
    private Paint mPaint;
    private ArrayListpaths;
    private ArrayList selected;

    public DrawView(Context context) {
        super(context);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.STROKE);
        paths = new ArrayList<>();
        selected=new ArrayList<>();
    }

    public void setDotViews(ArrayList dotViews) {
        this.dotViews = dotViews;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        ImageView dot;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                dot = viewContainedPoint(x,y);
                if (dot != null){
                    dot.setVisibility(VISIBLE);
                    //设置起始点
                    startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
                            (int)(dot.getPivotY() + dot.getY()));
                }
                break;
            case MotionEvent.ACTION_MOVE:
                dot = viewContainedPoint(x,y);
                if (dot == null){
                    //划线
                    endPoint = new Point((int)x,(int)y);
                    //刷新
                    invalidate();
                }else {
                    //判断是第一个点还是其他
                    if(startPoint==null){
                        dot.setVisibility(VISIBLE);
                        //设置起始点
                        startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
                                (int)(dot.getPivotY() + dot.getY()));
                    }else{
                        //点亮点
                        dot.setVisibility(VISIBLE);
                        //在之前和现在的点之间产生一个path
                        Path path=new Path();
                        path.moveTo(startPoint.x,startPoint.y);
                        path.lineTo(dot.getPivotX() + dot.getX(),
                                dot.getPivotY() + dot.getY());

                        paths.add(path);

                        //当前这个这个点就是起始点
                        //设置起始点
                        startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
                                (int)(dot.getPivotY() + dot.getY()));
                        endPoint=startPoint;

                        //刷新
                        invalidate();
                    }
                    selected.add(dot);
                }
                break;
            case MotionEvent.ACTION_UP:
                clear();
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (paths.size() > 0){
            for (Path path: paths){
                canvas.drawPath(path, mPaint);
            }
        }
        if (startPoint != null && endPoint != null) {
            canvas.drawLine(startPoint.x, startPoint.y,
                    endPoint.x, endPoint.y, mPaint);
        }
    }


    private void clear(){
        for (ImageView dot: selected)
        {            dot.setVisibility(INVISIBLE);
        }        selected.clear();
        paths.clear();
        startPoint = null;
        endPoint = null;
        invalidate();
    }
    //判断触摸点是否在某个dot里面
    private ImageView viewContainedPoint(float x,float y){
        for (ImageView dot: dotViews){
            int[] point = new int[2];
            dot.getLocationOnScreen(point);

            //获取dot的x和y坐标
            //int px = point[0];
            //int py = point[1];

            int px = (int) dot.getX();
            int py = (int) dot.getY();
            if ((x >= px && x <= px + dot.getWidth())
                    &&(y >= py && y <= py +dot.getHeight())){
                return dot;
            }
        }
        return  null;
    }
}

3.xml配置

很基础

image.png