Android全屏沉浸式应用
原文出處:http://bbs.itheima.com/thread-298355-1-1.html?zztj3?rss
一、概念
首先讓我們看一下默認狀態欄的顯示效果 以下以微信與qq為例:
由于Android 系統自4.2 開始 UI 上就沒多大改變,而4.4增加了透明狀態欄與導航欄的功能如以下圖的效果。
從以上的圖可以看出Activity的contentView( 即setContentView設置的視圖)可以延伸到statusBar下方 這種體驗就叫沉浸式體驗。這個是從用戶的角度來感受的。如果從設計師的角度來看就是Immersive Mode 全浸模式,Translucent Bars 半透明狀態欄。不同共同的特點就是“將布局內容延伸到手機狀態欄”。
對于這種顯示效果又有以下兩種模式
1、全屏( ContentView 可以進入狀態欄)
2、非全屏 ( ContentView 與狀態欄分離, 狀態欄直接著色
二、案例分析
sdk5.x以上 ,準備5.0模擬器
非全屏幕:theme默認主題著色狀態欄
根據5.0以上的theme配置要求。只需配置colorPirmary(標題欄顏色),colorPrimaryDark(手機狀態欄顏色)即可.
在values/styles.xml創建主題
<resources><!--應用的基本主題 --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- 自定義應用主題 --><!--標題顏色--><item name="colorPrimary">@color/colorPrimary</item><!--狀態欄顏色--><item name="colorPrimaryDark">@color/colorPrimaryDark</item><!--text /checkBox顏色--><item name="colorAccent">@color/colorAccent</item></style> </resources>在systembar/src/main/AndroidManifest.xml引用
<application android:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:supportsRtl="true"android:theme="@style/AppTheme"><!-這里是activity -> </application>運行效果
非全屏幕:Javacode著色狀態欄
代碼位置:com.example.systembar.CodeActivity
1、先寫版本判斷
2、直接調用setStatusBarColor
運行效果:根據標題顏色著色
android:fitsSystemWindows setFitsSystemWindows()所有實現 Translucent System Bar 效果的Activity,都需要在根布局里設置 android:fitsSystemWindows=”true” 。設置了該屬性的作用在于,不會讓系統導航欄和我們app的UI重疊,導致交互問題.以下給出效果圖說明該屬性。
全屏幕:contentview延伸
代碼位置:com.example.systembar.CodeFullActivity#onCreate
//去掉titlebar-全屏模式 supportRequestWindowFeature(Window.FEATURE_NO_TITLE); //細節supportRequestWindowFeature一定要在setContentView之前設置 setContentView(R.layout.activity_code_full); Activity activity = this; int statusColor = Color.parseColor("#008000"); //針對版本5.x以上的即LOLLIPOP以上的 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {Window window = activity.getWindow();//設置透明狀態欄,這樣才能讓 ContentView 向上window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//需要設置這個 flag 才能調用 setStatusBarColor 來設置狀態欄顏色window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);//設置狀態欄顏色window.setStatusBarColor(statusColor);ViewGroup mContentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);View mChildView = mContentView.getChildAt(0);if (mChildView != null) {//注意不是設置 ContentView 的 FitsSystemWindows, 而是設置 ContentView 的第一個子 View .// 使其不為系統 View 預留空間.不預留空間的話 狀態欄就會覆蓋布局頂部ViewCompat.setFitsSystemWindows(mChildView, false);} }運行效果
4.4以上,準備4.4模擬器
5.x以上的實現方式不使4.4以上的生效.所以要考慮一下兼容方案。
全屏幕:contentview延伸
思路:暫時保存標題欄時可以清楚得看到只要將contentView延伸到statusbar下方.它與statusBar共同放在一個FrameLayout里
代碼位置:com.example.systembar.CodeFullActivity#onCreate
1、獲取系統statusBar的高度
private static final String STATUS_BAR_HEIGHT_RES_NAME = "status_bar_height"; public static int getStatusBarHeight(Context context) {int result = 0;//訪問android.jar內的dimen中包含的status_bar_height屬性值int resourceId = context.getResources().getIdentifier(STATUS_BAR_HEIGHT_RES_NAME, "dimen", "android");if (resourceId > 0) {result = context.getResources().getDimensionPixelSize(resourceId);}return result; }2、設置無標題欄
//去掉titlebar-全屏模式 supportRequestWindowFeature(Window.FEATURE_NO_TITLE); //細節supportRequestWindowFeature一定要在setContentView之前設置 setContentView(R.layout.activity_code_full);3、設置 contentView的marginTop上移狀態欄高度
//KITKAT為4.4sdk的名稱 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {Window window = activity.getWindow();ViewGroup contentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);//首先使 ChildView 不預留空間View childView = contentView.getChildAt(0);//layout file對應的根標簽if (childView != null) {//此時status會遮蓋contnetviewViewCompat.setFitsSystemWindows(childView, false);}int statusBarHeight = getStatusBarHeight(activity);//需要設置這個 flag 才能設置狀態欄window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//避免多次調用該方法時,多次移除了 Viewif (childView != null && childView.getLayoutParams() != null && childView.getLayoutParams().height == statusBarHeight) {//移除假的 View.contentView.removeView(childView);childView = contentView.getChildAt(0);}if (childView != null) {FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) childView.getLayoutParams();//清除 ChildView 的 marginTop 屬性if (lp != null && lp.topMargin >= statusBarHeight) {//減少layout的topmargin 使用layout布局的整體延伸到statusBar下方lp.topMargin -= statusBarHeight;childView.setLayoutParams(lp);}} }Deug下可以查看到
activity.findViewById(Window.ID_ANDROID_CONTENT);獲取的是存放layout的FrameLayout具體類型為ContentFrameLayout
Layout的內容可以從 contentView.getChildAt(0);獲取
在狀態欄透明的情況下 lp.topMargin -= statusBarHeight;可以使用layout上移
運行效果
非全屏幕:Javacod著色狀態欄
- 獲取系統狀態欄高度(同上)
- 在狀態欄透明情況下下移contnetView 距離為狀態欄高度
- 如果存在著色View則修改背景色
- 如果不存在著色View則添加同時設置背景色
運行效果,我在此處添加的著色View背景為綠色
此時還可以去掉系統自帶的標題欄
【源代碼】http://pan.baidu.com/s/1slOj6sl
開源第三方SystemBarTint
下面介紹一個將以上過程封裝比較到位的第三方開源狀態欄工具庫
支持4.4以上
Github地址:https://github.com/Ztiany/SystemBarTint
運行效果
4.4以上
5.x以上
在android5.0以上
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="colorPrimary">@color/titleBlue</item><item name="colorPrimaryDark">#3A5FCD</item><item name="@android:textColorPrimary">@android:color/white</item></style><style name="AppTheme" parent="AppBaseTheme"><!-- 隱藏標題欄 --><item name="android:windowNoTitle">true</item><item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@color/transparent</item><!--<item name="colorControlNormal">@color/white</item>--></style>當statusBarColor設置為透明色后,狀態欄的顏色為白色,如果布局文件加上屬性android:fitsSystemWindows=”true”后,狀態欄則顯示colorPrimaryDark顏色
styles(4.0之前)
<!-- 半透明的主題樣式 --><style name="NavigationTransparent" parent="AppTheme"><!-- Android 4.4 之前的版本跟隨系統默認的樣式--></style>styles(4.4之后)
<!-- 半透明的主題樣式 --><style name="NavigationTransparent" parent="AppTheme"><!-- 狀態欄 半透明 --><item name="android:windowTranslucentStatus">true</item><!-- 導航欄 半透明--><item name="android:windowTranslucentNavigation">true</item></style>styles(5.0之后)
<!-- 半透明的主題樣式 --><style name="NavigationTransparent" parent="AppTheme"><!-- 導航欄 半透明--><item name="android:windowTranslucentNavigation">true</item><!-- 狀態欄 半透明 --><item name="android:windowTranslucentStatus">true</item><!-- Android 5.0開始需要把顏色設置為透明。否狀態欄會用系統默認的淺灰色 (Android 5.0以后支持修改顏色,需指定顏色)--><item name="android:statusBarColor">@android:color/transparent</item></style>總結
以上是生活随笔為你收集整理的Android全屏沉浸式应用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 性能优化之数据库优化
- 下一篇: Android SQLite数据库的详细