布局——手势解锁
目录
- 布局
- 线性布局（LinearLayout ）
- 相对布局（RelativeLayout ）
- 约束布局（ConstraintLayout）
- 注意
详解
- 布局
用容器来管理子控件，达到控制要求
- 基本分类：
FrameLayout
LinearLayout
ConstraintLayout（主要）
- 线性布局（LinearLayout ）
只能将图片水平、竖直位移
基本方法：
LayoutParams：
所有的布局类⾥⾯都维护⼀个LayoutParams extends MarginLayoutParmas
⽤于管理当前这个布局容器⼦控件的布局
LinearLayout: LinearLayout.LayoutParams
移动：
layout_marginStart=“位移属性”（控件边缘和其他控件的间距- 外间距）
layout_paddingStart=“位移属性”（控件内部和⾃⼰边缘的间距- 内间距）
方向：
End=Right=右
Start=Left=左
Top=上
Bottom=下
实现
<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
- 相对布局（RelativeLayout ）
控件与控件的关系，必须确定 x 、y 、w 、h
基本方法：包含LinearLayout方法
对齐：android:layout_alignStart=“对齐对象”
权重：layout_weight（按比例分配）
权重计算方式：
权重计算方式
实现
<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="后一个对象"
实现
1.左右上下间距20，旋转屏幕也不变
<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"
//设置大小
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
//设置间距/>
视图3
2.两个控件平分宽度，一直间距20，旋转屏幕也不变
<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计算/测量
方式：window->viewGroup->子控件
所以在onCreate onStart onResume无法获取控件的位置
方法：所有的测量都是在另外一个线程中实现
练习——手势解锁图案布局
1.添加控件9个点图片 20条线图片
2.imageview显示图片
3.容器来管理子控件RelativeLayout:
下期实现
4.手的触摸事件
5.点亮：取消隐藏
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个点-->
<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);
//判断是否已经显示
if (hasFocus){
//获取容器
RelativeLayout rl=findViewById(R.id.root_layout);
//获取背景视图
ImageView iv=findViewById(R.id.opView);
//获取坐标
int x=iv.getLeft();
int y=iv.getTop();
//屏幕密度
float scale=getResources().getDisplayMetrics().density;
//创建横线
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+47*scale)+(int)(100*scale*j);
params.topMargin=(int)(y+170*scale)+(int)(100*scale*i);
rl.addView(lineview,params);
}
}
//创建竖线
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图显示线
ImageView lineview=new ImageView(this);
//设置图片
lineview.setBackgroundResource(R.drawable.normal_highlight2);
//创建尺寸
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);
}
}
//创建右斜线
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图显示线
ImageView lineview=new ImageView(this);
//设置图片
lineview.setBackgroundResource(R.drawable.normal_highlight3);
//创建尺寸
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);
}
}
//创建左斜线
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图显示线
ImageView lineview=new ImageView(this);
//设置图片
lineview.setBackgroundResource(R.drawable.normal_highlight4);
//创建尺寸
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个点
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);
//创建控件的尺寸
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);
}
}
}
}
显示结果
