目的：
掌握安卓开发中的基本布局，通过写图案解锁小demo来熟悉一些控件用法。
技术及使用：
1.布局
所有的布局类里面都维护一个LayoutParams extends MarginLayoutParmas
用于管理当前这个布局容器子控件的布局
(1)线性布局LinearLayout
LinearLayout: LinearLayout.LayoutParams
Margin:控件边缘和其他控件的间距- 外间距
Padding：控件内部和自己边缘的间距- 内间距
Margin、Padding图示
线性布局的方向：
Orientation：Vertical纵向 Horizontal横向
左边距
layout_marginLeft
layout_marginStart
右边距
layout_marginRight
layout_marginEnd
上边距
layout_marginTop
下边距
layout_marginBottom
权重按比例分配
layout_weight
(2)相对布局RelativeLayout
相对布局:必须能够确定每个控件的x y w h
RelativeLayout
在MarginLayout的基础上添加了对⻬
当前这个控件和id为v1的控件右边对⻬
layout_alignRight = “@id/v1”
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1”
(3)约束布局ConstraintLayout
v1添加约束
<View
android:id="@+id/v1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/v2"
app:layout_constraintHorizontal_weight="1"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"/>
v2添加约束
<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"
android:layout_marginRight="20dp"
app:layout_constraintHorizontal_weight="1"
/>
宽⾼⽐例
layout_constraintDimensionRatio="h,1^2" 宽和⾼的⽐例
layout_constraintDimensionRatio=“w,1^2” ⾼和宽的⽐例
2.开发路线：
Xml文件设置容器为RelativeLayout
添加ID
添加子控件
<!--背景图片-->
<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:src="@drawable/op_bg"
android:layout_centerInParent="true"/>
实际使用：
制作图案解锁(大致思路)：
- 添加控件 9个点 图片 20条线 图片
- ImageView显示图片
- 容器来管理子控件：
- 子触摸事件
- 点亮：取消隐藏
- 记录密码
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
//判断是否已经显示
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条
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 3; 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.7 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//创建竖线 6条
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) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//创建斜线1 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 + 49 * scale) + (int) (99 * scale * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
rl.addView(lineView, params);
}
}
//创建斜线2 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_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 * i);
params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * j);
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.VISIBLE);
//显示对应的图片
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);
}
}
//监听触摸事件 onTouchEvent
}
}
大致效果：
大致效果
存在问题：
横屏的话中间的解锁板块会错乱。
心得体会：
今天学习了几种布局，后面在制作解锁demo中很多控件还不是很了解，但是思路还算比较清晰，希望在今后的学习能够熟悉掌握这些控件。还有在调试图片位置时属实不容易，不过还是比较有意思。
