安卓开发第二天|图案解锁1

一、目的

1.学习布局的类：线性布局，相对布局，约束布局
2.实现图案解锁的视图分布

二、知识点

所有的布局类里面都维护一个LayoutParams extends MarginLayoutParams
用于管理当前这个布局容器子控件的布局
1 LinearLayout：线性布局
1.线性布局的方向
orientation ： vertical、horizontal

e.g android:orientation="horizontal"

2.边距
layout_marginStart 控件和控件边缘的间距 外间距
paddingStart 控件内部和自己的间距 内间距

layout_marginLeft左边距

3.权重
layout_weight
2 相对布局 RelativeLayout 必须能够确定每个控件的x，y坐标，w、h
在MarginLayout的基础上添加了对齐
layout_alignBottom（底部对齐）
3 约束布局 ConstraintLayout
1.宽高比例
app:layout_constraintDimensionRatio="w,1;2"高和宽的比
app:layout_constraintDimensionRatio="h,1;2"宽和高的比

2.实现两个控件平分宽度

4.图案解锁：
注:
安卓开发 在容器中添加的控件需要被window计算/测量
window--viewGroup--子控件

通常在onCreate、onStart\onResume无法获取到控件本身的尺寸
xml里不能计算，所以用代码
获取位置
params.leftMargin = x + (int)(scale35);
params.topMargin = y + (int)(scale163);

三、实际应用：图案解锁

1.activity_main.xml:

背景图片

9个背景图片

---

2.MainActivity.java:

1.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 2行3列

                    for (int j = 0; j < 3; j++) {
                        //创建⼀一个视图用于显示线
                        ImageView lineView = new ImageView(this);
                        lineView.setBackgroundResource(R.drawable.normal_highlight2);
                        lineView.setVisibility(View.INVISIBLE);

                        //创建布局参数
                        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);
                    }
                                  }

创建横线 *6 3行2列

            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);
                        lineView.setVisibility(View.INVISIBLE);

                        //创建布局参数
                        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);
                    }
                }

创建右斜线 *4 2行2列 | 左斜线 *4 2行2列

 for (int i = 0; i < 2; i++) {
                    for (int j = 0; j < 2; j++) {
                        //创建⼀一个视图用于显示线
                        ImageView rLineView = new ImageView(this);
                        //设置图片
                        rLineView .setBackgroundResource(R.drawable.normal_highlight3);
                       
                        //创建布局参数
                        rLineView.setVisibility(View.INVISIBLE);
                        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);

                        //
                        ImageView lLineView = new ImageView(this);
                        lLineView.setVisibility(View.INVISIBLE);
                        lLineView.setBackgroundResource(R.drawable.normal_highlight4);

                        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);
                    }
                                   }

创建圆点

             for (int i = 0; i < 3; i++) {
                    for (int j = 0; j < 3; j++) {
                        //创建用于显示点的视图
                        ImageView dotView = new ImageView(this);;
                        
                        //隐藏视图
                        dotView.setVisibility(View.INVISIBLE);                    
                        //显示对应的图片
                        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.33*scale) + (int)(98.66*scale*i);                    params.topMargin = (int)(y + 162*scale) + (int)(98.66*scale*j);

                        params.leftMargin = (int)(x + 35.33*scale) + (int)(99*scale*j);
                        params.topMargin = (int)(y + 162*scale) + (int)(99*scale*i);

                        //将控件添加到容器中
                        rl.addView(dotView, params);
                        //将这个控件添加到数组
                         dotsList.add(dotView);
                    }
                }

2.onCreate(new一个project的时候自己写好的，无须其他操作）

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
}

四、心得

命运不会亏待每一个付出了努力的人，即便不能及时得到回报，但也会因为每一次的努力而改变人生的轨迹，只是有时候你并不知晓罢了。