Android 新特性沉浸式与透明状态栏

来源:互联网 发布:python 图像特征提取 编辑:程序博客网 时间:2024/06/07 07:05

项目一个阶段完成,终于有时间可以把这段时间用到的东西整理整理了~_~,最近看到网上很多人都在整Android 4.4那个状态栏新特性,所以在自己项目中也加了这个,本来直接在国内看的资料,但国内说什么的都有,这让我有些迷糊,不知道这个新特性到底是怎么回事,后来只能去Google看了官方资料,终于知道这到底是怎么回事了。

一.有过的疑问

  1. 这个新特性到底是叫Translucent Bars(透明栏)还是叫Immersive Mode(沉浸式模式)呢?
  2. 到底这两个有什么区别呢?
  3. 怎么单独设置状态栏的颜色呢?

二.沉浸式设计是什么(沉浸设计的介绍)

沉浸就是让人专注在当前的目标情境下感到愉悦与满足,从而忘记时间的流逝。这个也就是心流理论,心流理论的核心就是人们废寝忘食地投入一件事情的状态。如果在这种状态就会出现对时间的错觉,也就是对时间的认知发生扭曲,在体验中将时间认知拉长或缩短。所以,我们可以将为了沉浸式(心流)而进行的设计称为沉浸式设计也叫心流设计。

三.官网与别人对沉浸式的解释

别人的解释:

  • 沉浸式就是透明栏也就是Translucent Bars,就是状态栏与顶部颜色融为一体。
  • android 4.4中的透明渐变状态栏和虚拟按钮的样式,也就是沉浸式。就像Action Bar和状态栏融为一体。
    如图:
    状态栏与Action Bar融为一体了
    ps:到了5.0后就可以为状态栏设置颜色,所以我认为所谓的沉浸式状态栏不等于状态栏变色,即便是变色后跟ActionBar颜色一致。
  • Translucent Bars只是透明 状态/导航 栏的意思,4.4里是半透明的,在5.0里是全透明的。而Immersive Mode是属于全屏状态,隐藏了状态栏和导航栏。

Translucent Bars
4.4效果
4.4上的效果
5.0效果
5.0上效果

谷歌官方的解释

原文:
Immersive full-screen mode
To provide your app with a layout that fills the entire screen,
the new SYSTEM_UI_FLAG_IMMERSIVE flag for setSystemUiVisibility() (when combined with SYSTEM_UI_FLAG_HIDE_NAVIGATION) enables a new immersive full-screen mode. While immersive full-screen mode is enabled, your activity continues to receive all touch events. The user can reveal the system bars with an inward swipe along the region where the system bars normally appear. This clears the SYSTEM_UI_FLAG_HIDE_NAVIGATION flag (and the SYSTEM_UI_FLAG_FULLSCREEN flag, if applied) so the system bars remain visible. However, if you’d like the system bars to hide again after a few moments, you can instead use the SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag.
Translucent system bars
You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable fitsSystemWindows for the portion of your layout that should not be covered by the system bars.
If you’re creating a custom theme, set one of these themes as the parent theme or include the windowTranslucentNavigation and windowTranslucentStatus style properties in your theme.

大概含义:
身临其境的全屏模式(就是沉浸模式)
为你的app提供了一个全屏的布局文件,用setSystemUiVisibility() 使用SYSTEM_UI_FLAG_IMMERSIVE标志(与SYSTEM_UI_FLAG_HIDE_NAVIGATION结合)支持新的沉浸模式。这个模式被激活后你的activity还是可以继续接收触摸事件。用户可以用最上端下拉来清除SYSTEM_UI_FLAG_HIDE_NAVIGATION标志,让状态栏可见。如果你想让状态栏过片刻后在自动隐藏,可以使用SYSTEM_UI_FLAG_IMMERSIVE_STICKY标志。
透明系统栏
你可以使用系统的新主题Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor来让系统栏透明。
如果使用了这个你的布局将填补系统栏后面的区域,所以你也必须在不久中使用fitsSystemWindows=”true”来让布局不包括系统栏的部分。
如果你要创建一个自定义主题,需要在你的主题样式中设置windowTranslucentNavigation和windowTranslucentStatus属性。


所以,Translucent Bars(透明栏)与Immersive Mode(沉浸式模式)是不同的,Translucent Bars还是会显示状态栏的,只不过是透明了;而Immersive Mode不会显示,而当需要查看通知的时候只需要从顶部向下滑动就能呼出通知栏。,然后又会自动隐藏。

