目的：

通过学习布局类等方面的知识点，以及控件的使用来完成图案解锁的功能。

技术：

1.布局类：

所有的布局类⾥面都维护⼀一个LayoutParams ，extends MarginLayoutParmas
⽤用于管理理当前这个布局容器器⼦子控件的布局，例如：FrameLayout LinearLayout RelativeLayout 等。

（1）线性布局LinearLayout：

Margin:控件边缘和其他控件的间距- 外间距
Padding：控件内部和⾃自⼰己边缘的间距- 内间距

image.png

有关LinearLayout的相关布局：

（2）相对布局RelativeLayout :必须能够确定每个控件的x y w h

在MarginLayout的基础上添加了了对⻬

eg:当前这个控件和id为v1的控件右边对⻬齐

 layout_alignRight = “@id/v1” 

此外还有其他对齐方式：
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1”

（3）约束布局 ConstraintLayout：

1.边距：

image.png

2.宽⾼高⽐例
layout_constraintDimensionRatio="h,1^2" 宽和⾼高的⽐比例例
layout_constraintDimensionRatio=“w,1^2” ⾼高和宽的⽐比例例

image.png

实际编程：

图案解锁：

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

前期准备：
在res/drawable图片资源文件导入所需的图片

image.png

image.png

（1）Xml⽂文件设置容器器为RelativeLayout：

image.png

（2）MainActivity中实现：

监听窗⼝口focus状态改变->此刻整个容器器的尺⼨寸已经计算完毕

public class MainActivity extends AppCompatActivity {

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {

        //获取屏幕分辨率
        float scale = getResources().getDisplayMetrics().density;

        //判断是否已经显示
        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();

            //创建横线
         
            //创建竖线
        
            //创建竖线
          
           //创建用于显示点的视图
       
        }
    }

在onWindowFocusChanged创建点和线：

创建横线

   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);

                    //设置x.y坐标
                    params.leftMargin = x + (int)(46.6*scale) + (int)(99*scale*j);
                    params.topMargin = y + (int)(170*scale) +(int)(99*scale*i);

                    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);

                    //设置x.y坐标
                    params.leftMargin = x + (int)(42*scale) + (int)(99*scale*j);
                    params.topMargin = y + (int)(170*scale) +(int)(99*scale*i);

                    rl.addView(lineView,params);
                }
            }

创建竖线

  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);

                    //创建尺寸 布局参数
                    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

                    //设置x.y坐标
                    params.leftMargin = x + (int)(42*scale) + (int)(99*scale*j);
                    params.topMargin = y + (int)(170*scale) +(int)(99*scale*i);

                    rl.addView(rlineView,params);

                    ImageView llineView = new ImageView(this);
                    llineView.setBackgroundResource(R.drawable.normal_highlight4);
                    params.leftMargin = x + (int)(53.3*scale) + (int)(99*scale*j);
                    params.topMargin = y + (int)(170*scale) +(int)(99*scale*i);

                    rl.addView(llineView,params);
                }
            }

创建九个点

     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 = x + (int)(35.5*scale) + (52+96)*i;
                    params.topMargin = y + (int)(162*scale) +(int)(98*scale*j);

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

实现手触摸事件：

//监听触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

心得：

懵逼继续，但渐渐地知道了个所以然，对那些调用方法慢慢地熟悉，偶尔调用个新的方法还是可以接受的，东哥说这两天讲的知识点对于我们刚开始接触安卓开发有些难度，不知道在真的还是安慰我们，不要受打击啥的，但相信坚持努力，这些都会迎刃而解的。