【Android程序开发】图案解锁（1）-添加图案解锁所需的所有

准备工作

将实现图案解锁所需的图片拖到drawable里面

image.png

实际操作

1.Xml⽂件里设置容器为RelativeLayout，并且添加id，添加子控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/root_layout"
    >
     <!--添加背景图片-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/main_bg"
        android:scaleType="fitXY"
        />
    <!--添加9个点的背景图片-->
    <ImageView
        android:id="@+id/opView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/op_bg"
        android:layout_centerInParent="true"/><!--中心对齐-->
</RelativeLayout>

设置容器为RelativeLayout，并且添加id
添加子控件

效果：

image.png

2.MainActivity里面：

package com.example.day2;

import androidx.appcompat.app.AppCompatActivity;

import android.content.res.Configuration;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        //判断是否已经显示
        if(hasFocus){
            //获取屏幕密度
            float scale=getResources().getDisplayMetrics().density;
            //获取容器
            RelativeLayout rl=findViewById(R.id.root_layout);

            //获取背景视图
            ImageView iv=findViewById(R.id.opView);

            //获取x，y坐标
            int x=iv.getLeft();
            int y=iv.getTop();
            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);
                    //创建布局参数
                    RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.leftMargin=(int)(x+46.6*scale)+(int)(99*scale*i);
                    params.topMargin=(int)(y+170*scale)+(int)(99*scale*j);
                    rl.addView(lineView,params);

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

                }
            }
            for(int i=0;i<2;i++){
                for(int j=0;j<3;j++){
                    //创建一个视图用于显示线
                    ImageView rlineView=new ImageView(this);
                    //设置图片
                    rlineView.setBackgroundResource(R.drawable.normal_highlight3);
                    //创建布局参数
                    RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.leftMargin=(int)(x+42*scale)+(int)(99*scale*i);
                    params.topMargin=(int)(y+170*scale)+(int)(99*scale*j);
                    rl.addView(rlineView,params);
                    //创建一个视图用于显示线
                    ImageView llineView=new ImageView(this);
                    //设置图片
                    rlineView.setBackgroundResource(R.drawable.normal_highlight4);
                    //创建布局参数
                    RelativeLayout.LayoutParams params1=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
                    params1.leftMargin=(int)(x+42*scale)+(int)(99*scale*i);
                    params1.topMargin=(int)(y+170*scale)+(int)(99*scale*j);
                    rl.addView(llineView,params);

                }
            }


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

                    //隐藏视图
                    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*scale)+(int)(99*scale*i);
                    params.topMargin=(int)(y+244*scale)+(int)(99*scale*j);

                    //将控件添加到容器中
                    rl.addView(dotView,params);

                }
            }

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

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }
}

判断是否已经显示：

image.png

创建六条横线

创建4条竖线

显示斜线

image.png
创建9个点
image.png
运行效果：
image.png