Day21图案解锁demo

1.布局

1.所有的布局类⾥里里⾯面都维护⼀一个LayoutParams extends MarginLayoutParmas 用于管理理当前这个布局容器器⼦子控件的布局

Margin:控件边缘和其他控件的间距- 外间距 Padding：控件内部和⾃自⼰己边缘的间距- 内间距
左边距 layout_marginLeft layout_marginStart
右边距 layout_marginRight layout_marginEnd
上边距 layout_marginTop
下边距 layout_marginBottom
权重按⽐例分配 layout_weight

image.png

3.LinearLayout: LinearLayout.LayoutParams
线性布局的方向：
Orientation：Vertical纵向 Horizontal横向
4.相对布局:必须能够确定每个控件的x y w h RelativeLayout 在MarginLayout的基础上添加了了对齐
当前这个控件和id为v1的控件右边对⻬：layout_alignRight = “@id/v1”
layout_alignLeft = “@id/v1”
layout_alignTop = “@id/v1”
layout_alignBottom = “@id/v1”
5.约束布局 ConstraintLayout实例：
1.左右上下间距20

 <View
        android:id="@+id/v1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"


        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"

image.png

2.宽高成⽐例的同时对齐：
layout_constraintDimensionRatio="h,1：2" 宽和高的比例
layout_constraintDimensionRatio=“w,1：2” 高和宽的比例


 <View
        android:id="@+id/v1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/v2"


        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"

        app:layout_constraintHorizontal_weight="1"/>

    <View
        android:id="@+id/v2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"

        app:layout_constraintTop_toTopOf="@id/v1"
        app:layout_constraintBottom_toBottomOf="@id/v1"

        app:layout_constraintStart_toEndOf="@id/v1"
        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_weight="2"
        android:layout_marginRight="20dp"
        />

image.png

2.图案解锁demo：

1.Xml⽂文件设置容器器为RelativeLayout,同时添加id:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/root_layout">

2.添加⼦子控件

  <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/main_bg" />
  <!-- 9个点的背景图片-->
    <ImageView
        android:id="@+id/opview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/op_bg"
      android:layout_centerInParent="true"
        />

image.png

3.监听窗⼝口focus状态改变->此刻整个容器器的尺⼨寸已经计算完毕:

image.png

4.准备工作：获取坐标以及把 dp 的单位转成为 px(像素)

            //获取容器
            RelativeLayout r1 = findViewById(R.id.root_layout);
            //获取背景视图的尺寸
            ImageView iv = findViewById(R.id.opview);
            //获取x和y的坐标
            int x = iv.getLeft();
            int y = iv.getTop();

5.将素材显示在容器里
（1）

   float scale = getResources().getDisplayMetrics().density;
            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 + 162 * scale) + (int) (99 * scale * j);
                    //将子控件添加到容器中
                    r1.addView(dotView, params);


                }
            }

（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);
                    //创建布局尺寸
                    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);
                    r1.addView(lineView, params);
                }
            }

（3）

   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);
                    r1.addView(lineView, params);
                }
            }

（4）

 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 * j);
                    params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * i);
                    r1.addView(lineView, params);
                }
            }

（5）

    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.3 * scale) + (int) (99 * scale * j);
                    params.topMargin = (int) (y + 170 * scale) + (int) (99 * scale * i);
                    r1.addView(lineView, params);
                }
            }

6.后续操作：监听touch事件实现滑动功能(未完待续）：

3.心得

今天的学习内容还是很容易理解的知识点也还好，只是掺杂了坐标那一块有个与数学相关的像素点换算，有点麻烦但不复杂，收益还是蛮不错的，继续努力吧

Day21图案解锁demo