Android沉浸式状态栏攻略

前言

这里不讨论[沉浸式]这个词用得好不好, 大家听得懂就行. 这篇文章主要是我在实际项目中的一些经验, 整理出来和大家分享, 欢迎探讨. 由于实习一直是996, 没时间做总结, 今天突然觉得这样的工作让我都忘了生活了, 是时候做个了断了. 写这篇文章的时候已经是23:44, 来不及贴一些demo, 但是这里的代码都是曾经的项目中摘出来的, 是可以运行的, 但我现在没有真的执行一遍. 注意所有的代码都只在android 4.4及以上有效.

考虑

根据实际项目的不同, 可能选择的沉浸式实现策略也会有所不同.

传统纯色actionbar

如果你的app使用的是遵循android规范的actionbar或者有一个纯色layout放在屏幕顶部, 那么这里有一个入侵较小的方案, 这个方案的实现方式是参考的开源项目SystemBarTint. 
让你的activity继承一个BaseActivity, 在BaseActivity里面重写onPostCreate

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPostCreate</span>(Bundle savedInstanceState) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onPostCreate(savedInstanceState); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { ImmerseHelper.setSystemBarTransparent(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>); } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

重点在ImmerseHelper这个类里, 先贴代码再讲解.

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ImmerseHelper</span> {</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@TargetApi</span>(Build.VERSION_CODES.KITKAT) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setSystemBarTransparent</span>(Activity paramActivity) { Window window = paramActivity.getWindow(); WindowManager.LayoutParams layoutParams = window.getAttributes(); layoutParams.flags |= WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; window.setAttributes(layoutParams); hackStatusBarTransparent(paramActivity); setContentPadding(paramActivity); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">hackStatusBarTransparent</span>(Activity paramActivity) { ViewGroup localViewGroup = (ViewGroup) paramActivity.getWindow().getDecorView() .findViewById(android.R.id.content); View colorview = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> View(paramActivity); colorview.setBackgroundResource(R.color.statusbar_color); localViewGroup.addView(colorview, ViewGroup.LayoutParams.MATCH_PARENT, ImmerseHelper.getStatusBarHeight(paramActivity)); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setContentPadding</span>(Activity activity) { ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) .setPadding(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, ImmerseHelper.getStatusBarHeight(activity) + ImmerseHelper.getActionBarHeight(activity), <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>); } <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** * 获取状态栏高度, 单位px *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> context *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span> */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getStatusBarHeight</span>(Context context) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> result = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> resourceId = context.getResources().getIdentifier(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"status_bar_height"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"dimen"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (resourceId > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) { result = context.getResources().getDimensionPixelSize(resourceId); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> result; } <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** * 获取actionbar高度, 单位px *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> context *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span> */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getActionBarHeight</span>(Context context) { TypedValue localTypedValue = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> TypedValue(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (context.getTheme().resolveAttribute(android.R.attr.actionBarSize, localTypedValue, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>)) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> TypedValue.complexToDimensionPixelSize(localTypedValue.data, context.getResources().getDisplayMetrics()); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li></ul>

简单来说就是在postCreate时对activity做手脚, 这样组内其他开发者几乎感受不到变化, 只需要将activity的基类指定成BaseActivity就好 
ImmerseHelper这个类主要做了三件事 
- 将window的FLAG_TRANSLUCENT_STATUS标志打开 
- 给某个View中添加了一个与状态栏大小完全相同的纯色块 
- 给activity的根View设置paddingTop 
FLAG_TRANSLUCENT_STATUS这个标志打开之后, 状态栏就透明了, 同时我们的activity的主体布局, 也就是setContentView传入的那个布局, 会顶到屏幕最上方, 被状态栏盖住一部分, 注意actionbar是不会受影响的. 所以我们在第三步给activity的根view设了paddingTop, 高度是状态栏的高度加上actionbar的高度, 这样activity中的内容才会回到之前的正常位置. 但此时状态栏下方透明了, 所以我们给某个View中添加了一个与状态栏大小完全相同的色块, 颜色和actionbar一致, 这样就有了沉浸式效果. 
当然这里的效果是状态栏下面有一层半透明黑底, 之后才是我们添加的view, 所以不用担心看不到状态文字, 在4.4上只能做到这个效果, 5.0上可以让状态栏底部完全透明, 这个等会儿说. 
不过光有实现不行, 还需要知道为什么我们要这么做

原理

先看一下hierarchy view的截图

我们getDecorView拿到的是最左边的DecorView, 而setContentView影响的是id/content那个view的直接子view, 和id/content平级的view是actionbar. 
activity.getWindow().getDecorView().findViewById(android.R.id.content);这句拿到的是id/content这个view, 我们向其中添加一个纯色view, 由于打开了FLAG_TRANSLUCENT_STATUS, 这个纯色view就直接顶在最上面, 也就是状态栏覆盖的地方. 
SystemBarTint中并非是向id/content中addView, 而是直接向getDecorView()中addView, 而SwipeBackLayout则是在DecorView和他的子View之间插入自己的layout, 相当于劫持了DecorView的子View, 所以如果同时使用这两个开源项目不加修改, 要么滑动返回划走的是状态栏, 要么状态栏撕裂. 如果像我这么写, 就不会和SwipeBackLayout冲突.

非传统

如果你要做到向上图这样, 图片完全顶在顶部, 那么就不建议使用actionbar了, 同时也不需要setContentPadding这步. 有时这样会导致某些页面的内容过分偏上, 这个时候建议用一个dimen, 在正常情况下是0dp, v19及以上时是24dp, 这也是状态栏高度, 哪些页面要隔开状态栏, 就用这个dimen做marginTop, 或者include一个高度为这个dimen的layout. 
这样子的入侵比较强, 做新的页面需要时刻注意和状态栏是否需要保持距离, 很容易忘记, 不过也不算什么困难, 毕竟一运行就看出来了.

Lolipop+特有方法

上面说的都是api level 19的方法, 唯一的缺陷是状态栏并非完全透明, 而是底部有个半透明的黑条, 在api level 21上, 我们可以去掉这个半透明黑条, 让状态栏完全透明. 
在onCreate的setContentView调用之后, 将activity做参数传给下面这个方法, 就可以让你的app在api level 21上拥有完全透明的状态栏, 同时在api 19上使用上面的实现

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@TargetApi</span>(Build.VERSION_CODES.LOLLIPOP) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setSystemBarTransparent</span>(Activity paramActivity) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (shouldUseTransparentSystemBar()) { Window window = paramActivity.getWindow(); WindowManager.LayoutParams layoutParams = window.getAttributes(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//api 21 解决方案</span> View systemdecor = window.getDecorView(); systemdecor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); layoutParams.flags |= WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS; window.setStatusBarColor(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0x00000000</span>); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//api 19 解决方案</span> layoutParams.flags |= WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; } window.setAttributes(layoutParams); } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

api 21的解决方案理论上是可以用xml完成的, 但是我实际测试发现并不能, 只有用代码才有效. 
如果你想问api 20去哪了, 可以去看看sdk manager里面api 20的括号里写的什么.