Android开发第二天

布局——手势解锁

目录

1. 布局
2. 线性布局（LinearLayout ）
3. 相对布局（RelativeLayout ）
4. 约束布局（ConstraintLayout）
5. 注意

详解

1. 布局
   用容器来管理子控件，达到控制要求

• 基本分类：
  FrameLayout
  LinearLayout
  ConstraintLayout（主要）

2. 线性布局（LinearLayout ）
   只能将图片水平、竖直位移

基本方法：
LayoutParams：
所有的布局类⾥⾯都维护⼀个LayoutParams extends MarginLayoutParmas
⽤于管理当前这个布局容器⼦控件的布局
LinearLayout: LinearLayout.LayoutParams
移动：
layout_marginStart=“位移属性”（控件边缘和其他控件的间距- 外间距）
layout_paddingStart=“位移属性”（控件内部和⾃⼰边缘的间距- 内间距）

方向：
End=Right=右
Start=Left=左
Top=上
Bottom=下

实现

视图1

3. 相对布局（RelativeLayout ）
   控件与控件的关系，必须确定 x 、y 、w 、h

基本方法：包含LinearLayout方法
对齐：android:layout_alignStart=“对齐对象”
权重：layout_weight（按比例分配）

权重计算方式：

权重计算方式

实现

视图2

4. 约束布局（ConstraintLayout）

基本方法：
宽⾼⽐例：
layout_constraintDimensionRatio="h,1^2" 宽和⾼的⽐例
layout_constraintDimensionRatio=“w,1^2” ⾼和宽的⽐例
间距：
app:layout_constraintStart_toStartOf="后一个对象"

实现
1.左右上下间距20，旋转屏幕也不变

视图3

2.两个控件平分宽度，一直间距20，旋转屏幕也不变

视图4-横屏

视图5-竖屏

5. 注意
   在容器中添加的控件需要被window计算/测量

方式：window->viewGroup->子控件

所以在onCreate onStart onResume无法获取控件的位置

方法：所有的测量都是在另外一个线程中实现

练习——手势解锁图案布局

1.添加控件9个点图片 20条线图片
2.imageview显示图片
3.容器来管理子控件RelativeLayout:
下期实现
4.手的触摸事件
5.点亮：取消隐藏
6.记录密码

activity_main.xml

MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        //判断是否已经显示
        if (hasFocus){
            //获取容器
            RelativeLayout rl=findViewById(R.id.root_layout);

            //获取背景视图
            ImageView iv=findViewById(R.id.opView);

            //获取坐标
            int x=iv.getLeft();
            int y=iv.getTop();

            //屏幕密度
            float scale=getResources().getDisplayMetrics().density;

            //创建横线
            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);
                    //创建尺寸
                    RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
                            ViewGroup.LayoutParams.WRAP_CONTENT,
                            ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.leftMargin=(int)(x+47*scale)+(int)(100*scale*j);
                    params.topMargin=(int)(y+170*scale)+(int)(100*scale*i);

                    rl.addView(lineview,params);

                }
            }

            //创建竖线
            for (int i = 0; i < 3; i++) {
                for (int j = 0; j < 2; 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)(100*scale*i);
                    params.topMargin=(int)(y+170*scale)+(int)(99*scale*j);

                    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+47*scale)+(int)(100*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_highlight4);
                    //创建尺寸
                    RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(
                            ViewGroup.LayoutParams.WRAP_CONTENT,
                            ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.leftMargin=(int)(x+53*scale)+(int)(100*scale*j);
                    params.topMargin=(int)(y+170*scale)+(int)(99*scale*i);

                    rl.addView(lineview,params);

                }
            }

            //9个点
            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*scale)+(int)(99*scale*i);
                    params.topMargin=(int)(y+163*scale)+(int)(99*scale*j);

                    //将控件添加到容器
                    rl.addView(dotview,params);

                }
            }
        }
    }

显示结果