xml布局 布置一個圖案解鎖界面
內(nèi)容
1.添加控件 9個點 圖片 20條線 圖片
2.ImageView顯示圖片
3.容器來管理子控件
- 布局：
幀布局 FrameLayout
線性布局 LinearLayout
相對布局 RelativeLayout
約束布局 ConstraintsLayout
所有的布局類里面都維護一個LayoutParams
extends MarginLayoutParams
用于管理當前這個布局容器子控件的布局
技術
-
線性布局 LinearLayoutQQ圖片20190826194634.png
QQ圖片20190826195548.png
一個縱向線性布局
QQ圖片20190826195734.jpg
- 約束布局
一個約束布局
<View
android:id="@+id/b"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/a"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="50dp"
android:layout_marginBottom="50dp"
app:layout_constraintHorizontal_weight="1"/>
<View
android:id="@+id/a"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintStart_toEndOf="@id/b"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/b"
app:layout_constraintBottom_toBottomOf="@id/b"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
app:layout_constraintHorizontal_weight="1"/>
QQ圖片20190826200538.jpg
-
相對布局
相對布局：必須能夠確定每個控件的x y w h
RelativeLayout
在MarginLayout的基礎上添加了對齊當前這個控件和ID為v1的控件右邊對齊
layout_align = "@id/v1" -
使用相對布局構(gòu)建圖案解鎖demo的背景
QQ圖片20190826200955.png 圖案解鎖demo的代碼
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
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);
// 獲取x和y坐標
int x = iv.getLeft();
int y = iv.getTop();
// 獲取屏幕密度
float density = getResources().getDisplayMetrics().density;
// 創(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);
params.leftMargin =(int)(x + 42*density+99*density*j) ;
params.topMargin = (int)(y + 170*density+99*density*i);
rl.addView(lineView,params);
System.out.println("n");
}
}
// 創(chuàng)建橫線
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 2; j++) {
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight1);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 46.6*density)+(int)(99*density*j);
params.topMargin = (int)(y + 170*density)+(int)(99*density*i);
rl.addView(lineView,params);
}
}
// 創(chuàng)建斜線
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
// 創(chuàng)建一個視圖用于顯示線
ImageView lineView = new ImageView(this);
// 設置圖片
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 + 42*density)+(int)(99*density*j) ;
params.topMargin = (int)(y + 170*density)+(int)(99*density*i);
rl.addView(lineView,params);
ImageView LlineView = new ImageView(this);
// 設置圖片
LlineView.setBackgroundResource(R.drawable.normal_highlight4);
params.leftMargin =(int)(x + 53.3*density)+(int)(99*density*j) ;
params.topMargin = (int)(y + 164*density)+(int)(99*density*i);
rl.addView(LlineView,params);
}
}
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
// 創(chuàng)建用于顯示點的視圖
ImageView dotView = new ImageView(this);
// 顯示對應的圖片
dotView.setBackgroundResource(R.drawable.selected_dot);
// 隱藏視圖
dotView.setVisibility(View.INVISIBLE);
// 創(chuàng)建控件的尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 35*density)+(int)(99*density*i);
params.topMargin = (int)(y + 164*density)+(int)(99*density*j);
// 將控件添加到容器中
rl.addView(dotView,params);
}
}
}
}
/**
* 安卓 在容器中添加的控件需要被window計算/測量
* window -> viewGroup -> 子控件
* 通常在onCreate秀菱、onStart振诬、onResume無法獲取到控件本身的尺寸
* 所有的測量都是在另外一個線程操作
* 如果想要獲取控件的尺寸
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
QQ圖片20190826201710.jpg
