安卓开发|图案解锁4之保存密码

一、今日目的

1.实现密码保存
2.完结图案解锁

二、知识点

1. 记录密码

思路：用字符串表示密码——将tag值拼入该字符串。既然要拼接所以不能用String，就定义一个StringBuilder（或者StringBuffer）变量。

代码：

//保存密码
    StringBuilder password;
//密码
    String firpassword;//第一次设置的
    String orgpassword;;//原始密码

---

如果某个点被点亮了，就加入密码

password.append(selected.getTag());

---

没有原始密码，设置：

第一次密码的设置

                        firpassword = password.toString();

---

第二次

                        if(firpassword.equals(password.toString())){
                            alterTextView.setText("密码设置成功");
                            SharedPreferences ap = getSharedPreferences("tyn",MODE_PRIVATE);
                            SharedPreferences.Editor editor = ap.edit();
                            editor.putString("password",firpassword);
                            editor.commit();
                        }else {
                            alterTextView.setText("两次密码设置不一致，请重新输入");
                            firpassword = null;
                        }

---

有原始密码，输入：

if(password.toString().equals(orgpassword) ){
                        alterTextView.setText("密码正确");
                        for (ImageView dd:selectedList){
                            dd.setVisibility(View.INVISIBLE);
                            RelativeLayout relativeLayout = findViewById(R.id.root_layout);
                            relativeLayout.findViewWithTag(((Integer)dd.getTag()+100)).setVisibility(View.VISIBLE);

                        }
                    }else {
                        alterTextView.setText("密码错误请重新输入");
                        for(ImageView dd :selectedList){
                            dd.setVisibility(View.INVISIBLE);
                            RelativeLayout relativeLayout = findViewById(R.id.root_layout);
                            ImageView imageView =relativeLayout.findViewWithTag((Integer)dd.getTag()+100);
                            wSelectedList.add(imageView);
                        }
                        for(ImageView ww : wSelectedList){
                            ww.setVisibility(View.VISIBLE);
                        }
                    }

2. 手指离开界面实现密码清空和界面清空

界面清空的思路：做成一个函数，在需要的地方调用

代码：

public void clean(){
        password.setLength(0);
        for(ImageView i:selectedList){
            i.setVisibility(View.INVISIBLE);
        }
        for(ImageView i:wSelectedList){
            i.setVisibility(View.INVISIBLE);
        }
        selectedList.clear();
        wSelectedList.clear();
    }

3. 创建文本视图（昨天在.xml里的TextView终于有用了）

直接上代码：

//显示的文本信息
    TextView alterTextView;

---

相应的地方，对应一下文本输入

alterTextView.setText("请确认密码");

---

alterTextView.setText("密码设置成功");

---

alterTextView.setText("两次密码设置不一致，请重新输入");

---

alterTextView.setText("密码正确");

---

alterTextView.setText("密码错误请重新输入");

4. Android里的4种数据存储

• sharedPreferance偏好设置
• file 小
• salite 大
• network
  ps:前三种都是储存再本地

三、实际应用（完整代码）

package com.example.day3jieshuo;
import androidx.appcompat.app.AppCompatActivity;

