【有美女看】提升用戶體驗,你不得不知道的事兒——巧用全屏與沉浸式體驗,讓用戶更舒心~


最近公司項目中要求寫一個視頻直播錄像及視頻觀看的功能,額,就本能地去看了一波當下主流的一些視頻類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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM