博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android UI体验之全屏沉浸式透明状态栏效果
阅读量:4633 次
发布时间:2019-06-09

本文共 6386 字,大约阅读时间需要 21 分钟。

前言:

   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文件添加如下代码

第二种:在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.)解决状态栏占位问题

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

true

第二种: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中。

干我们这行,啥时候懈怠,就意味着长进的停止,长进的停止就意味着被淘汰,只能往前冲,直到凤凰涅槃的一天!

转载于:https://www.cnblogs.com/xieqing/p/6515888.html

你可能感兴趣的文章
.net core 中的[FromBody]
查看>>
java学习之成员内部类
查看>>
json_encode时中文编码转正常状态
查看>>
流量调整和限流技术 【转载】
查看>>
Android WebView使用与JavaScript使用
查看>>
Axure 全局辅助线(转)
查看>>
图论之tarjan缩点
查看>>
C# 的快捷键汇总(一)
查看>>
正由另一进程使用,因此该进程无法访问此文件。
查看>>
linux简单优化
查看>>
洛谷 P1411 树
查看>>
打字游戏--飞机大战
查看>>
文本输入框、密码输入框
查看>>
内联式css样式,直接写在现有的HTML标签中
查看>>
HackerRank - Bricks Game
查看>>
Expect 教程中文版
查看>>
libcurl 客户端实例
查看>>
由Node.js事件驱动模型引发的思考
查看>>
easyUI样式之easyui-switchbutton
查看>>
在raspberry的jessie版系统上安装opencv3.0
查看>>