前言:

Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏、 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念,让开发者可以自己设定系统区域的颜色,使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果。先看下预期效果:

首先现分清楚哪部分是状态栏,哪部分是导航栏

状态栏StatusBar如下

导航栏NavigationBar如下

如何实现?

1.)首先实现全屏

第一种:继承主题特定主题

在Android API 19以上可以使用****.TranslucentDecor***有关的主题,自带相应半透明效果,Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor两种主题为新增加的,所以要新建values-v19文件夹并创建styles文件添加如下代码

   <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor">
        <!-- Customize your theme here. -->
  </style>

第二种:在activity中采用代码的方式

Android 4.4以上可以添加如下代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

Android 5.0 以上也可以使用下面的代码实现全屏

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
}

全屏效果

不难发现此时状态栏占有的位置消失,和app的布局叠在一起了,接下来解决这个问题

2.)解决状态栏占位问题

第一种:主题添加如下设置

<item name="android:fitsSystemWindows">true</item>

第二种:activity layout根目录添加下面代码

android:fitsSystemWindows="true"

第三种:通过Java代码设置

rootview.setFitsSystemWindows(true);

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统,这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效,

如果上述设置了状态栏和导航栏为透明的话,相当于对该View自动添加一个值等于状态栏高度的paddingTop,和等于导航栏高度的paddingBottom,效果如下

3.)状态栏导航栏设置背景色

4.4以上的可以采用修改contentView的背景色,或者动态添加一个view到contentView上

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明状态栏
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明导航栏
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //设置contentview为fitsSystemWindows
            ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
            //给statusbar着色
            View view = new View(this);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
            view.setBackgroundColor(color);
            contentView.addView(view);
        }

动态获取StatusBarHeight函数如下

    /**
     * 获取状态栏高度
     *
     * @param context context
     * @return 状态栏高度
     */
    private static int getStatusBarHeight(Context context) {
        // 获得状态栏高度
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }

动态获取NavigationBarHeight函数如下

    /**
     * 获取导航栏高度
     *
     * @param context context
     * @return 导航栏高度
     */
    public static int getNavigationBarHeight(Context context) {
        int resourceId = context.getResources().getIdentifier("navigation_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }

然后Android5.0以上谷歌提供了新的api可以更新状态栏和导航栏的背景色

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //设置状态栏颜色
            window.setStatusBarColor(color);
            //设置导航栏颜色
            window.setNavigationBarColor(color);
            ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
//            contentView.setPadding(0, getStatusBarHeight(this), 0, 0);
        }

这样总体效果就实现了

4.)贴出整体java代码实现方式

    private void initWindows() {
        Window window = getWindow();
        int color = getResources().getColor(android.R.color.holo_blue_light);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //设置状态栏颜色
            window.setStatusBarColor(color);
            //设置导航栏颜色
            window.setNavigationBarColor(color);
            ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明状态栏
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明导航栏
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //设置contentview为fitsSystemWindows
            ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
            //给statusbar着色
            View view = new View(this);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
            view.setBackgroundColor(color);
            contentView.addView(view);
        }
    }

总结:

我这里为了更加明显的显示效果所以状态栏背景色和标题栏颜色不一致,在实际的开发中一般情况下我们都会设置成统一的颜色,在视觉上感觉整个页面更加统一,让用户真正沉浸在app中。

Android UI体验之全屏沉浸式透明状态栏效果的更多相关文章

  1. Android 4.4 沉浸式透明状态栏与导航栏

    Android 系统自4.2 開始 UI 上就没多大改变,4.4 也仅仅是添加了透明状态栏与导航栏的功能,如图 那么如今我就来给大家解说下怎样使用这个新特性,让你的 app 尾随潮流,当然假设你不在乎 ...

  2. Android 4.4 沉浸式透明状态栏

    原文链接:http://www.bkjia.com/Androidjc/913061.html 第一种方法 这里写代码片第一种方法,在代码设置: if(VERSION.SDK_INT >= VE ...

  3. [Android] 关于系统工具栏和全屏沉浸模式

    随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...

  4. Android 5.0以上Material Design 沉浸式状态栏

    偶然在知乎上看到这个问题,Android 5.0 如何实现将布局的内容延伸到状态栏,之前也见过多个应用的这个功能,但是知乎上的答案却没有一个真正实现此功能的一类是把标题栏设置App主题颜色,一类是提取 ...

  5. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  6. jQuery支持mobile的全屏水平横向翻页效果

    这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...

  7. Android如何实现超级棒的沉浸式体验

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由brzhang发表于云+社区专栏 做APP开发的过程中,有很多时候,我们需要实现类似于下面这种沉浸式的体验. 沉浸式体验 一开始接触的 ...

  8. Android开发中的全屏背景显示方案

    引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...

  9. Android 无标题、全屏设置

    一.在主题中设置无标题.全屏 (一):直接设置主题: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  // ...

随机推荐

  1. 面试题目——《CC150》智力题

    面试题6.1:有20瓶药丸,其中19瓶装有1克/粒的药丸,余下一瓶装有1.1克/粒的药丸.给你一台称重精准的天平,怎么找出比较重的那瓶药丸?天平只能用一次. 思路:第1瓶取1颗,第2瓶取2颗....最 ...

  2. canvas 动态画线

    <!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...

  3. en_windows_10_multiple_editions_version_1511_x64.iso

    好久没折腾电脑了,这几天在E盘装了个64位Windows 10 TH2 专业版,从MSDN官网下载的英文原版镜像,用kms10未能激活,一看日志文件,说我这是零售版,后面就关掉了什么监听端口,然后就完 ...

  4. jquery checkbox选中、改变状态、change和click事件

    jquery判断checked的三种方法:.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('che ...

  5. CM: 使用gerrit,提交代码到CM

    1. Make sure your local git username matches with your Gerrit username, Gerrit username needs to be ...

  6. C++中的运算符重载

    首先思考以下几个问题: 1.什么是运算符重载? 2.为什么要重载运算符,它有什么用? 3.可以重载哪些运算符? 4.重载运算符有哪些规则? 一.基本概念 我们在程序中使用各种操作符,比如加(+).赋值 ...

  7. 使用手机模拟器与android操作系统

    创建手机模拟器: 1. 点击Eclipse中新增的按钮,打开"Android Virtual Device Manager"(不同版本的ADT可能打开路径不同),如下图: 2. 点 ...

  8. 无限二等分[0,1]这个区间之后还剩下啥?what&#39;s left after dividing an unit interval [0,1] infinitely many times?

    Dividing an unit interval \([0,1]\) into two equal subintervals by the midpoint \(\dfrac {0+1} {2}=\ ...

  9. BZOJ4554 - [TJOI2016&HEOI2016]游戏

    原题链接 Description 给出一个的地图,地图上有空地.软石头和硬石头.求在这张地图上最多能放上多少个炸弹能使得任意两个炸弹之间不会互相炸到.炸弹能炸到的范围是该炸弹所在的一行和一列,炸弹的威 ...

  10. SpringMVC Web项目升级为Springboot项目(二)

    一.访问原项目地址,报404错误 由于原项目地址启动路径为http://localhost:8080/xxx Spring boot默认启动路径为http://localhost:8080/ 所以需要 ...