布局——手勢(shì)解鎖
目錄
- 布局
- 線性布局（LinearLayout ）
- 相對(duì)布局（RelativeLayout ）
- 約束布局（ConstraintLayout）
- 注意
詳解
- 布局
用容器來管理子控件宰睡，達(dá)到控制要求
- 基本分類：
FrameLayout
LinearLayout
ConstraintLayout（主要）
- 線性布局（LinearLayout ）
只能將圖片水平蒙揣、豎直位移
基本方法：
LayoutParams：
所有的布局類??都維護(hù)?個(gè)LayoutParams extends MarginLayoutParmas
?于管理當(dāng)前這個(gè)布局容器?控件的布局
LinearLayout: LinearLayout.LayoutParams
移動(dòng)：
layout_marginStart=“位移屬性”（控件邊緣和其他控件的間距- 外間距）
layout_paddingStart=“位移屬性”（控件內(nèi)部和??邊緣的間距- 內(nèi)間距）
方向：
End=Right=右
Start=Left=左
Top=上
Bottom=下
實(shí)現(xiàn)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:layout_marginStart="50dp"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimaryDark"
android:layout_marginTop="50dp"
android:layout_marginLeft="50dp"/>
視圖1
- 相對(duì)布局（RelativeLayout ）
控件與控件的關(guān)系，必須確定 x 忿等、y 、w 、h
基本方法：包含LinearLayout方法
對(duì)齊：android:layout_alignStart=“對(duì)齊對(duì)象”
權(quán)重：layout_weight（按比例分配）
權(quán)重計(jì)算方式：
權(quán)重計(jì)算方式
實(shí)現(xiàn)
<View
android:id="@+id/v1"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignRight="@+id/v1"
android:layout_alignBottom="@id/v1"
android:layout_marginRight="47dp"
android:layout_marginBottom="33dp"
android:background="@color/colorPrimary" />
視圖2
- 約束布局（ConstraintLayout）
基本方法：
寬??例：
layout_constraintDimensionRatio="h,1^2" 寬和?的?例
layout_constraintDimensionRatio=“w,1^2” ?和寬的?例
間距：
app:layout_constraintStart_toStartOf="后一個(gè)對(duì)象"
實(shí)現(xiàn)
1.左右上下間距20，旋轉(zhuǎn)屏幕也不變
<View
android:layout_width="0dp"
android:layout_height="0dp"
//不能確定
android:background="@color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
//設(shè)置大小
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
//設(shè)置間距/>
視圖3
2.兩個(gè)控件平分寬度倔喂，一直間距20，旋轉(zhuǎn)屏幕也不變
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>
<View
android:id="@+id/v1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/v2"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="20dp"
android:layout_marginStart="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/colorAccent"
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_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintHorizontal_weight="1"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
視圖4-橫屏
視圖5-豎屏
- 注意
在容器中添加的控件需要被window計(jì)算/測(cè)量
方式：window->viewGroup->子控件
所以在onCreate onStart onResume無法獲取控件的位置
方法：所有的測(cè)量都是在另外一個(gè)線程中實(shí)現(xiàn)
練習(xí)——手勢(shì)解鎖圖案布局
1.添加控件9個(gè)點(diǎn)圖片 20條線圖片
2.imageview顯示圖片
3.容器來管理子控件RelativeLayout:
下期實(shí)現(xiàn)
4.手的觸摸事件
5.點(diǎn)亮：取消隱藏
6.記錄密碼
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/root_layout">
<!--背景圖片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/main_bg"
android:scaleType="fitXY"/>
<!--9個(gè)點(diǎn)-->
<ImageView
android:id="@+id/opView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/op_bg"
/>
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@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);
//獲取坐標(biāo)
int x=iv.getLeft();
int y=iv.getTop();
//屏幕密度
float scale=getResources().getDisplayMetrics().density;
//創(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)建尺寸
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin=(int)(x+47*scale)+(int)(100*scale*j);
params.topMargin=(int)(y+170*scale)+(int)(100*scale*i);
rl.addView(lineview,params);
}
}
//創(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_highlight2);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin=(int)(x+42*scale)+(int)(100*scale*i);
params.topMargin=(int)(y+170*scale)+(int)(99*scale*j);
rl.addView(lineview,params);
}
}
//創(chuàng)建右斜線
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//創(chuàng)建一個(gè)視圖顯示線
ImageView lineview=new ImageView(this);
//設(shè)置圖片
lineview.setBackgroundResource(R.drawable.normal_highlight3);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin=(int)(x+47*scale)+(int)(100*scale*j);
params.topMargin=(int)(y+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 lineview=new ImageView(this);
//設(shè)置圖片
lineview.setBackgroundResource(R.drawable.normal_highlight4);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin=(int)(x+53*scale)+(int)(100*scale*j);
params.topMargin=(int)(y+170*scale)+(int)(99*scale*i);
rl.addView(lineview,params);
}
}
//9個(gè)點(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);
//控件移到對(duì)應(yīng)點(diǎn)
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é)果