import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    //定义一个数组 保存每个点的控件
    ArrayList dotsList;
    ArrayList rdotsList;
    ArrayList lineViewTags;
    int tag;
    int wtag;
    //保存上一次被点亮的点的对象
    ImageView lastSelectedDot;

    //保存密码
    StringBuilder password;

    //显示的文本信息
    TextView alterTextView;

    //已经点亮的控件
    ArrayList selectedList;

    ArrayList wSelectedList;

    //密码
    String firpassword;
    String orgpassword;
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        //判断是否已经显示
        if (hasFocus){
                //获取容器器
                RelativeLayout rl = findViewById(R.id.root_layout);
                //获取背景视图
                ImageView iv = findViewById(R.id.opView);
                //获取x 和 y坐标
                int x = iv.getLeft();
                int y = iv.getTop();
                //获取屏幕密度
                float scale = getResources().getDisplayMetrics().density;

                tag = 12;
                wtag = 112;
                //创建横线 6条
                for (int i = 0; i < 3; i++) {
                    for (int j = 0; j < 2; j++) {
                        //创建一个视图用于显示线
                        ImageView lineView = new ImageView(this);
                        lineView.setBackgroundResource(R.drawable.normal_highlight1);
                        lineView.setVisibility(View.INVISIBLE);

                        //设置tag值
                        lineView.setTag(tag);
                        //将tag值存入数组
                        lineViewTags.add(tag);
                        tag += 11;

                        //创建布局参数
                        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT,  ViewGroup.LayoutParams.WRAP_CONTENT);                    params.leftMargin = (int)(x + 46.6*scale) + (int)(99*scale*j);                    params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);                    rl.addView(lineView, params);
                        params.leftMargin = (int)(x + 50*scale) + (int)(99*scale*j);
                        params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
                        //创建一个视图用于显示线
                        ImageView wLineView = new ImageView(this);
                        wLineView.setVisibility(View.INVISIBLE);
                        wLineView.setBackgroundResource(R.drawable.wrong_highlight1);


                        //设置tag值
                        wLineView.setTag(wtag);
                        //将tag值存入数组
                        lineViewTags.add(wtag);
                        wtag += 11;

                        rl.addView(wLineView,params);
                    }
                    tag += 11;
                    wtag += 11;
                }


                tag = 14;
                //创建竖线 4条
                for (int i = 0; i < 2; i++) {
                    for (int j = 0; j < 3; j++) {
                        //创建一个视图用于显示线
                        ImageView lineView = new ImageView(this);
                        lineView.setBackgroundResource(R.drawable.normal_highlight2);
                        lineView.setVisibility(View.INVISIBLE);

                        //设置tag值
                        lineView.setTag(tag);
                        //将tag值存入数组
                        lineViewTags.add(tag);
                        tag += 11;

                        //创建布局参数
                        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);                    params.leftMargin = (int)(x + 42*scale) + (int)(99*scale*j);                    params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);                    rl.addView(lineView, params);
                    }
                }

                tag = 24;
                int rtag = 15;
                wtag = 124;
                int wrtag = 115;
                //创建斜线
                for (int i = 0; i < 2; i++) {
                    for (int j = 0; j < 2; j++) {
                        //创建⼀一个视图用于显示线
                        ImageView rLineView = new ImageView(this);
                        //设置图片
                        rLineView .setBackgroundResource(R.drawable.normal_highlight3);
                        //设置tag值
                        rLineView.setTag(rtag);
                        //将tag值存入数组
                        lineViewTags.add(rtag);
                        rtag += 11;

                        //创建布局参数
                        rLineView.setVisibility(View.INVISIBLE);
                        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);                    params.leftMargin = (int)(x + 42*scale) + (int)(99*scale*j);                    params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);                    rl.addView(rLineView, params);

                        //
                        ImageView lLineView = new ImageView(this);
                        lLineView.setVisibility(View.INVISIBLE);
                        lLineView.setBackgroundResource(R.drawable.normal_highlight4);

                        lLineView.setTag(tag);
                        lineViewTags.add(tag);
                        tag += 11;

                        params.leftMargin = (int)(x + 50*scale) + (int)(99*scale*j);
                        params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
                        rl.addView(lLineView,params);

                        //wrong
                        //创建⼀一个视图用于显示线
                        ImageView wrLineView = new ImageView(this);
                        //设置图片
                        wrLineView .setBackgroundResource(R.drawable.wrong_highlight3);
                        //设置tag值
                        wrLineView.setTag(wrtag);
                        //将tag值存入数组
                        lineViewTags.add(wrtag);
                        wrtag += 11;

                        //创建布局参数
                        params.leftMargin = (int)(x + 50*scale) + (int)(99*scale*j);
                        params.topMargin = (int)(y + 174*scale) + (int)(99*scale*i);
                        wrLineView.setVisibility(View.INVISIBLE);


                        //
                        ImageView wlLineView = new ImageView(this);
                        wlLineView.setVisibility(View.INVISIBLE);
                        wlLineView.setBackgroundResource(R.drawable.wrong_highlight4);

                        wlLineView.setTag(wtag);
                        lineViewTags.add(wtag);
                        wtag += 11;

                        rl.addView(wrLineView,params);
                        rl.addView(wlLineView,params);
                    }
                    rtag += 11;
                    tag += 11;
                    wtag += 11;
                    wrtag += 11;
                }

                tag = 1;
                //创建9个绿点
                for (int i = 0; i < 3; i++) {
                    for (int j = 0; j < 3; j++) {
                        //创建⽤用于显示点的视图
                        ImageView dotView = new ImageView(this);;

                        dotView.setTag(tag);
                        tag += 1;

                        //隐藏视图
                        dotView.setVisibility(View.INVISIBLE);
                        //显示对应的图片
                        dotView.setBackgroundResource(R.drawable.selected_dot);
                         //创建控件的尺寸
                        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);                    params.leftMargin = (int)(x + 35.33*scale) + (int)(98.66*scale*i);                    params.topMargin = (int)(y + 162*scale) + (int)(98.66*scale*j);

                        params.leftMargin = (int)(x + 35.33*scale) + (int)(99*scale*j);
                        params.topMargin = (int)(y + 162*scale) + (int)(99*scale*i);

                        //将控件添加到容器中
                        rl.addView(dotView, params);
                        //将这个控件添加到数组
                         dotsList.add(dotView);
                    }
                }

            tag = 101;
            //创建9个红点
            for (int j = 0; j < 3; j++) {
                for (int i = 0; i < 3; i++) {
                    //创建⽤用于显示点的视图
                    ImageView rdotView = new ImageView(this);;

                    rdotView.setTag(tag);
                    tag += 1;

                    //隐藏视图
                    rdotView.setVisibility(View.INVISIBLE);
                    //显示对应的图片
                    rdotView.setBackgroundResource(R.drawable.wrong_dot);
                    //创建控件的尺寸
                    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);                    params.leftMargin = (int)(x + 35.33*scale) + (int)(98.66*scale*i);                    params.topMargin = (int)(y + 162*scale) + (int)(98.66*scale*j);

                    //将控件添加到容器中
                    rl.addView(rdotView, params);
                    //将这个控件添加到数组
                    rdotsList.add(rdotView);
                }
            }
            }
    }
    //监听触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取事件的类型
        int action = event.getAction();
        ImageView selected;
        float x;
        float y;

        //判断是什么事件
        switch (action){
            case MotionEvent.ACTION_DOWN:
                //点击
                //获取触摸点的坐标
                x = event.getX();
                y = event.getY();
                //判断x y是不是在某个点的范围内
                selected = dotOfTouch(x, y);
                if (selected != null) {
                    //点亮
                    selected.setVisibility(View.VISIBLE);
                    //记录当前这个点
                    lastSelectedDot = selected;
                    password.append(selected.getTag());
                    selectedList.add(selected);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                //滑动
                //获取触摸点的坐标
                x = event.getX();
                y = event.getY();
                //判断x y是不是在某个点的范围内
                selected = dotOfTouch(x, y);
                if (selected != null) {
                    //判断这个点是不是起始点
                    if(lastSelectedDot == null){
                        //是起始点
                        selected.setVisibility(View.VISIBLE);
                        //记录
                        lastSelectedDot = selected;
                    }else{
                        //不是起始点
                        //获取上一个点和当前点的tag

                        int lTag = (Integer)lastSelectedDot.getTag();//因为getTag得出的是Object类型的，需要转换
                        int cTag = (Integer)selected.getTag();

                        //组成线的tag
                        int lineTag = lTag > cTag ? cTag*10+lTag : lTag*10+cTag;
//                        System.out.println(lTag+"_____"+cTag+"_____"+lineTag);

                        //判断这条线是否存在
                        if(lineViewTags.contains(lineTag)){
                            //线存在  点亮点
                            selected.setVisibility(View.VISIBLE);
                            password.append(selected.getTag());
                            selectedList.add(selected);

                            //点亮这条线
                            //获取容器对象
                            RelativeLayout rl = findViewById(R.id.root_layout);

                            //通过tag值找容器里对应的子控件
                            ImageView iv = rl.findViewWithTag(lineTag);
                            iv.setVisibility(View.VISIBLE);
                            selectedList.add(iv);

                            //记录这个点
                            lastSelectedDot = selected;
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                //System.out.println(password);
                //离开
                if(orgpassword == null){
                    //没有密码。设置
                    if(firpassword == null){
                        //第一次
                        firpassword = password.toString();
                        alterTextView.setText("请确认密码");
                    }else {
                        //第二次
                        if(firpassword.equals(password.toString())){
                            alterTextView.setText("密码设置成功");
                            SharedPreferences ap = getSharedPreferences("tyn",MODE_PRIVATE);
                            SharedPreferences.Editor editor = ap.edit();
                            editor.putString("password",firpassword);
                            editor.commit();
                        }else {
                            alterTextView.setText("两次密码设置不一致，请重新输入");
                            firpassword = null;
                        }
                    }
                }else {
                    //输入密码
                    if(password.toString().equals(orgpassword) ){
                        alterTextView.setText("密码正确");
                        for (ImageView dd:selectedList){
                            dd.setVisibility(View.INVISIBLE);
                            RelativeLayout relativeLayout = findViewById(R.id.root_layout);
                            relativeLayout.findViewWithTag(((Integer)dd.getTag()+100)).setVisibility(View.VISIBLE);

                        }
                    }else {
                        alterTextView.setText("密码错误请重新输入");
                        for(ImageView dd :selectedList){
                            dd.setVisibility(View.INVISIBLE);
                            RelativeLayout relativeLayout = findViewById(R.id.root_layout);
                            ImageView imageView =relativeLayout.findViewWithTag((Integer)dd.getTag()+100);
                            wSelectedList.add(imageView);
                        }
                        for(ImageView ww : wSelectedList){
                            ww.setVisibility(View.VISIBLE);
                        }
                    }
                }
                //清空
                clean();

                break;
            default:
                break;
        }
        return true;
    }

    //写⼀个方法 处理 判断触摸点是否在控件内部
    public ImageView dotOfTouch(float x, float y){
        for (ImageView dot:dotsList){
            //获取这个dot相对于屏幕的x y
            int[] loc = new int[2];
            dot.getLocationOnScreen(loc);
            int dx = loc[0];
            int dy = loc[1];
            //获取右边的偏移量量
            int r = dx + dot.getWidth();
            //获取最底部的偏移量量
            int b = dy + dot.getHeight();
            //判断这个点是否在这个范围内
            if ((x <= r && x >= dx) && (y <= b && y >= dy)){
                return dot;
            }
        }
        return null;
    }

    //写一个方法 清空
    public void clean(){
        password.setLength(0);
        for(ImageView i:selectedList){
            i.setVisibility(View.INVISIBLE);
        }
//        for(ImageView i:wSelectedList){
//            i.setVisibility(View.INVISIBLE);
//        }
        selectedList.clear();
        wSelectedList.clear();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化
        dotsList = new ArrayList<>();
        lineViewTags = new ArrayList<>();
        password = new StringBuilder();
        alterTextView = findViewById(R.id.tv_alert);
        selectedList = new ArrayList<>();
        wSelectedList = new ArrayList<>();
        rdotsList =new ArrayList<>();
        //查找偏好设置里面是否有tyn
        SharedPreferences sp = getSharedPreferences("tyn",MODE_PRIVATE);
        //获取tyn对应的密码
        orgpassword = sp.getString("password",null);
        if(orgpassword == null){
            alterTextView.setText("请设置密码");
        }else {
            alterTextView.setText("请输入密码");
        }

//        //读
//        SharedPreferences sp = getSharedPreferences("abc",0);
//        //写
//        SharedPreferences.Editor editor = sp.edit();
//        editor.putString("tyn","123");
//        editor.commit();
//
//        String result = sp.getString("tyn",null);
//        System.out.println(result);
    }
}

四、心得

鸡汤时间：

常识和 经验有时候能帮助我们少走弯路，有时候却禁锢了我们的思想，让我们只能墨守成规，循规蹈矩。

心里话showtime：

在学了数组遍历之后，在思考做那个界面清除的时候就会相到用数组然后遍历数组判断点亮的控件再去把它们一个个的隐藏起来，这个方法是可以的但是比较麻烦，所以有时候有了经验也要去思考有没有更好的方法来实现需求。