1.布局
1.所有的布局类⾥里里⾯面都维护⼀一个LayoutParams extends MarginLayoutParmas 用于管理理当前这个布局容器器⼦子控件的布局
Margin:控件边缘和其他控件的间距- 外间距 Padding：控件内部和⾃自⼰己边缘的间距- 内间距
左边距 layout_marginLeft layout_marginStart
右边距 layout_marginRight layout_marginEnd
上边距 layout_marginTop
下边距 layout_marginBottom
权重按⽐例分配 layout_weight
image.png
3.LinearLayout: LinearLayout.LayoutParams
线性布局的方向：
Orientation：Vertical纵向 Horizontal横向
4.相对布局:必须能够确定每个控件的x y w h RelativeLayout 在MarginLayout的基础上添加了了对齐
当前这个控件和id为v1的控件右边对⻬：layout_alignRight = “@id/v1”
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1”
5.约束布局 ConstraintLayout实例：
1.左右上下间距20
<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_toEndOf="parent"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
image.png
2.宽高成⽐例的同时对齐 ：
layout_constraintDimensionRatio="h,1：2" 宽和高的比例
layout_constraintDimensionRatio=“w,1：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="2"
android:layout_marginRight="20dp"
/>
image.png
2.图案解锁demo：
1.Xml⽂文件设置容器器为RelativeLayout,同时添加id:
<?xml version="1.0" encoding="utf-8"?>
<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">
2.添加⼦子控件
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/main_bg" />
<!-- 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"
/>
image.png
3.监听窗⼝口focus状态改变->此刻整个容器器的尺⼨寸已经计算完毕:
image.png
4.准备工作：获取坐标以及把 dp 的单位 转成为 px(像素)
//获取容器
RelativeLayout r1 = findViewById(R.id.root_layout);
//获取背景视图的尺寸
ImageView iv = findViewById(R.id.opview);
//获取x和y的坐标
int x = iv.getLeft();
int y = iv.getTop();
5.将素材显示在容器里
（1）
float scale = getResources().getDisplayMetrics().density;
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 + 162 * scale) + (int) (99 * scale * j);
//将子控件添加到容器中
r1.addView(dotView, params);
}
}
（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);
//创建布局尺寸
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);
r1.addView(lineView, params);
}
}
（3）
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 3; 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) (99 * scale * j);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * i);
r1.addView(lineView, params);
}
}
（4）
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 + 42 * scale) + (int) (99 * scale * j);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * i);
r1.addView(lineView, params);
}
}
（5）
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.3 * scale) + (int) (99 * scale * j);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * i);
r1.addView(lineView, params);
}
}
6.后续操作：监听touch事件实现 滑动功能(未完待续）：
3.心得
今天的学习内容还是很容易理解的知识点也还好，只是掺杂了坐标那一块有个与数学相关的像素点换算，有点麻烦但不复杂，收益还是蛮不错的，继续努力吧
