android沉浸式布局详解

1. 沉浸式布局简介

沉浸，何为沉浸？我所理解的就是让用户身临其境，尽量不被其他环境因素所干扰。在用户打开一个app的时候，能让用户感觉到界面干净简洁，没有和这个app无关的内容，就算是做到了这一点了。那么什么是和你的app关联不大的呢，其实也没有多少东西，无非就是一个顶部的状态栏和一个下部的虚拟按键而已。这两样东西，第一，会占据一些你能布局的空间，其次他们的风格如果和你的app格格不入的话，也会影响app的美观，所以，今天我们就来谈谈如何打造沉浸式交互体验。

---

2. 沉浸式布局的应用

我理解的沉浸式布局可以分为两种,一种是真沉浸式,一种是伪沉浸式,下面先介绍下这两种模式:

真沉浸式:

在这里先贴上一张官方给的图片:

如上图中(按序号):

1. 非沉浸式布局
这种非沉浸式布局可以看到,顶部的状态栏和底部的虚拟按键都是黑色的,与整体app的风格显得很不搭.

2. 沉浸式布局第一次出现时
在用户第一次进入沉浸式的时候,会提示用户如何从沉浸式布局中呼出系统的导航栏和状态栏.

3. 全沉浸式布局
可以看到界面三中除了app的内容,顶部的状态栏和底部的导航栏都被隐藏不可见了,不过用户还是可以通过边缘区域向内滑动来呼出状态栏和虚拟按键,此种布局适用于需要全屏显示的时候,比如绘画app,播放类app或者用在欢迎页也是个不错的选择.

//全沉浸式布局getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE                |View.SYSTEM_UI_FLAG_LAYOUT_STABLE                |View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY                |View.SYSTEM_UI_FLAG_HIDE_NAVIGATION                |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION                |View.SYSTEM_UI_FLAG_FULLSCREEN                |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

4. 半沉浸式布局
这种布局可能用到的会多一些,让顶部状态栏和底部虚拟按键半透明化,既不会影响用户的操作,也可以达到相差无几的效果.不过这种布局可能会导致被状态栏和虚拟按键所遮住的部分UI无法交互的问题,需要考虑到设计的问题.

//半沉浸式布局getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE                |View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY                |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION                |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

伪沉浸式:

这种沉浸式完全是个人的理解,官方并没有相关概念,算是一种是针对第四种半沉浸式布局局限性的一种解决方案吧.在实际使用第四种介绍的沉浸式布局的时候可能会遇到这种情况,你想让顶部导航栏透明,但又不希望因为透明让后面的布局被挡住,就像下面这种情况:

可以看到按钮被挡住了,这显然不是我们想要的效果,对于这种情况有两种解决方案:

• 方案一: 获取顶部状态栏的高度,然后做一个空的布局占位,也可以直接设置按钮的上边距,不过做成空布局简单一些利于做适配一些,在不支持沉浸式的手机上时可以去掉这个空布局就不会有留白的情况,一般状态栏的高度是25dp,如果非要算出他的高度的话可以通过[获取状态栏高度]来获取.

            //透明状态栏            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {                 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);                //透明导航栏                //getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);                //沉浸后用来占位的视图显示                headPadding.setVisibility(View.VISIBLE);            }else {            //这里做的是不支持沉浸式的适配                headPadding.setVisibility(View.GONE);            }

• 方案二: 如果只是单纯的需要让状态栏的颜色和主题的颜色相配的话,可以通过调节状态栏的颜色来达到这种效果:

//改变状态栏颜色getWindow().setStatusBarColor(getColor(R.color.colorPrimary));//改变底部虚拟按键颜色getWindow().setNavigationBarColor(getColor(R.color.colorPrimary));//注:颜色可以通过配合使用getWindow().getDecorView().setSystemUiVisibility(|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)+设置颜色的透明度达到一样的效果

---

3. 沉浸式布局的属性详解

getWindow().getDecorView().setSystemUiVisibility的具体可用属性(可多个共用,属性之间用 | 号隔开)

重要属性 注释 View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 去除底部虚拟按键的占位 View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 保留底部虚拟按键的占位但去除它的ui View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 去除顶部状态栏的占位 View.SYSTEM_UI_FLAG_FULLSCREEN 保留顶部状态栏的占位但去除它的ui View.SYSTEM_UI_FLAG_LAYOUT_STABLE 防止系统栏隐藏时内容区域大小发生变化 View.View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY (如果有该属性)在全沉浸时滑动后显示状态栏,但过几秒会继续全沉浸 View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 将状态栏的字体变成深色(有的需要白色状态栏时可能需要,否则看不清字)

---

— 以上