手势解锁简化版(自定义控件版没有包含密码)

嗯,这里实现了手势密码的布局,与点击的实现,因为是没有密码的简化版所以使用的方法比较简单。好了,废话不多说,现在就来看看我们的代码与结果吧(图片资源我放在代码下,有意向的人可以下载试试哟!)
一结果展示:


手势解锁简化版(自定义控件版没有包含密码)_第1张图片
QQ图片20191116203442.jpg
手势解锁简化版(自定义控件版没有包含密码)_第2张图片
QQ图片20191116203452.jpg

二代码:
(1)这是我们的xml代码,就是多了一个控件来设置背景和主控件的id。



    
    

(2)这里是我们的主函数代码

package ly.pxd.android12fir;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Icon;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RelativeLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    float padding;//设置我们控件对于边缘的间隔(左右)
    RelativeLayout rl;//主控件变量,因为多个函数都会使用,所以就全局了
    ArrayList dotViews;//关于ImageView类型的动态数组
    mpaint dotpaint;//自定义控件的变量,同样是因为多个地方都会使用

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rl = findViewById(R.id.rl_root);//找到主控件
        dotViews=new ArrayList<>();//分配空间
        creatnine(R.drawable.normal, View.VISIBLE);//使用方法创建九个初始点
        creatmpain();//创建自定义控件
        creatnine(R.drawable.selected,View.INVISIBLE);//注意这里是采用了分层的思想,让点击的按钮对线进
        // 行部分覆盖
        dotpaint.setDotviews(dotViews);//是这9个控件能够被我们的自定义控件调用
    }
    private float pixelfromdp(int size){
        //屏幕密度
        return  size*getResources().getDisplayMetrics().density;
    }//就是显示量度的密度
    private void creatnine(int res , int visible ){
        //创建我们的点
        padding = pixelfromdp(20);
        //计算两个点中心点之间的间距
        Point p = new Point();
        //记录我们点的坐标
        getWindowManager()
                .getDefaultDisplay()
                .getSize(p);//得到我们屏幕的大小


        Bitmap bitmap = BitmapFactory
                .decodeResource(getResources(),res);
        //获取图片,从而找出图片宽高
        float space = (p.x - 2 * padding - bitmap.getWidth())/2;
        //间隔,点之间的间隔


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

        //使用双重循环,进行点的添加
        for (int i = 0; i < 3; i++){
            for (int j = 0; j < 3; j++){
                //创建图片视图
                ImageView iv = new ImageView(this);
                iv.setBackgroundResource(res);
                //设置位置
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams
                        (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                params.leftMargin = (int)(x+space*j);//注意i,j的取值都是0,1,2所以space是我们点间隔
                //而padding只是我们点与左右边缘的间隔
                params.topMargin = (int)(y+space*i);
                iv.setVisibility(visible);//设置可视属性
                //添加视图
                rl.addView(iv,params);
                if(res==R.drawable.selected){//如果是点击之后的按钮,我们就添加,因为我们操作的就是这个控件
                    dotViews.add(iv);
                }
            }
        }

    }
    private void creatmpain(){
        dotpaint=new mpaint(this);//分配空间
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);//与屏幕宽高相同
        rl.addView(dotpaint,params);//添加
    }
}

(2)这里是我们的自定义控件代码

package ly.pxd.android12fir;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

import java.util.ArrayList;

