目的：

通過學(xué)習(xí)布局類等方面的知識(shí)點(diǎn)，以及控件的使用來完成圖案解鎖的功能。

技術(shù)：

1.布局類：

所有的布局類?面都維護(hù)?一個(gè)LayoutParams ，extends MarginLayoutParmas
?用于管理理當(dāng)前這個(gè)布局容器??子控件的布局，例如：FrameLayout LinearLayout RelativeLayout 等。

（1）線性布局LinearLayout：

Margin:控件邊緣和其他控件的間距- 外間距
Padding：控件內(nèi)部和?自?己邊緣的間距- 內(nèi)間距

image.png

有關(guān)LinearLayout的相關(guān)布局：

（2）相對布局RelativeLayout :必須能夠確定每個(gè)控件的x y w h

在MarginLayout的基礎(chǔ)上添加了了對?

eg:當(dāng)前這個(gè)控件和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

實(shí)際編程：

圖案解鎖：

1.添加控件 9個(gè)點(diǎn) 圖?片 20條線 圖?片
2.ImageView顯示圖?片
3容器?來管理理?子控件： FrameLayout LinearLayout RelativeLayout ConstraintsLayout
4.手觸摸事件
5.點(diǎn)亮：取消隱藏
6.記錄密碼

前期準(zhǔn)備：
在res/drawable圖片資源文件導(dǎo)入所需的圖片

image.png

image.png

（1）Xml?文件設(shè)置容器?為RelativeLayout：

image.png

（2）MainActivity中實(shí)現(xiàn)：

監(jiān)聽窗?口focus狀態(tài)改變->此刻整個(gè)容器?的尺?寸已經(jīng)計(jì)算完畢

public class MainActivity extends AppCompatActivity {

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {

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

        //判斷是否已經(jīng)顯示
        if(hasFocus){
            //獲取容器
            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();

            //創(chuàng)建橫線
         
            //創(chuàng)建豎線
        
            //創(chuàng)建豎線
          
           //創(chuàng)建用于顯示點(diǎn)的視圖
       
        }
    }

在onWindowFocusChanged創(chuàng)建點(diǎn)和線：

創(chuàng)建橫線

   for (int i = 0; i < 3; i++) {
                for (int j = 0; j < 2; j++) {
                    //創(chuàng)建一個(gè)視圖 用于顯示線
                    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);

                    //設(shè)置x.y坐標(biāo)
                    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);
                }
            }

創(chuàng)建豎線

    for (int i = 0; i < 2; i++) {
                for (int j = 0; j < 3; j++) {
                    //創(chuàng)建一個(gè)視圖 用于顯示線
                    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);

                    //設(shè)置x.y坐標(biāo)
                    params.leftMargin = x + (int)(42*scale) + (int)(99*scale*j);
                    params.topMargin = y + (int)(170*scale) +(int)(99*scale*i);

                    rl.addView(lineView,params);
                }
            }

創(chuàng)建豎線

  for (int i = 0; i < 2; i++) {
                for (int j = 0; j < 2; j++) {
                    //創(chuàng)建一個(gè)視圖 用于顯示線
                    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);

                    //設(shè)置x.y坐標(biāo)
                    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);
                }
            }

創(chuàng)建九個(gè)點(diǎn)

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

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

實(shí)現(xiàn)手觸摸事件：

//監(jiān)聽觸摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

心得：

懵逼繼續(xù)，但漸漸地知道了個(gè)所以然，對那些調(diào)用方法慢慢地熟悉，偶爾調(diào)用個(gè)新的方法還是可以接受的，東哥說這兩天講的知識(shí)點(diǎn)對于我們剛開始接觸安卓開發(fā)有些難度，不知道在真的還是安慰我們，不要受打擊啥的，但相信堅(jiān)持努力，這些都會(huì)迎刃而解的。