準(zhǔn)備工作

將實現(xiàn)圖案解鎖所需的圖片拖到drawable里面

image.png

實際操作

1.Xml?件里設(shè)置容器為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>

設(shè)置容器為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);
        //判斷是否已經(jīng)顯示
        if(hasFocus){
            //獲取屏幕密度
            float scale=getResources().getDisplayMetrics().density;
            //獲取容器
            RelativeLayout rl=findViewById(R.id.root_layout);

            //獲取背景視圖
            ImageView iv=findViewById(R.id.opView);

            //獲取x，y坐標(biāo)
            int x=iv.getLeft();
            int y=iv.getTop();
            for(int i=0;i<3;i++){
                for(int j=0;j<2;j++){
                    //創(chuàng)建一個視圖用于顯示線
                    ImageView lineView=new ImageView(this);
                    //設(shè)置圖片
                    lineView.setBackgroundResource(R.drawable.normal_highlight1);
                    //創(chuàng)建布局參數(shù)
                    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++){
                    //創(chuàng)建一個視圖用于顯示線
                    ImageView lineView=new ImageView(this);
                    //設(shè)置圖片
                    lineView.setBackgroundResource(R.drawable.normal_highlight2);
                    //創(chuàng)建布局參數(shù)
                    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++){
                    //創(chuàng)建一個視圖用于顯示線
                    ImageView rlineView=new ImageView(this);
                    //設(shè)置圖片
                    rlineView.setBackgroundResource(R.drawable.normal_highlight3);
                    //創(chuàng)建布局參數(shù)
                    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);
                    //創(chuàng)建一個視圖用于顯示線
                    ImageView llineView=new ImageView(this);
                    //設(shè)置圖片
                    rlineView.setBackgroundResource(R.drawable.normal_highlight4);
                    //創(chuàng)建布局參數(shù)
                    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++){
                    //創(chuàng)建用于顯示點的視圖
                    ImageView dotView=new ImageView(this);

                    //隱藏視圖
                    dotView.setVisibility(View.INVISIBLE);

                    //顯示對應(yīng)的圖片
                    dotView.setBackgroundResource(R.drawable.selected_dot);
                    //創(chuàng)建控件的尺寸
                    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);
    }
}

判斷是否已經(jīng)顯示：

image.png

創(chuàng)建六條橫線

創(chuàng)建4條豎線

顯示斜線

image.png

創(chuàng)建9個點

image.png

運行效果：

image.png