目的：

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写出来。