【有美女看】提升用户体验，你不得不知道的事儿——巧用全屏与沉浸式体验，让用户更舒心~

发布时间：2016-12-09 11:47:37.413作者：文章转自网络，版权归原作者所有，反馈可立刻删除

最近公司项目中要求写一个视频直播录像及视频观看的功能，额，就本能地去看了一波当下主流的一些视频类APP，发现在爱奇艺等播放器中，在播放视频的时候都是fullScreen的，而这个在各大手游中也体现的比较多。

额，这个其实不算技术层次，但是为了我们的用户体验，我们不能不把每一个细节都做好，同时，这也是追妹秘诀哦~

于是楼主就采用了爱奇艺这样的设计风格，打算隐去系统标题栏和ActionBar。这里就跟大家分享一下这个如何实现，大家可以根据情况采纳。

1）首先我们来看看简单的一张图片是怎样显示的。代码很简单，我们只对Xml上放一张大图。

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout 3     xmlns:android="http://schemas.android.com/apk/res/android" 4     xmlns:tools="http://schemas.android.com/tools" 5     android:layout_width="match_parent" 6     android:layout_height="match_parent" 7     tools:context="com.example.nanchen.fullscreendemo.MainActivity"> 8  9     <ImageView10         android:layout_width="match_parent"11         android:layout_height="match_parent"12         android:scaleType="centerCrop"13         android:src="@drawable/test"/>14 </RelativeLayout>

额，显示就很常规啦。

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

2）咳咳！搞什么飞机，我只想看美女，给我那么多我不需要的东西做什么？好嘛，来实现全屏，隐去系统标题栏，简单一句代码。

1 @Override2     protected void onCreate(Bundle savedInstanceState) {3         super.onCreate(savedInstanceState);4         setContentView(R.layout.activity_main);5 6         //   实现全屏，去掉系统标题栏，适合于游戏、电影等沉浸式体验7         getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);8 }

运行一下：

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

3）咳咳，别把时间给弄丢了呀，我想像饿了么一样还要看到时间。哼，要是看美女看久了，没注意时间被媳妇儿发现了可就不好了。

好嘛，那就把系统时间放出来嘛，其实也很简单啦，但是目前只支持SDK在21以上哦。下面两种方式都可以。

1 if (VERSION.SDK_INT >= 21) {2             getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN3                     | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);4             getWindow().setStatusBarColor(Color.TRANSPARENT);5         }

 1         //另外一种方式 2         if (VERSION.SDK_INT >= 21) { 3             getWindow().getDecorView().setSystemUiVisibility( 4                     View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 5                             | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 6                             | View.SYSTEM_UI_FLAG_LAYOUT_STABLE 7             ); 8             getWindow().setStatusBarColor(Color.TRANSPARENT); 9             getWindow().setNavigationBarColor(Color.TRANSPARENT);10         }

看看效果。

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

4）哎，要是可以想看的时候显示，不想看的时候隐藏就好了。

也可以呀。

1 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION2         | View.SYSTEM_UI_FLAG_FULLSCREEN);

运行。

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

小伙伴也许会想：靠，楼主你这什么审美，这一闪一闪的是啥？这样还不如上一个好，简直是影响我看美女的心情。哎，关了关了。谁会这么脑残这样弄。

5）话说心急吃不了热豆腐，我亲爱的小伙伴你别方，我们还没带来重磅呢，app的沉浸式用户体验！！！

为了实现出沉浸式效果，隐去不必要的系统控件影响我们的即视感，但是小伙伴，你酌情使用，毕竟沉浸式体验除了在电影，手游，在其他行业貌似还用的相对较少，不过不管用不用，你还是先收藏一个呗，实现就简单了，重写onWindowFocusChanged方法。

 1 /** 2      * 真正的沉浸式体验，适用于SDK>=19 3      * 可以拉出导航栏 4      */ 5     @Override 6     public void onWindowFocusChanged(boolean hasFocus) { 7         super.onWindowFocusChanged(hasFocus); 8         if (hasFocus && VERSION.SDK_INT >= 19) { 9             getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE10                     | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION11                     | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN12                     | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION13                     | View.SYSTEM_UI_FLAG_FULLSCREEN14                     | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY15             );16         }17     }

见证奇迹：小伙伴一定会发现，这个一下拉就可以把系统导航栏弄出来，又不影响体验，又没影响美观，这也是真正的沉浸式体验。

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

额，喜欢的小伙伴，就动动你的小手点个赞吧，我们在码农之余，美女还是不可少矣！

分类导航

【有美女看】提升用户体验，你不得不知道的事儿——巧用全屏与沉浸式体验，让用户更舒心~

网友评论

更多精彩分享