关闭

Android 系统状态栏沉浸式/透明化完整解决方案

1899人阅读 评论(0) 收藏 举报
分类:

前言

  1. 沉浸式全屏模式
    隐藏status bar(状态栏)使屏幕全屏,让Activity接收所有的(整个屏幕的)触摸事件。
  2. 透明化系统状态栏
    透明化系统状态栏,使得布局侵入系统栏的后面,必须启用fitsSystemWindows属性来调整布局才不至于被系统栏覆盖。

因此,我就这样理解了:

沉浸式不就是隐藏状态栏嘛,状态栏不见了?这不就是app全屏模式嘛?wtf?

而透明式式状态栏就是让app的内容布局可以扩展到系统状态栏?这里有个问题就是为什么能在系统状态栏还显示的情况下,将内容布局扩展到系统状态栏?恩,这应该很好理解,就是Z坐标系的作用了,系统状态栏是覆盖在内容布局上面的,并且是透明的。

貌似这里所谓透明化系统状态栏才是本菜想要的,不管了,现在开始一一试验,至于这概念理解的对不对,管他呢?那到底应该叫什么,那我就叫自适应状态栏,行不行?

前提条件

让系统状态栏颜色随app主题颜色变化而变化这一设计,毫无疑问,也是向ios学习的:从android4.4开始引进的,并且在5.0进行了改进。因此,也只能将这一特性应用在android4.4以上的手机,无法做到全部适配。记得stormzhang(貌似是)曾说过:

作为一个android程序员,还能有什么比做出ios风格的app更感到悲哀的呢?哎...

使用toolbar的解决方案

这个方法参照了这里,薄荷app的toolbar适配方案

其基本原理就是:
theme里添加style: <item name="android:windowTranslucentStatus"> true </item>后,包含toolbar的内容布局就可以扩展至系统状态栏,状态栏会覆盖在toolbar上,如果此时使用android:fitsSystemWindows="true",就可以调整内容布局(估计也是在根布局上加padding)恢复到原来位置.但是,上面的解决方案确是给toolbar加上一个padding-top="25dp",这样就可以做到系统状态栏的颜色和toolbar的颜色保持一致.具体方案可以参照上面的薄荷app的方案链接.


简述下步骤(只是简述,有疑问请参照上面薄荷app的链接即可):

  1. 引入v7包,并在布局里添加toolbar
    compile ‘com.android.support:appcompat-v7:22.2.1
  2. 在代码中设置透明化:
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
     WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
     local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
    }
    当然也可以在theme的样式文件里添加style:<item name="android:windowTranslucentStatus">true</item>,效果相同,但是大神们都说样式文件里设置在某些型号里不生效.ok,大家都在代码里设置就好了
  3. 给toolbar加上padding-top,toolbar代码如下
    <android.support.v7.widget.Toolbar android:id="@+id/toolbar" 
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:paddingTop="@dimen/toolbar_padding_top"
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
     android:background="#30469b">
         <TextView android:layout_gravity="center" 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="20sp"
           android:text="@string/app_name"/>
    </android.support.v7.widget.Toolbar>
    4.其中android:paddingTop="@dimen/toolbar_padding_top"要在values中的styles文件里设为0dp,在values-v19的styles里设为25dp,原因不多说了

这样就可以达成了我们的目标,如果只是这样也就罢了,按照上面做就可以了,关键是本菜是喜欢紧跟潮流的,使用MD风格的DrawerLayout+NavigationView时,在android4.4的手机下,就会变这样了:


android4.4上的效果


很明显,drawerlayout并没用被扩展至系统状态栏,但在android5.0以上效果还是可以的,这让我很奇怪,只能归咎于5.0的优化了


android5.0上的效果


经过各种折腾终于想起来,可以把fitsSystemWindows的特性用在drawerlayout上试试,最后发现居然可以,最终将设置windowTranslucentStatus的代码调整如下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();    
    local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
    if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){
        //将侧边栏顶部延伸至status bar
        mDrawerLayout.setFitsSystemWindows(true);        
        //将主页面顶部延伸至status bar;虽默认为false,但经测试,DrawerLayout需显示设置
        mDrawerLayout.setClipToPadding(false);
    }
}

最终android4.4上也可以显示正常:


android4.4上修正后的效果

关于本文中的样例代码已上传至github

这里有个问题,这里使用toolBar的Activity必须是要继承AppCompatActivity的,如果是继承非AppCompatActivity怎么办呢?

