Android Translucent System Bar/沉浸式体验 学习总结

个人对前辈们所讲的知识总结

Android 4.4中

默认样式

去掉ActionBar之后的样式

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>
去掉ActionBar之后的样式

状态栏透明

在values-v19的主题属性中添加一条即可,如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:windowTranslucentStatus">true</item>
</style>

状态栏透明

导航栏透明

在values-v19的主题属性中添加一条即可,如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowTranslucentNavigation">true</item>
</style>

导航栏透明

调节布局位置

我们发现,状态栏透明和导航栏透明都会出现布局内容向上偏移的情况,而导航栏还会出现 内容进入导航区域的 情况,如图。

布局内容向上偏移
内容进入导航区域

那怎么解决这一的情况呢?
其实我们要设置一个属性,那就是“fitsSystemWindows”,fitsSystemWindows 是在 android 4.4 中引入的。
想了解详细的fitsSystemWindows相关知识请去Google查阅下资料。

在主题属性中添加‘android:fitsSystemWindows’,如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

    <item name="android:fitsSystemWindows">true</item>
</style>
效果图

图中的矩形区域就是TextView的区域,并没有占用导航栏和状态栏

其他方式实现

总结下上面的内容:

  1. 状态栏透明 在主题属性中添加‘windowTranslucentStatus’
  2. 导航栏透明 在主题属性中添加‘windowTranslucentNavigation’
  3. 调节布局位置 在主题属性中添加‘fitsSystemWindows’

这种方式是在xml中设置属性,那么是否可以在代码中设置属性呢?同样可以的!

public class MainActivity extends AppCompatActivity { 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //判断SDK最小为19
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // windowTranslucentStatus
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // windowTranslucentNavigation
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
    }
}

这样的方式也是可以实现状态栏和导航栏透明的。但还是会出现布局偏移的情况,要怎么做呢?
我们可以同样像上面说的,在主题属性中进行添加‘fitsSystemWindows’;我们还可以在相应的布局文件中添加‘fitsSystemWindows’
如:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >
    <!--其他控件-->
 </RelativeLayout>

这样设置也可以实现上面的效果。
需要注意的是,上面的代码是在布局文件的根布局中添加的‘fitsSystemWindows’属性,所以所以的子布局也会进行相应的偏移(其实偏移这个词不够准确),也就是说 哪个控件添加了‘fitsSystemWindows’属性,哪个控件就会进行相应的偏移,于是就会有这样的效果

借用 D_clock爱吃葱花 的图

这个图是5.0手机运行的,所以状态栏没有渐变


Android 5.0

由于要显示整张图片,导致占的位置过大,于是我将模拟器缩小了,导致图片不清晰,见谅哈。不影响我们看见效果

Android5.0状态栏默认颜色是获取我们‘colorPrimaryDark’中的颜色,如果在主题中没有添加‘colorPrimaryDark’属性则会使用灰色做默认颜色。

灰色为默认颜色

在5.0中设置透明的方式和上面一样,我们按照上面方式设置,默认情况下状态栏和导航栏是灰色半透明

灰色半透明

状态栏全透明

方法如下

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:fitsSystemWindows">true</item>
        <!--windowTranslucentStatus 默认就是false,写出来是怕你不知道   贴心吧↖(^ω^)↗-->
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!--@android:color/transparent 是调用系统颜色:透明。-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
全透明

手贱的发现

既然顶部的状态栏都可以全透明,那底部的导航栏可不可以全透明呢?于是手贱的开始了测试。

我们想,既然有‘statusBarColor’这个属性了,那么肯定是有‘navigationBarColor’这个属性的了。

statusBar全透明是这样设置的:

  windowTranslucentNavigation="true"
  statusBarColor="透明色"

那么navigationBar全透明可不可以这样设置:

  windowTranslucentStatus="true"
  navigationBarColor="透明色"

结果令我很失望,并没有达到我想要的效果,全部变成了灰色~如图:


变灰色

那么是什么原因呢,我没深入研究。

Android采用的是ARGB色彩模式,A代表Alpha,也就是透明度。而navigationBarColor和statusBarColor属性设置值都是‘@android:color/transparent’,也就是 Color下的transparent~
等等!transparent是Color下的一个值!这也就是说我们可以设置自己的颜色喽那么就试一下吧

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#F0F</item>
<item name="android:navigationBarColor">#F0F</item>

看下效果图,为什么没有是#F0F(紫色)而是半透明了呢?

MDZZ

仔细一看~‘windowTranslucentStatus’和‘windowTranslucentNavigation’都设置为true了,所以就还是原来的半透明了。

于是我们可以得到一个小结论:‘windowTranslucentStatus’和‘windowTranslucentNavigation’设置为true后就再设置‘statusBarColor’和‘navigationBarColor’就没有效果了。

修改下看看

<item name="android:statusBarColor">#F0F</item>
<item name="android:navigationBarColor">#F0F</item>
效果图

没错,我们修改成功了但是细心的朋友们发没发现一个问题?没发现的和上一个图对比一下

是的,我们并没有设置‘fitsSystemWindows’!而紫色的那家伙自己下来了~仔细看开头的那几个‘11111’

这个时候你如果测试一下透明度你就会发现,状态栏和导航栏的底色其实是灰色

修改下看看

<item name="android:statusBarColor">#1F0F</item>
<item name="android:navigationBarColor">#1F0F</item>
#1F0F是很浅的紫色

我们看见,几乎就是灰色了。

具体什么原因,我也没有深入研究。

但是呢,其实工作中很少会将导航栏调色的,一般都是半透明的。于是乎就会有下面的配置

<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#8F0F</item>
#1F0F颜色太浅,马上全透明了,于是我调到了#8F0F

上面说的都是在xml中设置,那么在代码中怎么设置呢?

  getWindow().setNavigationBarColor(int i);
  getWindow().setStatusBarColor(int i);

当然了,在项目中使用还是要判断下版本哒

结束

上面两个问题我说我没用深入研究,等有机会、有时间在弄吧,暂时就总结这么多吧,这玩意我也是刚用到,还有很多东西等我们探索呢。

GitHub有个项目不错,有时间可以看看源码
地址:https://github.com/laobie/StatusBarUtil

我也是参考文章学习的,推荐几个不错的文章吧:
http://www.jianshu.com/p/0acc12c29c1b
http://blog.csdn.net/lmj623565791/article/details/48649563
http://jaeger.itscoder.com/android/2016/02/15/status-bar-demo.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容