一、目的
1.學(xué)習(xí)布局的類：線性布局，相對(duì)布局，約束布局
2.實(shí)現(xiàn)圖案解鎖的視圖分布
二、知識(shí)點(diǎn)
所有的布局類里面都維護(hù)一個(gè)LayoutParams extends MarginLayoutParams
用于管理當(dāng)前這個(gè)布局容器子控件的布局
1 LinearLayout：線性布局
1.線性布局的方向
orientation ： vertical、horizontal
e.g android:orientation="horizontal"
2.邊距
layout_marginStart 控件和控件邊緣的間距 外間距
paddingStart 控件內(nèi)部和自己的間距 內(nèi)間距
layout_marginLeft左邊距
3.權(quán)重
layout_weight
2 相對(duì)布局 RelativeLayout 必須能夠確定每個(gè)控件的x，y坐標(biāo)，w、h
在MarginLayout的基礎(chǔ)上添加了對(duì)齊
layout_alignBottom（底部對(duì)齊）
3 約束布局 ConstraintLayout
1.寬高比例
app:layout_constraintDimensionRatio="w,1;2"高和寬的比
app:layout_constraintDimensionRatio="h,1;2"寬和高的比
2.實(shí)現(xiàn)兩個(gè)控件平分寬度
<View
android:id="@+id/v1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/v2"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintHorizontal_weight="1"/>
<View
android:id="@+id/v2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintTop_toTopOf="@id/v1"
app:layout_constraintBottom_toBottomOf="@id/v1"
app:layout_constraintStart_toEndOf="@id/v1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
android:layout_marginRight="20dp"
/>
4.圖案解鎖：
注:
安卓開(kāi)發(fā) 在容器中添加的控件需要被window計(jì)算/測(cè)量
window--viewGroup--子控件
通常在onCreate、onStart\onResume無(wú)法獲取到控件本身的尺寸
xml里不能計(jì)算，所以用代碼
獲取位置
params.leftMargin = x + (int)(scale35);
params.topMargin = y + (int)(scale163);
三、實(shí)際應(yīng)用：圖案解鎖
1.activity_main.xml:
背景圖片
<ImageView
android:id="@+id/iv_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/main_bg"
android:scaleType="fitXY"
/>
9個(gè)背景圖片
<ImageView
android:id="@+id/opView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/op_bg"
android:layout_centerInParent="true"
/>
2.MainActivity.java:
1.if(hasFocus)方法：
準(zhǔn)備工作：
//獲取容器
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;
創(chuàng)建豎線 *6 2行3列
for (int j = 0; j < 3; j++) {
//創(chuàng)建?一個(gè)視圖用于顯示線
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight2);
lineView.setVisibility(View.INVISIBLE);
//創(chuàng)建布局參數(shù)
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 + 170*scale) + (int)(99*scale*i); rl.addView(lineView, params);
}
}
創(chuàng)建橫線 *6 3行2列
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 2; j++) {
//創(chuàng)建?一個(gè)視圖用于顯示線
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight1);
lineView.setVisibility(View.INVISIBLE);
//創(chuàng)建布局參數(shù)
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.leftMargin = (int)(x + 46.6*scale) + (int)(99*scale*j); params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i); rl.addView(lineView, params);
}
}
創(chuàng)建右斜線 *4 2行2列 | 左斜線 *4 2行2列
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ù)
rLineView.setVisibility(View.INVISIBLE);
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 + 170*scale) + (int)(99*scale*i); rl.addView(rLineView, 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 + 170*scale) + (int)(99*scale*i);
rl.addView(lLineView,params);
}
}
創(chuàng)建圓點(diǎn)
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
//創(chuàng)建用于顯示點(diǎn)的視圖
ImageView dotView = new ImageView(this);;
//隱藏視圖
dotView.setVisibility(View.INVISIBLE);
//顯示對(duì)應(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 = (int)(x + 35.33*scale) + (int)(98.66*scale*i); params.topMargin = (int)(y + 162*scale) + (int)(98.66*scale*j);
params.leftMargin = (int)(x + 35.33*scale) + (int)(99*scale*j);
params.topMargin = (int)(y + 162*scale) + (int)(99*scale*i);
//將控件添加到容器中
rl.addView(dotView, params);
//將這個(gè)控件添加到數(shù)組
dotsList.add(dotView);
}
}
2.onCreate(new一個(gè)project的時(shí)候自己寫好的，無(wú)須其他操作）
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
四、心得
命運(yùn)不會(huì)虧待每一個(gè)付出了努力的人，即便不能及時(shí)得到回報(bào)，但也會(huì)因?yàn)槊恳淮蔚呐Χ淖內(nèi)松能壽E，只是有時(shí)候你并不知曉罷了。