public class mpaint extends View {
    //操作点的数组
    private ArrayList dotviews;
    //点击了的点集合,我们要进行清空
    private ArrayList selectedots;
    //画了之后路径的集合
    private ArrayList paths ;
    //画的起始点位置
    Point startpoint;
    //终点位置
    Point endpoint;
    //画笔
    Paint dotpaint;
    public mpaint(Context context) {
        super(context);
        //我直接在这里初始化,其实可以构建函数,那样看起来简单点
        //分配空间
        selectedots=new ArrayList<>();
        paths=new ArrayList<>();
        dotviews=new ArrayList<>();
        //设置画笔属性
        dotpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        dotpaint.setColor(Color.WHITE);
        dotpaint.setStrokeWidth(20);
        dotpaint.setStyle(Paint.Style.STROKE);
    }
    //得到我们的操作点
    public void setDotviews(ArrayList dotviews) {
        this.dotviews = dotviews;
    }
    //画函数,因为在我们程序运用的时候它就会调用这个函数,所
    // 以要确保这个函数不出错
    @Override
    protected void onDraw(Canvas canvas) {
        if(paths.size()>0) {
            for (Path path : paths) {
                canvas.drawPath(path, dotpaint);
            }
        }
        if(startpoint!=null&&endpoint!=null){
            canvas.drawLine(startpoint.x,startpoint.y,endpoint.x,endpoint.y,dotpaint);
        }
    }
    //触摸函数
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //得到我们点击手机时的位置
        float x = event.getX();
        float y = event.getY();
        ImageView temp;
        //使用switch函数能够方便我们对于点击事件的整理
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //调用函数,判断是不是在点控件内
                temp = panduan(x,y);
                if(temp!=null){
                    //设置可视化函数
                    temp.setVisibility(View.VISIBLE);
                    //记录位置
                    startpoint=new Point((int)(temp.getPivotX()+temp.getX()),(int)(temp.getPivotY()
                    +temp.getY()));
                    //添加,这个点已经点过
                    selectedots.add(temp);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                //判断
                temp = panduan(x,y);
                //不在点控件内的时候,记录终点坐标
                if(temp==null){
                endpoint = new Point((int)x,(int)y);
                invalidate();
                }else{
                    if(startpoint==null){
                        //判断是不是第一个点
                        temp.setVisibility(View.VISIBLE);
                        startpoint=new Point((int)(temp.getPivotX()+temp.getX()),(int)(temp.getPivotY()
                                +temp.getY()));
                    }else{
                        //如果不是第一个点的时候
                        temp.setVisibility(View.VISIBLE);
                        //记录与上一个点的路径
                        Path path = new Path();
                        path.moveTo(startpoint.x,startpoint.y);
                        path.lineTo((temp.getPivotX()+temp.getX()),(temp.getPivotY()
                                +temp.getY()));
                        //添加到我们的动态数组
                        paths.add(path);
                        //将这个点设置为我们的起始点
                        startpoint=new Point((int)(temp.getPivotX()+temp.getX()),(int)(temp.getPivotY()
                                +temp.getY()));
                        //为了美观,即不在点的控件内部滑动时![3C2E261C17A51AC1D171A263C1B07407.jpg](https://upload-images.jianshu.io/upload_images/18961721-67c054fe6e130222.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
显示线
                        endpoint=startpoint;
                        //调用onDraw函数
                        invalidate();
                    }
                    //这个点已经被点击了
                  selectedots.add(temp);
                }
                break;
            case MotionEvent.ACTION_UP:
                //松手的时候进行刷新
                cleardots();
                break;
        }
        return true;
    }
    //刷新函数
    private void cleardots(){
        for(ImageView temp:selectedots){
            temp.setVisibility(INVISIBLE);
        }
        //清空我们的数组
        selectedots.clear();
        paths.clear();
        //起始点与终点都设置为空
        startpoint=null;
        endpoint=null;
    }
    //判断函数,判断点击的是不是在点控件内
    private ImageView panduan(float x , float y ){
        //使用for循环进行点控件的遍历,在返回那个点控件,不在返回空
        for(ImageView temp : dotviews){
            float locax=temp.getX();
            float locay=temp.getY();
            if((x>=locax&&x<=locax+temp.getWidth())&&(y>=locay&&y<=locay+temp.getHeight())){
                return temp;
            }
        }
        return null;
    }
}

三这是我这些代码用到的图片文件:
图片放在这里哟:


手势解锁简化版(自定义控件版没有包含密码)_第3张图片
C{C3G%O7E9U$ZV{L$ET}KEV.png

资源:
(1)背景


手势解锁简化版(自定义控件版没有包含密码)_第4张图片
bg.png

(2)未点击按钮(是白色的,所以看不到)


normal.png

(3)已点击按钮


selected.png

四,诚然,懒惰了,不想谈什么外部的原因,因为别人都能做到而自己却做不到,这也只能是自己的原因了。不过还好,现在努力虽然有些晚,但也不是没有救。

你可能感兴趣的:(手势解锁简化版(自定义控件版没有包含密码))