xml布局 布置一个图案解锁界面
内容
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" -
使用相对布局构建图案解锁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);
// 判断是否已经显示
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;
// 创建竖线
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*density+99*density*j) ;
params.topMargin = (int)(y + 170*density+99*density*i);
rl.addView(lineView,params);
System.out.println("n");
}
}
// 创建横线
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);
}
}
// 创建斜线
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*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++) {
// 创建用于显示点的视图
ImageView dotView = new ImageView(this);
// 显示对应的图片
dotView.setBackgroundResource(R.drawable.selected_dot);
// 隐藏视图
dotView.setVisibility(View.INVISIBLE);
// 创建控件的尺寸
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
