Android 「透明栏」 Or 「沉浸式顶栏」

   <p>随着越来越多的人注重Material Design，对于界面的设计也有了更高的要求，于是就出现了如下图那样的各种美丽界面</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d3b9065f572d915d68de305a6e2e3dba.png"></p>    <p style="text-align:center">效果展示.png</p>    <p>对于上面的效果，在网上有着不同的称呼方式，有的称之为“沉浸式”，有的称之为"透明状态栏"，至于到底叫什么我们就不追究了，有兴趣的可以看看这两篇文章。</p>    <p><a href="http://www.open-open.com/lib/view/open1472112617427.html">Android状态栏微技巧，带你真正理解沉浸式模式</a></p>    <p><a href="/misc/goto?guid=4959664660055384807" rel="nofollow,noindex">为什么在国内会有很多用户把「透明栏」（Translucent Bars）称作 「沉浸式顶栏」？</a></p>    <p>在此我们以最简单的方式来称呼它们，第一种效果称为全屏模式，因为界面的图片进入到了状态栏里面；第二种效果称为着色模式，因为状态栏的颜色被我们改变了。</p>    <h2><strong>着色模式的实现</strong></h2>    <p>因为这个设计是最常见的，所以就先谈它的实现方式。我们通过收集阅读一些前辈的资料，可以轻松的在4.4以上的系统实现这种效果。在此我就不在赘述了，具体的可以参考以下几篇文章：</p>    <p><a href="/misc/goto?guid=4959714722687101508" rel="nofollow,noindex">Android 沉浸式状态栏攻略 让你的状态栏变色吧</a></p>    <p><a href="http://www.open-open.com/lib/view/open1455584716230.html">Android App 沉浸式状态栏解决方案</a></p>    <p><a href="/misc/goto?guid=4959714722801737437" rel="nofollow,noindex">Android-transulcent-status-bar</a></p>    <p><a href="http://www.open-open.com/lib/view/open1454638901401.html">Android开发：Translucent System Bar 的最佳实践</a></p>    <p>通过上面几篇文章基本上可以实现着色模式。在此我就简单的总结一下：</p>    <h3><strong>方法一：</strong></h3>    <p>1.先在values文件夹下的styles.xml 文件中设置如下主题</p>    <pre>  <code class="language-java"><style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">      <item name="colorPrimary">@color/colorPrimary</item>      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>      <item name="colorAccent">@color/colorAccent</item>  </style>    <style name="AppTheme" parent="@style/BaseAppTheme" /></code></pre>    <p>2.在values-v19文件夹下的styles.xml 文件中设置如下主题</p>    <pre>  <code class="language-java"><style name="AppTheme" parent="@style/BaseAppTheme" >      <!--状态栏透明-->      <item name="android:windowTranslucentStatus">true</item>  </style></code></pre>    <p>3.将相应的Activity主题设置成为AppTheme</p>    <pre>  <code class="language-java"><activity android:name=".color.ColorActivity1"      android:theme="@style/AppTheme">  </activity></code></pre>    <p>4.在Activity中对toolbar进行相关设置</p>    <pre>  <code class="language-java">Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);  // 必须的设置，不然会混淆状态栏  setSupportActionBar(toolbar);</code></pre>    <p>最终的效果图如下（左边是4.4，右边是6.0）：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/93ebb6b814170172199b4ff5d86fa015.png"></p>    <p style="text-align:center">左边是4.4，右边是6.0.png</p>    <p>可以看出在4.4上的效果和在6.0上是不一样的。在5.0以上的可以通过直接修改主题中的colorPrimaryDark，就可以直接修改到状态栏的颜色。而想要在4.4上修改状态栏的颜色就需要做更多的工作了。具体怎么做请继续往下看。</p>    <h3><strong>方法二( <a href="/misc/goto?guid=4959714722896670052" rel="nofollow,noindex">借助工具类</a> )：</strong></h3>    <p>因为该工具类比较完整，所以只用设置下面一句话就ok了</p>    <pre>  <code class="language-java">StatusBarUtil.setColor(ColorActivity2.this, getResources().getColor(R.color.colorPrimaryDark));</code></pre>    <p>最终的效果图如下（左边是4.4，右边是6.0）：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/aff4e822b3ffede4ac2bd932fbd18cd5.png"></p>    <p style="text-align:center">左边是4.4，右边是6.0.png</p>    <p>在此可以看出4.4和6.0上的效果是一样的了，而且可以直接用代码设置状态栏的颜色。</p>    <h2><strong>图片模式的实现</strong></h2>    <p>图片模式的实现其实也不难，如果只是用于效果展示，按照着色模式的方法一就可以实现，当然借助开源的工具类也是很容易实现的。但是，想要做一些动画效果，似乎就比较困难了</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/00b4eb1c74c3d73a5ee1715e938b69c1.gif"></p>    <p style="text-align:center">动画.gif</p>    <p>在5.0以上可以借助开源项目的工具类实现，但是在4.4上似乎还没有找到好用的库。所以我自己琢磨了一下：</p>    <p>1.在values-v19文件夹下的styles.xml 文件中设置如下主题</p>    <pre>  <code class="language-java"><style name="AppTheme.NoActionBar" parent="@style/BaseAppTheme">      <item name="android:windowTranslucentStatus">true</item>      <item name="android:windowIsTranslucent">true</item>  </style></code></pre>    <p>2.将相应的Activity主题设置成为AppTheme.NoActionBar</p>    <pre>  <code class="language-java"><activity android:name="com.whyalwaysmea.systembar.picture.PictureActivity2"          android:theme="@style/AppTheme.NoActionBar">  </activity></code></pre>    <p>3.在Activity中添加如下代码：</p>    <pre>  <code class="language-java">@Override      protected void onCreate(Bundle savedInstanceState) {          if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {              // 设置全屏，并且不会Activity的布局让出状态栏的空间              getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);              getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);          }          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_picture2);          // 使用工具类让在5.0以上的系统生效          StatusBarUtil.setTransparent(this);          // 这两句是在4.4系统上生效的关键          CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);          materialCollapsingForKitkat(toolbarLayout);      }      private void materialCollapsingForKitkat(final CollapsingToolbarLayout toolbarLayout) {          if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {                // 设置Toolbar对顶部的距离              final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);              final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) toolbar                      .getLayoutParams();              layoutParams.topMargin = MeasureUtil.getStatusBarHeight(this);          }      }</code></pre>    <p>通过这样的设置，在4.4以及4.4以上的系统上基本上就能够达到大多数效果了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/64fbaf618cb845b022769764f089d63d.gif"></p>    <p style="text-align:center">4.4效果图.gif</p>    <h2>总结</h2>    <p>不管是透明栏还是沉浸式，能够实现效果就是好的。但是由于本人能力有限，所以可能存在部分机型上会有不适配的效果，如果发生不适配的可以大家一起交流。如果有问题也可以大家一起交流。</p>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/e1c937000343</p>    <p> </p>