Android UI体验之全屏沉浸式透明状态栏样式

前言:

Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏、 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念,让开发者可以自己设定系统区域的颜色,使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果。先看下预期效果:

首先现分清楚哪部分是状态栏,哪部分是导航栏

状态栏StatusBar如下

导航栏NavigationBar如下

如何实现?

 1.)首先实现全屏

第一种:继承主题特定主题

在Android API 19以上可以使用****.TranslucentDecor***有关的主题,自带相应半透明效果,Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor两种主题为新增加的,所以要新建values-v19文件夹并创建styles文件添加如下代码

 <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor">
  <!-- Customize your theme here. -->
 </style>

第二种:在activity中采用代码的方式

Android 4.4以上可以添加如下代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

Android 5.0 以上也可以使用下面的代码实现全屏

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);
}

全屏效果

不难发现此时状态栏占有的位置消失,和app的布局叠在一起了,接下来解决这个问题

2.)解决状态栏占位问题

第一种:主题添加如下设置

<item name="android:fitsSystemWindows">true</item>

第二种:activity layout根目录添加下面代码

android:fitsSystemWindows="true"

第三种:通过Java代码设置

rootview.setFitsSystemWindows(true);

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统,这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效,

如果上述设置了状态栏和导航栏为透明的话,相当于对该View自动添加一个值等于状态栏高度的paddingTop,和等于导航栏高度的paddingBottom,效果如下

 3.)状态栏导航栏设置背景色

4.4以上的可以采用修改contentView的背景色,或者动态添加一个view到contentView上

 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);
  }

动态获取StatusBarHeight函数如下

 /**
  * 获取状态栏高度
  *
  * @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);
 }

动态获取NavigationBarHeight函数如下

 /**
  * 获取导航栏高度
  *
  * @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);
 }

然后Android5.0以上谷歌提供了新的api可以更新状态栏和导航栏的背景色

 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);
  }

这样总体效果就实现了

4.)贴出整体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);
  }
 }

总结:

我这里为了更加明显的显示效果所以状态栏背景色和标题栏颜色不一致,在实际的开发中一般情况下我们都会设置成统一的颜色,在视觉上感觉整个页面更加统一,让用户真正沉浸在app中。

以上所述是小编给大家介绍的Android UI体验之全屏沉浸式透明状态栏效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android实现隐藏状态栏和标题栏

    隐藏标题栏需要使用预定义样式:android:theme="@android:style/Theme.NoTitleBar". 隐藏状态栏:android:theme="@android:style/Theme.NoTitleBar.Fullscreen". <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://

  • Android 4.4.2 横屏应用隐藏状态栏和底部虚拟键的方法

    //去title requestWindowFeature(Window.FEATURE_NO_TITLE); //隐藏状态栏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); //隐藏拟按键 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_

  • Android编程实现WebView全屏播放的方法(附源码)

    本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

  • android 动态控制状态栏显示和隐藏的方法实例

    方法一:(经试验无效,但网上广为流传,也许是我使用方法不当,有待进一步验证--) android想要应用运行时全屏有一种方法是在activity的onCreat方法中加入如下代码:getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,                 WindowManager.LayoutParams.FLAG_FULLSCREEN);并且需要在setContentView()之前,否则无效过.从这么多的

  • Android中隐藏状态栏和标题栏的方法汇总(隐藏状态栏、标题栏的五种方法)

      方法一: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 隐藏标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 隐藏状态栏 getWindow().setFlags(WindowManager

  • Android动态控制状态栏显示和隐藏

    记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解. 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发起的.因为Android官方从来没有给出过沉浸式状态栏这样的命名,只有沉浸式模式(Immersive Mode)这种说法.而有些人在没有完全了解清楚沉浸模式到底是什么东西的情况下,就张冠李戴地认为一些系统提供的状态栏操作就是沉浸式的,并且还起了一个沉浸式状态栏的名字. 比如之前就有一个QQ群友问过我

  • Android编程实现播放视频时切换全屏并隐藏状态栏的方法

    本文实例讲述了Android编程实现播放视频时切换全屏并隐藏状态栏的方法.分享给大家供大家参考,具体如下: 1. Demo示例: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (this.getResources().getConfiguration().ori

  • Android中隐藏标题栏和状态栏的方法

    一.隐藏标题栏 复制代码 代码如下: //隐藏标题栏        this.requestWindowFeature(Window.FEATURE_NO_TITLE); 二.隐藏状态栏 复制代码 代码如下: //隐藏状态栏        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); 三.去掉所有Activity界

  • Android编程使WebView支持HTML5 Video全屏播放的解决方法

    本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr

  • Android如何让WebView中的HTML5页面实现视频全屏播放

    前言 本文主要是将最近工作中遇到的一个问题进行总结分享,主要介绍的是如何让WebView中H5页面全屏播放视频.关于这个问题,做一下简单分析,希望对大家有所帮助,下面话不多说了,来看看详细的介绍吧. 效果图 运行效果 其实很简单,就是配置问题.关键地方配好了,基本没什么问题了. 硬件加速 设置WebView 在清单需要配置的AndroidManifest.xml <application android:allowBackup="true" android:icon="

随机推荐