AndroidUI------沉浸状态栏(兼容4.4-5.0+)

众所周知Android支持沉浸式是在4.4开始,4.4和之后的版本又有些许区别,所以我们需要考虑Android版本的兼容性。

接下来我们来尝试看看不同的效果

1.Android4.4沉浸式:

先看看原图,添加样式 ,可见顶部有一明显的黑色状态栏

1.1 方式一 样式修改

1.在主题样式文件中设置添加

<item name="android:windowTranslucentStatus">true</item>
//如果需要去掉底部的虚拟导航栏可以添加一下属性,设置虚拟导航栏为透明颜色  
//<item name="android:windowTranslucentNavigation">true</item>

最终效果图如下,但是顶部有一个黑色的阴影

1.2 方式二,代码修改

添加如下代码,设置透明的状态栏颜色

  getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
 //如果需要隐藏虚拟导航栏 可添加一下代码
//getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

最终效果图如上图,就不再贴了,和样式修改的结果是一致的。 大家可以尝试下。

2.Android5.0+的沉浸式 :

在Android5.0及以上的沉浸式设计中,虽然可以在样式文件中设置状态栏的颜色,但是达不到最终的实际效果,还需要的window窗口进行设置。首先看看通过样式文件设置出来的效果是怎么样的。

图一是对状态栏设置了颜色,图二是设置了透明颜色 对比看下,可以看出如果只在样式文件中设置透明的颜色来做沉浸式是还不够的

图一

图二

接下来我们就通过代码来修改,达到沉浸式要求。

` private void immersive() {
    //小于4.4不支持沉浸式
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
        return;
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        Window window = getWindow();
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //绘制statusbar 背景
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        //设置状态栏颜色
        window.setStatusBarColor(Color.TRANSPARENT);
        //对Window窗口属性设置
        int windowSystemUiVisibility = window.getDecorView().getWindowSystemUiVisibility();
        //布局内容全屏展示
        windowSystemUiVisibility |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
        //防止内容区域发生变化
        windowSystemUiVisibility |= View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
        window.getDecorView().setSystemUiVisibility(windowSystemUiVisibility);
    } else {
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
}`

看最后效果图,因为上面的白熊是白色的背景,和顶部时间颜色也是白色导致有重叠看不到效果,所以这里换了一张图展示。

最后来一张对比图(左图是7.0 右图是4.4)

3 以为这就完了吗?

这里展示的只是一张图片做全图展示,沉浸显示该图片,然而实际中我们往往顶部还有一块自己的Title,想让自己的title和状态栏融入一体,怎么做呢?这就是接下来要做的事情。

首先看看原始的效果

从上图可以看到,貌似好像标题栏是沉浸到状态栏里面的呀,有什么问题吗?可是需要仔细看,发现Title文字已经在状态栏的区域了,这个时候就出现了内容区域被上移到了状态栏的区域,这个时候我们就需要手动去修正这个错误。如何修复呢?看看下面的思路

1.首先获取到状态栏的高度
2.重新设置TitleView的高度,原始高度+状态栏高度,
3.设置内容区域的padding,padding距离就是状态的高度

根据上面的思路,下面我们来看如何实现的。

`private int getStatusBarHeight(Context context) {
    int resId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resId > 0) {
        return context.getResources().getDimensionPixelSize(resId);
    }
    return 0;
}

private void setTitleViewHeightPadding(Context context, View view) {
    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
    //将高度设置为原始的高度+状态栏的高度
    layoutParams.height = layoutParams.height + getStatusBarHeight(context);
    view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + getStatusBarHeight(context), view.getPaddingRight(), view.getPaddingBottom());
}`

最终效果图如果展示:

这个时候就可以看到Title文字显示到了正常的位置了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值