目的：
1.基本布局的了解
2.各种布局方法的了解和练习
3.利用xml进行开发
开发思维：
添加控件 9个点 图⽚ 20条线 图片
ImageView显示图片 容器来管理子控件： FrameLayout LinearLayout RelativeLayout ConstraintsLayout
手触摸事件 点亮：取消隐藏
记录密码
具体实施：
获取容器视图：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView dot =new ImageView(this);
dot.setBackgroundResource(R.drawable.selected_dot);
//创建这个控件对应的坐标位置 LayoutParams
ConstraintLayout.LayoutParams params =new ConstraintLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
//获取背景图片的x，y
ImageView bgImageView = findViewById(R.id.op_view);
int x = (int)bgImageView.getX();
int y = (int)bgImageView.getY();
params.leftMargin =50;
params.topMargin =50;
}
添加控件 9个点 图⽚ 20条线 图片
ImageView显示图片 容器来管理子控件：
public void onWindowFocusChanged(boolean hasFocus) {
//判断是否已经显示
if (hasFocus) {
//获取容器
RelativeLayout rl = findViewById(R.id.root_layout);
//获取背景视图
ImageView iv = findViewById(R.id.op_view);
float scale = getResources().getDisplayMetrics().density;
//获取 x 和 y坐标
int x = iv.getLeft();
int y = iv.getTop();
创建横线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.6*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 < 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);
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*scale) +(int)(99*scale*i);
params.topMargin = (int)(y + 170*scale)+(int)(99*scale*j);
rl.addView(lineView, params);
ImageView lLineView = new ImageView(this);
lLineView.setBackgroundResource(R.drawable.normal_highlight4);
params.leftMargin = (int)(x + 53.3*scale) +(int)(99*scale*i);
params.topMargin = (int)(y + 170*scale)+(int)(99*scale*j);
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.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 + 162*scale)+(int)(99*scale*j);
//将子控件添加到容器中
rl.addView(dotView, params);
}
}
}
}
还有手触摸事件，记录密码。
小结：
东西很多，各种布局了解下来，就感觉大脑快装满了。尤其是算位置的时候很是焦灼（泪奔），强行理解（勉强过关）。在弄完一组控件添加之后，后面的控件添加就简单了，以为思路清晰了，就快。很期待，将完整的demo写出来。
