Android第二天

xml布局 布置一个图案解锁界面

内容

1.添加控件 9个点 图片 20条线 图片
2.ImageView显示图片
3.容器来管理子控件

• 布局：
  帧布局 FrameLayout
  线性布局 LinearLayout
  相对布局 RelativeLayout
  约束布局 ConstraintsLayout
  所有的布局类里面都维护一个LayoutParams
  extends MarginLayoutParams
  用于管理当前这个布局容器子控件的布局

技术

• 线性布局 LinearLayout
  QQ图片20190826194634.png

一个横向线性布局

QQ图片20190826195548.png

一个纵向线性布局

QQ图片20190826195734.jpg

• 约束布局
  一个约束布局

效果

QQ图片20190826200538.jpg

• 相对布局
  相对布局：必须能够确定每个控件的x y w h
  RelativeLayout
  在MarginLayout的基础上添加了对齐

  当前这个控件和ID为v1的控件右边对齐
  layout_align = "@id/v1"

• 使用相对布局构建图案解锁demo的背景

  
  
  QQ图片20190826200955.png

• 图案解锁demo的代码

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

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

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

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



            // 创建竖线
            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*density+99*density*j) ;
                    params.topMargin = (int)(y + 170*density+99*density*i);

                    rl.addView(lineView,params);

                    System.out.println("n");
                }
            }

            // 创建横线
            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*density)+(int)(99*density*j);
                    params.topMargin = (int)(y + 170*density)+(int)(99*density*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*density)+(int)(99*density*j) ;
                    params.topMargin = (int)(y + 170*density)+(int)(99*density*i);

                    rl.addView(lineView,params);

                    ImageView LlineView = new ImageView(this);
                    // 设置图片
                    LlineView.setBackgroundResource(R.drawable.normal_highlight4);
                    params.leftMargin =(int)(x + 53.3*density)+(int)(99*density*j) ;
                    params.topMargin = (int)(y + 164*density)+(int)(99*density*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.setBackgroundResource(R.drawable.selected_dot);

                    // 隐藏视图
                    dotView.setVisibility(View.INVISIBLE);

                    // 创建控件的尺寸
                    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);



                    params.leftMargin = (int)(x + 35*density)+(int)(99*density*i);
                    params.topMargin = (int)(y + 164*density)+(int)(99*density*j);


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

                }
            }
        }
    }

    /**
     * 安卓 在容器中添加的控件需要被window计算/测量
     * window -> viewGroup  -> 子控件
     * 通常在onCreate、onStart、onResume无法获取到控件本身的尺寸
     * 所有的测量都是在另外一个线程操作
     * 如果想要获取控件的尺寸
     */

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

    }
}

运行结果

QQ图片20190826201710.jpg