内容：
- Vertical纵向 Horizontal横向 align对齐的方法
- app:layout_constraintDimensionRatio="h,1:2" 宽和高的比例
app:layout_constraintDimensionRatio="w,1:2" 高和宽的比例 - 左边距 layout_marginLeft
layout_marginStart - 右边距 layout_marginRight
layout_marginEnd - 上边距 layout_marginTop
- 下边距 layout_marginBottom
- 权重按⽐比例例分配 layout_weight
- 相对布局:必须能够确定每个控件的x y w h RelativeLayout 在MarginLayout的基础上添加了了对⻬当前这个控件和id为v1的控件右边对⻬
layout_alignRight = “@id/v1”
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1” - 约束布局 ConstraintLayout
技术：
-
左右上下间距：20
2.png
3.png -
宽高比例
4.png
5.png
密码的实现过程：
- 添加控件 9个点 图片 20条线 图片
- ImageView显示图片
- 容器来管理子控件
- FrameLayout
- LinearLayout
- RelativeLayout
- ConstraintsLayout
- 手触摸事件
- 点亮：取消隐藏
- 记录密码
开发路线： Xml文件设置容器器为RelativeLayout
6.png
- 背景图片
- 9个点的背景图片
- 监听窗口focus状态改变->此刻整个容器的尺寸已经计算完毕
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
- 获取背景容器器的x 和y坐标
//判断是否已经显示
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<3;i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图用于显示线
ImageView lineView=new ImageView(this);
lineView.setVisibility(View.VISIBLE);
//设置图片
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);
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.setVisibility(View.VISIBLE);
//设置图片
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);
}
}
//创建右斜线 4条
for (int i=0;i<2;i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图用于显示线
ImageView rlineView=new ImageView(this);
rlineView.setVisibility(View.VISIBLE);
//设置图片
rlineView.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);
rl.addView(rlineView,params);
}
}
//创建左斜线 4条
for (int i=0;i<2;i++) {
for (int j = 0; j < 2; j++) {
//创建一个视图用于显示线
ImageView llineView=new ImageView(this);
llineView.setVisibility(View.VISIBLE);
//设置图片
llineView.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);
rl.addView(llineView,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+164*scale)+(int)(99*scale*j);
//将控件添加到容器中
rl.addView(dotView,params);
}
}
}
-
监听touch事件实现 滑动功能
7.png
总结：
在进行今天的这个demo的时候实现这个将控件添加到容器中有两种方法xml比较简单但是今天又了另外一个方法来写感觉听的时候很多时候都懵了，尤其是到那里求屏幕密度的时候真的不知道还可以这样来求自己手机的分辨率，还有在进行创建9个点那里计算的过程中在刚开始真的没有搞懂幸好在后面的图示化过程中了解了它是怎么样算的。