Android UI体验之全屏沉浸式透明状态栏效果

前言：

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中。

时间： 2024-10-10 02:08:20

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

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

安卓4.4才有的沉浸式状态栏 在代码设置: if(VERSION.SDK_INT >= VERSION_CODES.KITKAT) { //透明状态栏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //透明导航栏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); } 直接调用上面2行代码可以

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

关于System Bars,之前写过几篇相关的文章: [Android]获取系统顶部状态栏(Status Bar)与底部导航栏(Navigation Bar)的高度 [Android]状态栏的一些认识 [Android]锁定屏幕 这三篇是按顺序写的,本来只是项目上的应用,其实并不需要深究的,查到方法并能用起来就好.随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想

Android编程实现WebView全屏播放的方法

这篇文章主要介绍了Android编程实现WebView全屏播放的方法,结合实例形式较为详细的分析了Android实现WebView全屏播放的布局与功能相关技巧,需要的朋友可以参考下! 本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:an

android 软键盘在全屏下的布局计算问题

在非全屏模式下,将activity的windowSoftInputMode的属性设置为:adjustResize.同时在View的onSizeChanged(int w, int h, int oldw, int oldh)里可以得到变化后的尺寸,然后根据前后变化的结果来计算屏幕需要移动的距离. 但是在全屏模式下,即使将activity的windowSoftInputMode的属性设置为:adjustResize.在键盘显示时它未将Activity的Screen向上推动,所以你Activity的

20个全屏响应式菜单效果荟萃

响应式菜单效果在近些年的网站设计中被广泛的使用,在这篇文章中我们收集了20款最酷的响应式菜单效果,希望大家喜欢! KLM's – Flat or Not → Huge → Threadslike → Square → Ready Set Rocket → Tictail → Zaarly Employee Handbook → Reach Partners → Brooklyn Bridge Park → Pavel Proshin → Plasticbionic → Southpaw → EK

Android开发 - 设置DialogFragment全屏显示

默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测试,下面的方法可以实现各个机型的全屏.测试 SDK Version = 28 覆写Fragment的onStart()方法: @Override public void onStart() { super.onStart(); Dialog dialog = getDialog(); if (dia

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

这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件.该翻页插件可以使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果非常不错. 在线演示:http://www.htmleaf.com/Demo/201503141519.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503141518.html

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

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由brzhang发表于云+社区专栏 做APP开发的过程中,有很多时候,我们需要实现类似于下面这种沉浸式的体验. 沉浸式体验 一开始接触的时候,似乎大家都会觉这种体验实现起来,会比较困难.难点在于: 头部的背景图在推上去的过程中,慢慢的变得不可见了,整个区域的颜色变成的暗黑色,然后标题出现了. StatusBar变的透明,且空间可以被利用起来,看我们的图片就顶到了顶 了. 我们的viewpager推到actionbar的下方的时候,就

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

引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更强烈的视觉冲击.一方面,这可以给用户留下更深刻的使用体验,从而产生一定品牌效应:另一方面,也给应用的启动初始化留下了充裕的时间,避免因为启动时间过长而给用户留下不良的印象.因此,全屏显示在手机应用中得到了广泛的应用.那么这篇博客中就记录下全屏显示的一