參考
android中fitsSystemWindows的用處
我們為什么要用fitsSystemWindows?
全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的實現
Android開發:Translucent System Bar 的最佳實踐
Android 沉浸式狀態欄攻略 讓你的狀態欄變色吧
背景
在實現沉浸式狀態欄時,我們會用到android:fitsSystemWindows="true"這個屬性,對于該屬性網上給出的解釋實在有些模糊,這里我先描述我對這個屬性的理解,理解后再來實現沉浸式狀態欄效果。
個人理解
在設置了透明狀態欄(StatusBar)或者導航欄(NavigationBar)之后,activity的內容會延伸至對應的區域,使得該區域出現重疊現象,這對內容包含交互控件的情況影響尤其巨大,為了解決這個情況,fitsSystemWindows屬性出現了,我們可以為任何view添加此屬性,設置了該屬性的view的所有padding屬性將失效,并且系統會根據情況給該view添加paddingTop和paddingBottom(當設置透明狀態欄時,系統會為該view添加一個值等于狀態欄高度的paddingTop,當設置了透明導航欄時,系統會為該view添加一個值等于導航欄高度的paddingBottom)。
在默認情況下,多個view設置該屬性時,只有最外層的view才會起作用;我們也可以通過覆寫自定義view的一些方法來決定自身的處理,及子view是否有機會截斷并對fitsSystemWindows做出自己的反應,如DrawerLayout、CoordinatorLayout和CollapsingToolbarLayout就使用了自定義fitsSystemWindow(難怪給drawerLayout設置該屬性時和我們理解的行為不一致)。
有了以上的理解,我們可以來動手實現沉浸式狀態欄了。
沉浸式狀態欄
我們要實現的效果有以下兩種:
- 背景圖片填滿了整個屏幕。
- 狀態欄和actionBar顏色一致。
第一種效果:
我們只需要把內容延伸至狀態欄和導航欄,然后給根布局設置圖片背景,若需要內容不出現在狀態欄和導航欄區域則再添加android:fitsSystemWindows="true"既可。
- 在values、values-v19、values-v21的style.xml都設置一個 Translucent System Bar 風格的Theme。
values/style.xml
<style name="AppTheme.Image" parent="AppTheme"/>
values-v19/style.xml和values-v21/style.xml
<style name="AppTheme.Image" parent="AppTheme">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
- 給activity設置theme。
<activity android:name=".ImageActivity"
android:theme="@style/AppTheme.Image"/>
- 布局添加背景圖片和android:fitsSystemWindows="true"。
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="@drawable/image"
tools:context="com.example.myfitwindowsystems.ImageActivity">
</RelativeLayout>
5.0效果:
4.4效果:
若想要去掉5.0系統的半透明狀態欄,我們可以設置狀態欄顏色為透明,想要設置狀態欄,那么就不能隱藏掉狀態欄了,因此設置如下:
values-v21/style.xml
<style name="AppTheme.Image" parent="AppTheme">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
第二種效果
別管兼容4.4了~~ 現在都8.1了~~ 直接修改statusBar顏色不就美滋滋了~~
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
}
或者修改values-v21/style.xml
<style name="AppTheme.Color" parent="AppTheme">
<item name="android:statusBarColor">@color/colorPrimary</item>
</style>
算了,還是寫一下兼容寫法吧
- 添加theme
values-v19/style.xml
<style name="AppTheme.Color" parent="AppTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>
values-v21/style.xml
<style name="AppTheme.Color" parent="AppTheme">
<item name="android:statusBarColor">@color/colorPrimary</item>
</style>
- 設置theme
<activity android:name=".ColorActivity"
android:theme="@style/AppTheme.Color">
- 修改布局文件
在toolbar添加android:fitsSystemWindows="true",記得高度為wrap_content。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.myfitwindowsystems.ColorActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="@color/colorPrimary">
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello world!"/>
</LinearLayout>
- activity中設置toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
setSupportActionBar(toolbar);
5.0效果:
4.4效果: