目的:
通過學習布局類等方面的知識點丁频,以及控件的使用來完成圖案解鎖的功能。
技術:
1.布局類:
所有的布局類?面都維護?一個LayoutParams 硫惕,extends MarginLayoutParmas
?用于管理理當前這個布局容器??子控件的布局叁巨,例如:FrameLayout LinearLayout RelativeLayout 等财岔。
(1)線性布局LinearLayout:
Margin:控件邊緣和其他控件的間距- 外間距
Padding:控件內(nèi)部和?自?己邊緣的間距- 內(nèi)間距
有關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.邊距:
2.寬?高?例
layout_constraintDimensionRatio="h,1^2" 寬和?高的?比例例
layout_constraintDimensionRatio=“w,1^2” ?高和寬的?比例例
實際編程:
圖案解鎖:
1.添加控件 9個點 圖?片 20條線 圖?片
2.ImageView顯示圖?片
3容器?來管理理?子控件: FrameLayout LinearLayout RelativeLayout ConstraintsLayout
4.手觸摸事件
5.點亮:取消隱藏
6.記錄密碼
前期準備:
在res/drawable圖片資源文件導入所需的圖片
(1)Xml?文件設置容器?為RelativeLayout:
(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ā)有些難度鲤妥,不知道在真的還是安慰我們,不要受打擊啥的拱雏,但相信堅持努力棉安,這些都會迎刃而解的。