学习AndroidStudio布局，并编写一个图案解锁demo

目的：

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