一、内容

• 1.添加控件 9个点 图片 20条线 图片
• 2.ImageView显示图片
• 3.容器来管理子控件
• 4.FrameLayout
• 5.LinearLayout
• 6.RelativeLayout
• 7.ConstraintsLayout
• 8.手触摸事件
• 9.点亮:取消隐藏
• 10.记录密码

二、具体实现

1.Xml文件设置容器为RelativeLayout

<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">

2.添加子控件

    <!--背景图片-->
    <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"
        />

3.监听窗口focus状态改变

@Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
}

4.获取背景容器的x和y坐标

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;

5.创建横线

for (int i = 0; i <3; i++) {
                for (int j = 0; j <2; j++) {
                    //创建一个视图用于显示线
                    ImageView lineView=new ImageView(this);
                    //lineView.setVisibility(View.INVISIBLE);
                    //设置图片
                    lineView.setBackgroundResource(R.drawable.normal_highlight1);
                    //创建布局参数
                    RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
                            ViewGroup.LayoutParams.WRAP_CONTENT,
                            ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.leftMargin=(int)(x+45*scale)+(int) (99*scale*j);
                    params.topMargin=(int)(y+171*scale)+(int) (99*scale*i);

                    rl.addView(lineView,params);
                }
            }

6.创建竖线

for (int i = 0; i <2; i++) {
                for (int j = 0; j <3; j++) {
                    //创建一个视图用于显示线
                    ImageView lineView=new ImageView(this);
                    //lineView.setVisibility(View.INVISIBLE);
                    //设置图片
                    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*j);
                    params.topMargin=(int)(y+171*scale)+(int) (99*scale*i);

                    rl.addView(lineView,params);
                }
            }

7.创建斜线

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

                    rl.addView(lineView,params);

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

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

8.创建9个点

for (int i = 0; i <3; i++) {
                for (int j = 0; j <3; 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+164*scale)+(int)(99*scale*j);

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

9.监听touch事件 实现滑动功能

@Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

三、效果预览

解锁.jpg