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


    最近公司项目中要求写一个视频直播录像及视频观看的功能,额,就本能地去看了一波当下主流的一些视频类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     <ImageView
    10         android:layout_width="match_parent"
    11         android:layout_height="match_parent"
    12         android:scaleType="centerCrop"
    13         android:src="@drawable/test"/>
    14 </RelativeLayout>

    额,显示就很常规啦。

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

    1 @Override
    2     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 }

    运行一下:

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

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

    1 if (VERSION.SDK_INT >= 21) {
    2             getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    3                     | 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         }

    看看效果。

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

    也可以呀。

    1 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
    2         | View.SYSTEM_UI_FLAG_FULLSCREEN);

    运行。

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

    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_STABLE
    10                     | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    11                     | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    12                     | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
    13                     | View.SYSTEM_UI_FLAG_FULLSCREEN
    14                     | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
    15             );
    16         }
    17     }

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

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

    转载的小伙伴请在醒目位置附上本文链接:http://www.cnblogs.com/liushilin/p/5799381.html

  • 相关阅读:
    DRF小结
    js中BOM与DOM的概念与区别
    css单位分析、颜色设置与调色板
    css中伪类与伪元素的区别
    flexbox与grid layout的区别
    grid的简单使用
    position属性的总结
    html,css
    homework
    aboutme and my goal
  • 原文地址:https://www.cnblogs.com/liushilin/p/5799381.html
Copyright © 2020-2023  润新知