Android UI体验之全屏沉浸式透明状态栏效果
richard47
8年前
<p><strong>前言：</strong></p> <p>Android 4.4之后谷歌提供了沉浸式全屏体验， 在沉浸式全屏模式下， 状态栏、 虚拟按键动态隐藏， 应用可以使用完整的屏幕空间， 按照 Google 的说法， 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念，让开发者可以自己设定系统区域的颜色，使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果。先看下预期效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/131e8aa6567ec87631c4c27b5ed8afa4.png"></p> <p>首先现分清楚哪部分是状态栏，哪部分是导航栏</p> <p>状态栏StatusBar如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8dae55498c9c1929290a8e6e7fd6be16.png"></p> <p>导航栏NavigationBar如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ac1723fb92322b5c3aba16bb2519958f.png"></p> <h3>如何实现？</h3> <p>1.）首先实现全屏</p> <p>第一种：继承主题特定主题</p> <p>在Android API 19以上可以使用****.TranslucentDecor***有关的主题，自带相应半透明效果，Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor两种主题为新增加的，所以要新建values-v19文件夹并创建styles文件添加如下代码</p> <pre> <code class="language-java"> <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor"> <!-- Customize your theme here. --> </style> </code></pre> <p>第二种：在activity中采用代码的方式</p> <p>Android 4.4以上可以添加如下代码</p> <pre> <code class="language-java">if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { //透明状态栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //透明导航栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); } </code></pre> <p>Android 5.0 以上也可以使用下面的代码实现全屏</p> <pre> <code class="language-java">if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); } </code></pre> <p>全屏效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5491db4a49b0cd7f6d9b9d3b4552ceaf.png"></p> <p>不难发现此时状态栏占有的位置消失，和app的布局叠在一起了，接下来解决这个问题</p> <p>2.）解决状态栏占位问题</p> <p>第一种：主题添加如下设置</p> <pre> <code class="language-java"><item name="android:fitsSystemWindows">true</item> </code></pre> <p>第二种：activity layout根目录添加下面代码</p> <pre> <code class="language-java">android:fitsSystemWindows="true" </code></pre> <p>第三种：通过Java代码设置</p> <pre> <code class="language-java">rootview.setFitsSystemWindows(true); </code></pre> <p>fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统，这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效，</p> <p>如果上述设置了状态栏和导航栏为透明的话，相当于对该View自动添加一个值等于状态栏高度的paddingTop，和等于导航栏高度的paddingBottom，效果如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d2c3f57e955aa386480522aa98b9b6dc.png"></p> <p>3.）状态栏导航栏设置背景色</p> <p>4.4以上的可以采用修改contentView的背景色，或者动态添加一个view到contentView上</p> <pre> <code class="language-java"> if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { //透明状态栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //透明导航栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); //设置contentview为fitsSystemWindows ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content); View childAt = contentView.getChildAt(0); if (childAt != null) { childAt.setFitsSystemWindows(true); } //给statusbar着色 View view = new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this))); view.setBackgroundColor(color); contentView.addView(view); } </code></pre> <p>动态获取StatusBarHeight函数如下</p> <pre> <code class="language-java"> /** * 获取状态栏高度 * * @param context context * @return 状态栏高度 */ private static int getStatusBarHeight(Context context) { // 获得状态栏高度 int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android"); return context.getResources().getDimensionPixelSize(resourceId); } </code></pre> <p>动态获取NavigationBarHeight函数如下</p> <pre> <code class="language-java"> /** * 获取导航栏高度 * * @param context context * @return 导航栏高度 */ public static int getNavigationBarHeight(Context context) { int resourceId = context.getResources().getIdentifier("navigation_bar_height", "dimen", "android"); return context.getResources().getDimensionPixelSize(resourceId); } </code></pre> <p>然后Android5.0以上谷歌提供了新的api可以更新状态栏和导航栏的背景色</p> <pre> <code class="language-java"> if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); //设置状态栏颜色 window.setStatusBarColor(color); //设置导航栏颜色 window.setNavigationBarColor(color); ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content)); View childAt = contentView.getChildAt(0); if (childAt != null) { childAt.setFitsSystemWindows(true); } // contentView.setPadding(0, getStatusBarHeight(this), 0, 0); } </code></pre> <p>这样总体效果就实现了</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/67c69d7fc199f477ab493db7cc8b7d94.png"></p> <p>4.）贴出整体java代码实现方式</p> <pre> <code class="language-java"> private void initWindows() { Window window = getWindow(); int color = getResources().getColor(android.R.color.holo_blue_light); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); //设置状态栏颜色 window.setStatusBarColor(color); //设置导航栏颜色 window.setNavigationBarColor(color); ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content)); View childAt = contentView.getChildAt(0); if (childAt != null) { childAt.setFitsSystemWindows(true); } } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { //透明状态栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //透明导航栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); //设置contentview为fitsSystemWindows ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content); View childAt = contentView.getChildAt(0); if (childAt != null) { childAt.setFitsSystemWindows(true); } //给statusbar着色 View view = new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this))); view.setBackgroundColor(color); contentView.addView(view); } } </code></pre> <h3>总结：</h3> <p>我这里为了更加明显的显示效果所以状态栏背景色和标题栏颜色不一致，在实际的开发中一般情况下我们都会设置成统一的颜色，在视觉上感觉整个页面更加统一，让用户真正沉浸在app中。</p> <p> </p> <p>来自：http://www.cnblogs.com/whoislcj/p/6250284.html</p> <p> </p>