一、目的
1.学习布局的类：线性布局，相对布局，约束布局
2.实现图案解锁的视图分布
二、知识点
所有的布局类里面都维护一个LayoutParams extends MarginLayoutParams
用于管理当前这个布局容器子控件的布局
1 LinearLayout：线性布局
1.线性布局的方向
orientation ： vertical、horizontal
e.g android:orientation="horizontal"
2.边距
layout_marginStart 控件和控件边缘的间距 外间距
paddingStart 控件内部和自己的间距 内间距
layout_marginLeft左边距
3.权重
layout_weight
2 相对布局 RelativeLayout 必须能够确定每个控件的x，y坐标，w、h
在MarginLayout的基础上添加了对齐
layout_alignBottom（底部对齐）
3 约束布局 ConstraintLayout
1.宽高比例
app:layout_constraintDimensionRatio="w,1;2"高和宽的比
app:layout_constraintDimensionRatio="h,1;2"宽和高的比
2.实现两个控件平分宽度
<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.图案解锁：
注:
安卓开发 在容器中添加的控件需要被window计算/测量
window--viewGroup--子控件
通常在onCreate、onStart\onResume无法获取到控件本身的尺寸
xml里不能计算，所以用代码
获取位置
params.leftMargin = x + (int)(scale35);
params.topMargin = y + (int)(scale163);
三、实际应用：图案解锁
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个背景图片
<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)方法：
准备工作：
//获取容器
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;
创建竖线 *6 2行3列
for (int j = 0; j < 3; j++) {
//创建⼀一个视图用于显示线
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight2);
lineView.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(lineView, params);
}
}
创建横线 *6 3行2列
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);
lineView.setVisibility(View.INVISIBLE);
//创建布局参数
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);
}
}
创建右斜线 *4 2行2列 | 左斜线 *4 2行2列
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//创建⼀一个视图用于显示线
ImageView rLineView = new ImageView(this);
//设置图片
rLineView .setBackgroundResource(R.drawable.normal_highlight3);
//创建布局参数
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);
}
}
创建圆点
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.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);
//将这个控件添加到数组
dotsList.add(dotView);
}
}
2.onCreate(new一个project的时候自己写好的，无须其他操作）
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
四、心得
命运不会亏待每一个付出了努力的人，即便不能及时得到回报，但也会因为每一次的努力而改变人生的轨迹，只是有时候你并不知晓罢了。