四.使用的方法与图例

* Translucent Bars透明栏*

: 直接设置系统主题方式

因为这个特性是Android 4.4才出现的,只能在sdk 19以后才能用,所以这个需要在res目录下创建values-v19目录(如果没有),然后在这个目录下创建文件 styles.xml。
styles.xml文件内容

<resources>    <style name="AppBaseTheme"     parent="android:Theme.Holo.NoActionBar.TranslucentDecor">        <!-- API 19 theme customizations can go here. -->    </style></resources>

Theme的值还有:

android:Theme.Holo.Light.NoActionBar.TranslucentDecorandroid:Theme.DeviceDefault.Light.NoActionBar.TranslucentDecor

: 自定义主题方式

需要在values-v19目录的styles.xml文件中添加两个属性

<item name="android:windowTranslucentStatus">true</item><item name="android:windowTranslucentNavigation">true</item>
第二个是管底部导航栏的,所以如果手机没有底部导航栏可以不加这个。
然后你就可以在values目录的styles.xml定义自己的主题。
代码中实现方式
//隐藏ActionBarrequestWindowFeature(Window.FEATURE_NO_TITLE);    if (VERSION.SDK_INT >= VERSION_CODES.KITKAT) {    // 透明状态栏    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);    // 透明导航栏    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);}

注意:在代码中的这个一定要放到setContentView方法之前,否则会报异常:android.util.AndroidRuntimeException: requestFeature() must be called before adding content。

效果图

透明栏效果图
我们可以看到文字在是在状态栏底下,我们需要在布局文件中添加

android:fitsSystemWindows=”true”这个,意思是设置应用布局时是否考虑系统窗口布局;如果为true,将调整系统窗口布局以适应你自定义的布局。

调整后的效果图

调整后的效果

* 5 . 0的变色状态栏*

要想让状态栏变化为自己指定的颜色可以使用一个开源库SystemBarTint
使用前提:
如果要想改变状态栏的颜色,必须要记得先要设置状态栏透明。
使用方法:
可以直接把SystemBarTint这个项目中的SystemBarTintManager.java文件拷贝到你的工程中,然后在你要改变状态栏颜色的activity中使用如下代码:

SystemBarTintManager mTintManager = new SystemBarTintManager(this);mTintManager.setStatusBarTintEnabled(true);mTintManager.setNavigationBarTintEnabled(true);mTintManager.setTintColor(color);

效果图:
改变状态栏颜色

其实改变状态栏颜色的原理是利用了反射,获取到了系统修改状态栏与导航栏点方法,然后进行修改。

Immersive Mode沉浸式模式

直接设置系统主题方式

<resources>    <style name="AppBaseTheme" parent="android:Theme.NoTitleBar.Fullscreen"/>    </style></resources>

还可以设置让背景透明的主题

<resources>    <style name="AppBaseTheme" parent="android:Theme.Translucent.NoTitleBar.Fullscreen"/>    </style></resources>

: 代码中实现方式

        /* 代码中实现沉浸式 */        requestWindowFeature(Window.FEATURE_NO_TITLE);        // 去掉Activity上面的状态栏        if (VERSION.SDK_INT >= VERSION_CODES.KITKAT) {getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,        WindowManager.LayoutParams.FLAG_FULLSCREEN);        }

如果是带底部导航栏的可以使用如下代码:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            int UI_OPTIONS = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;            getWindow().getDecorView().setSystemUiVisibility(UI_OPTIONS);        }
效果图

背景透明与不透明的
沉浸式

扩展

使用系统的style自定义actionbar的背景颜色,actionbar上字体的大小与颜色。

    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">        <item name="android:actionBarStyle">@style/MyActionBar</item>    </style>    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">        <!-- 改变actionbar背景色 -->        <item name="android:background">@color/green</item>        <item name="android:titleTextStyle">@style/MyActionBara</item>    </style>    <style name="MyActionBara" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">        <!-- 改变actionbar字体大小和颜色 -->        <item name="android:textSize">10sp</item>        <item name="android:textColor">@color/green</item>    </style>

沉浸式——源码下载地址1
透明——源码下载地址2
改变状态栏与actionbar颜色——源码下载地址3

1 0
原创粉丝点击