目的：
掌握安卓開發(fā)中的基本布局，通過寫圖案解鎖小demo來熟悉一些控件用法蝎土。
技術(shù)及使用：
1.布局
所有的布局類里面都維護(hù)一個LayoutParams extends MarginLayoutParmas
用于管理當(dāng)前這個布局容器子控件的布局
(1)線性布局LinearLayout
LinearLayout: LinearLayout.LayoutParams
Margin:控件邊緣和其他控件的間距- 外間距
Padding：控件內(nèi)部和自己邊緣的間距- 內(nèi)間距
Margin视哑、Padding圖示
線性布局的方向：
Orientation：Vertical縱向 Horizontal橫向
左邊距
layout_marginLeft
layout_marginStart
右邊距
layout_marginRight
layout_marginEnd
上邊距
layout_marginTop
下邊距
layout_marginBottom
權(quán)重按比例分配
layout_weight
(2)相對布局RelativeLayout
相對布局:必須能夠確定每個控件的x y w h
RelativeLayout
在MarginLayout的基礎(chǔ)上添加了對?
當(dāng)前這個控件和id為v1的控件右邊對?
layout_alignRight = “@id/v1”
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1”
(3)約束布局ConstraintLayout
v1添加約束
<View
android:id="@+id/v1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/v2"
app:layout_constraintHorizontal_weight="1"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"/>
v2添加約束
<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"
android:layout_marginRight="20dp"
app:layout_constraintHorizontal_weight="1"
/>
寬??例
layout_constraintDimensionRatio="h,1^2" 寬和?的?例
layout_constraintDimensionRatio=“w,1^2” ?和寬的?例
2.開發(fā)路線：
Xml文件設(shè)置容器為RelativeLayout
添加ID
添加子控件
<!--背景圖片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/main_bg"
android:scaleType="fitXY"
/>
<!--9個點(diǎn)的背景圖片-->
<ImageView
android:id="@+id/opView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/op_bg"
android:layout_centerInParent="true"/>
實(shí)際使用：
制作圖案解鎖(大致思路)：
- 添加控件 9個點(diǎn) 圖片 20條線 圖片
- ImageView顯示圖片
- 容器來管理子控件：
- 子觸摸事件
- 點(diǎn)亮：取消隱藏
- 記錄密碼
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
//判斷是否已經(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();
float scale = getResources().getDisplayMetrics().density;
//創(chuàng)建橫線 6條
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 3; j++) {
//創(chuàng)建一個視圖用于顯示圖
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);
params.leftMargin = (int) (x + 46.7 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//創(chuàng)建豎線 6條
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 2; j++) {
//創(chuàng)建一個視圖用于顯示圖
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);
params.leftMargin = (int) (x + 42 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//創(chuàng)建斜線1 4條
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//創(chuàng)建一個視圖用于顯示圖
ImageView lineView = new ImageView(this);
//設(shè)置圖片
lineView.setBackgroundResource(R.drawable.normal_highlight3);
//創(chuàng)建布局參數(shù)
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int) (x + 49 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//創(chuàng)建斜線2 4條
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//創(chuàng)建一個視圖用于顯示圖
ImageView lineView = new ImageView(this);
//設(shè)置圖片
lineView.setBackgroundResource(R.drawable.normal_highlight4);
//創(chuàng)建布局參數(shù)
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int) (x + 53.3 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//創(chuàng)建9個點(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.VISIBLE);
//顯示對應(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 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 163 * scale) + (int) (99 * scale * j);
//將控件添加到容器中
rl.addView(dotView, params);
}
}
//監(jiān)聽觸摸事件 onTouchEvent
}
}
大致效果：
大致效果
存在問題：
橫屏的話中間的解鎖板塊會錯亂。
心得體會：
今天學(xué)習(xí)了幾種布局誊涯，后面在制作解鎖demo中很多控件還不是很了解挡毅，但是思路還算比較清晰，希望在今后的學(xué)習(xí)能夠熟悉掌握這些控件暴构。還有在調(diào)試圖片位置時屬實(shí)不容易跪呈，不過還是比較有意思。