请看下一篇文章:如何给非AppCompatActivity添加Toolbar?

0
0
查看评论

Android 系统状态栏沉浸式/透明化完整解决方案

http://www.jianshu.com/p/34a8b40b9308
  • qq906786621
  • qq906786621
  • 2016-10-24 19:44
  • 132

Toolbar两步实现沉浸式系统状态栏

听好多大牛说沉浸式状态栏的叫法是错误的,可是我也不知道该怎么叫它,这篇博客里就叫它沉浸式状态栏吧~ 我们看很多应用都有沉浸式状态栏的效果,连谷歌自己的应用也有这个效果,可见这个效果对于一个Androider来说有多么重要~ 当然我们在使用Toolbar时要先去除Android自带的Titleba...
  • Key_MQL
  • Key_MQL
  • 2017-06-18 11:35
  • 431

Android 沉浸式状态栏效果(状态栏与内容完全融合、类似于iphone 7.0系统)

之前写过一篇文章关于顶部状态栏颜色的android 自定义顶部状态栏颜色 今天偶然间发现一种叫做沉浸式状态栏的、看了之后激动的非常、立马开操! Activity的setContentView之前添加 if(Build.VERSION.SDK_INT >= Build.VERSION_COD...
  • u010948188
  • u010948188
  • 2015-07-02 16:10
  • 3708

Android 系统状态栏沉浸式/透明化完整解决方案

转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来的相对靠谱的一套解决方案. 关于术语 网上有很多争论: 你这状态栏是变...
  • qq_15807167
  • qq_15807167
  • 2016-07-01 13:39
  • 7250

沉浸模式fitsSystemWindows

原文  http://blog.chengyunfeng.com/?p=905 主题 沉浸模式 根据最新的 Android 版本统计 ,4.4 以上的系统已经占有 70% 的份额了,现在新出厂的手机,只要不是500块钱以内的山寨手机也都是 ...
  • u014702999
  • u014702999
  • 2016-08-25 21:06
  • 2806

android沉浸式状态栏、fitsSystemWindows、标题栏折叠

现在大部分android手机都是android4.4以上,都支持开发者可以自定义状态栏色值,原来的黑底白字时代已过去。在android5.0上我们还可以自定义状态栏文字色值,让其显示深色字体。一、沉浸式状态栏的实现实现沉浸式状态栏效果,一般有两种方式:1、设置系统主题,在styles.xml中设置,...
  • smileiam
  • smileiam
  • 2017-03-12 22:04
  • 3506

Android-通过自定义ViewPager(中间放大效果)

/**稀土掘金,时光不老**/ 大家好,很早就想写博客了,一是工作忙,二是缺乏原创性,三当然是自己的能力不够啦,写这篇博客是很惶恐。。。。请多多包涵 /**************************** --------   ---------      ...
  • wujainEW
  • wujainEW
  • 2016-03-24 17:11
  • 6877

MUI——设置沉浸式状态栏

首先我们要明白,状态栏变色、状态栏沉浸式、全屏的区别 手机的顶部状态栏,也就是信号、电量那条,有4种状态,分别是正常、变色、透明(也称沉浸式状态栏)、消失(也就是全屏)。 后3种特殊用法,具体见下: 状态栏变色 常见使用场景:如果title背景为纯色且显眼,一般会把状态栏的背景色也变成title的...
  • sinat_33713995
  • sinat_33713995
  • 2017-07-08 09:25
  • 6616

沉浸式管理:让你的APP更优雅

前言        自从android4.4开始,android手机状态栏再也不是一成黑的时代,之前叫做变色龙,miui6发布会把他叫做沉浸式,之后大家就自然而然的接受了沉浸式这个名称,其实实际应该叫做Translucent Bar,即为透明状态栏。 ...
  • wuxin782515516
  • wuxin782515516
  • 2017-05-22 14:30
  • 368

一个Activity中多个Fragment实现沉浸式状态栏

一个Activity中多个Fragment实现沉浸式状态栏
  • lf0814
  • lf0814
  • 2017-08-15 11:24
  • 1799
    个人资料
    • 访问:283339次
    • 积分:4541
    • 等级:
    • 排名:第7769名
    • 原创:168篇
    • 转载:126篇
    • 译文:0篇
    • 评论:42条
    联系方式
    zhanglihow@gmail.com
    博客专栏
    最新评论