圖案解鎖1 2019-08-26

目的:

通過學習布局類等方面的知識點丁频,以及控件的使用來完成圖案解鎖的功能。

技術:

1.布局類:

所有的布局類?面都維護?一個LayoutParams 硫惕,extends MarginLayoutParmas
?用于管理理當前這個布局容器??子控件的布局叁巨,例如:FrameLayout LinearLayout RelativeLayout 等财岔。

(1)線性布局LinearLayout:

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


image.png

有關LinearLayout的相關布局:

布局方向 對應方法
Orientation: Vertical縱向 Horizontal橫向
左邊距 layout_marginLeft layout_marginStart
右邊距 layout_marginRight layout_marginEnd
上邊距 layout_marginTop
下邊距 layout_marginBottom
權重按?比例例分配 layout_weight
(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中實現(xiàn):

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

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坐標
            int x = iv.getLeft();
            int y = iv.getTop();

            //創(chuàng)建橫線
         
            //創(chuàng)建豎線
        
            //創(chuàng)建豎線
          
           //創(chuàng)建用于顯示點的視圖
       
        }
    }
在onWindowFocusChanged創(chuàng)建點和線:

創(chuàng)建橫線

   for (int i = 0; i < 3; i++) {
                for (int j = 0; j < 2; j++) {
                    //創(chuàng)建一個視圖 用于顯示線
                    ImageView lineView = new ImageView(this);

                    //設置圖片
                    lineView.setBackgroundResource(R.drawable.normal_highlight1);

                    //創(chuàng)建尺寸 布局參數(shù)
                    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);
                }
            }

創(chuàng)建豎線

    for (int i = 0; i < 2; i++) {
                for (int j = 0; j < 3; j++) {
                    //創(chuàng)建一個視圖 用于顯示線
                    ImageView lineView = new ImageView(this);

                    //設置圖片
                    lineView.setBackgroundResource(R.drawable.normal_highlight2);

                    //創(chuàng)建尺寸 布局參數(shù)
                    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);
                }
            }

創(chuàng)建豎線

  for (int i = 0; i < 2; i++) {
                for (int j = 0; j < 2; j++) {
                    //創(chuàng)建一個視圖 用于顯示線
                    ImageView rlineView = new ImageView(this);

                    //設置圖片
                    rlineView.setBackgroundResource(R.drawable.normal_highlight3);

                    //創(chuàng)建尺寸 布局參數(shù)
                    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);
                }
            }

創(chuàng)建九個點

     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);
                    //創(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);
                }
            }
實現(xiàn)手觸摸事件:
//監(jiān)聽觸摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

心得:

懵逼繼續(xù)避诽,但漸漸地知道了個所以然龟虎,對那些調(diào)用方法慢慢地熟悉,偶爾調(diào)用個新的方法還是可以接受的沙庐,東哥說這兩天講的知識點對于我們剛開始接觸安卓開發(fā)有些難度鲤妥,不知道在真的還是安慰我們,不要受打擊啥的拱雏,但相信堅持努力棉安,這些都會迎刃而解的。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铸抑,一起剝皮案震驚了整個濱河市贡耽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹊汛,老刑警劉巖菇爪,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異柒昏,居然都是意外死亡,警方通過查閱死者的電腦和手機熙揍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門职祷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事有梆∈羌猓” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵泥耀,是天一觀的道長饺汹。 經(jīng)常有香客問我,道長痰催,這世上最難降的妖魔是什么兜辞? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮夸溶,結(jié)果婚禮上逸吵,老公的妹妹穿的比我還像新娘。我一直安慰自己缝裁,他們只是感情好扫皱,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著捷绑,像睡著了一般韩脑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粹污,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天段多,我揣著相機與錄音,去河邊找鬼厕怜。 笑死衩匣,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的粥航。 我是一名探鬼主播琅捏,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼递雀!你這毒婦竟也來了柄延?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤缀程,失蹤者是張志新(化名)和其女友劉穎搜吧,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杨凑,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡滤奈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了撩满。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜒程。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡绅你,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出昭躺,到底是詐尸還是另有隱情忌锯,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布领炫,位于F島的核電站偶垮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏帝洪。R本人自食惡果不足惜似舵,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碟狞。 院中可真熱鬧啄枕,春花似錦、人聲如沸族沃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脆淹。三九已至常空,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盖溺,已是汗流浹背漓糙。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留烘嘱,地道東北人昆禽。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像蝇庭,于是被迫代替她去往敵國和親醉鳖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容