android沉浸式狀態(tài)欄,android沉浸式狀態(tài)欄圖片顏色

如何實現(xiàn)Android沉浸式狀態(tài)欄

注意引入相關(guān)依賴：

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：成都網(wǎng)站建設、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的袁州網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

Java代碼

compile 'com.android.support:appcompat-v7:22.2.1'

compile 'com.android.support:support-v4:22.2.1'

compile 'com.android.support:design:22.2.0'

（一）colors.xml 和 styles.xml

首先我們定義幾個顏色：

res/values/color.xml

XML/HTML代碼

?xml version="1.0" encoding="utf-8"?

resources

color name="primary"#FF03A9F4/color

color name="primary_dark"#FF0288D1/color

color name="status_bar_color"@color/primary_dark/color

/resources

下面定義幾個styles.xml

注意文件夾的路徑：

values/styles.xml

XML/HTML代碼

resources

style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar"

!-- Customize your theme here. --

item name="colorPrimary"@color/primary/item

item name="colorPrimaryDark"@color/primary_dark/item

item name="colorAccent"#FF4081/item

/style

!-- Base application theme. --

style name="AppTheme" parent="@style/BaseAppTheme"

/style

/resources

values-v19

XML/HTML代碼

resources

style name="AppTheme" parent="@style/BaseAppTheme"

item name="android:windowTranslucentStatus"true/item

/style

/resources

ok，這個沒撒說的。注意我們的主題是基于NoActionBar的，android:windowTranslucentStatus這個屬性是v19開始引入的。

（二）布局文件

activity_main.xml

XML/HTML代碼

android.support.v4.widget.DrawerLayout

xmlns:android=""

xmlns:app=""

xmlns:tools=""

android:layout_width="match_parent"

android:layout_height="match_parent"

LinearLayout

android:id="@+id/id_main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:fitsSystemWindows="true"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/

TextView

android:id="@+id/id_tv_content"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:gravity="center"

android:text="HelloWorld"

android:textSize="30sp"/

/LinearLayout

android.support.design.widget.NavigationView

android:id="@+id/id_nv_menu"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/header_just_username"

app:menu="@menu/menu_drawer"

/android.support.v4.widget.DrawerLayout

DrawerLayout內(nèi)部一個LinearLayout作為內(nèi)容區(qū)域，一個NavigationView作為菜單。

注意下Toolbar的高度設置為wrap_content。

然后我們的NavigationView中又依賴一個布局文件和一個menu的文件。

header_just_username.xml

XML/HTML代碼

?xml version="1.0" encoding="utf-8"?

RelativeLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="192dp"

android:background="?attr/colorPrimaryDark"

android:orientation="vertical"

android:padding="16dp"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark"

TextView

android:id="@+id/id_link"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="16dp"

android:text=""/

TextView

android:id="@+id/id_username"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@id/id_link"

android:text="Zhang Hongyang"/

ImageView

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_above="@id/id_username"

android:layout_marginBottom="16dp"

android:src="@mipmap/ic_launcher"/

/RelativeLayout

menu的文件就不貼了，更加詳細的可以去參考Android 自己實現(xiàn) NavigationView [Design Support Library(1)]。

大體看完布局文件以后，有幾個點要特別注意：

? ToolBar高度設置為wrap_content

? ToolBar添加屬性android:fitsSystemWindows="true"

? header_just_username.xml的跟布局RelativeLayout，添加屬性android:fitsSystemWindows="true"

android:fitsSystemWindows這個屬性，主要是通過調(diào)整當前設置這個屬性的view的padding去為我們的status_bar留下空間。

根據(jù)上面的解釋，如果你不寫，那么狀態(tài)欄和Toolbar就會有擠一塊的感覺了，類似會這樣：

安卓里哪些音樂播放器是沉浸式狀態(tài)欄

注意！兩種方法的區(qū)別：

第一種：為頂部欄跟隨當前activity的布局文件的背景的顏色，使用方便，不過也有點問題就是，如果有底部虛擬導航鍵的話，導航鍵的背景跟頂部的顏色一樣，比如：

第二種：是通過設置頂部欄的顏色來顯示的，可以解決第一種的不足，比如：

第一種使用方法：

第一、首先在values、values-v19、values-v21文件夾下的styles.xml都設置一個 Translucent System Bar 風格的Theme，如下圖：

values/style.xml：

style name="TranslucentTheme" parent="AppTheme"

!--在Android 4.4之前的版本上運行，直接跟隨系統(tǒng)主題--

/style123

values-v19/style.xml：

style name="TranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"

item name="android:windowTranslucentStatus"true/item

item name="android:windowTranslucentNavigation"true/item

/style1234

values-v21/style.xml：

style name="TranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"

item name="android:windowTranslucentStatus"false/item

item name="android:windowTranslucentNavigation"true/item

!--Android 5.x開始需要把顏色設置透明，否則導航欄會呈現(xiàn)系統(tǒng)默認的淺灰色--

item name="android:statusBarColor"@android:color/transparent/item

/style123456

第二、在清單文件中配置需要沉浸式狀態(tài)欄的activity加入theme

activity android:name=".ImageActivity" android:theme="@style/TranslucentTheme" /

activity android:name=".ColorActivity" android:theme="@style/TranslucentTheme" /12

第三、在Activity的布局文件中的跟布局加入逗android:fitsSystemWindows=地true地地，但是，這里需要區(qū)分一下，就是背景是圖片還是純色：

1.當背景為圖片時，布局可以這么寫：

?xml version="1.0" encoding="utf-8"?

RelativeLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/imgs_bj"

android:fitsSystemWindows="true"

/RelativeLayout12345678

效果：

2.當背景為純色，我們需要對布局劃分一下，標題布局與內(nèi)容布局，先把根布局背景設置成標題布局的背景色，然后標題背景色可以不用設置直接使用根布局的背景色，最后內(nèi)容布局背景色設置為白色

?xml version="1.0" encoding="utf-8"?

LinearLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/colorPrimary" //根布局背景設置成逗標題布局地想要的顏色

android:fitsSystemWindows="true"

android:orientation="vertical"

!--標題布局--

RelativeLayout

android:layout_width="match_parent"

android:layout_height="55dp"

android:background="@color/color_31c27c"

TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="這是標題"

android:textColor="@android:color/white"

android:textSize="20sp" /

/RelativeLayout

!--內(nèi)容布局--

LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white" //內(nèi)容區(qū)域背景設置成白色

android:gravity="center"

android:orientation="vertical"

Button

android:layout_marginTop="120dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="8dp"

android:text="顯示信息"

android:onClick="showMsg"

/LinearLayout

如何動態(tài)兼容沉浸式狀態(tài)欄模式

由于各系統(tǒng)版本的限制，沉浸式狀態(tài)欄對系統(tǒng)有要求（Android4.4及以上、iOS7.0及以上），如果要兼容各系統(tǒng)版本，需要動態(tài)判斷當前環(huán)境是否支持沉浸式狀態(tài)欄以及系統(tǒng)狀態(tài)欄的高度：

使用5+API

- 判斷當前環(huán)境是否支持沉浸式狀態(tài)欄

plus.navigator.isImmersedStatusbar()

如果當前支持沉浸式狀態(tài)欄則返回true，否則返回false。

- 獲取當前系統(tǒng)狀態(tài)欄高度

plus.navigator.getStatusbarHeight()

獲取系統(tǒng)狀態(tài)欄高度，Number類型。

其單位是邏輯像素值，即css中可直接使用的像素值，可能存在小數(shù)點。

實際用法參考HelloH5應用的“plus/doc.html”：

// 創(chuàng)建加載內(nèi)容窗口

var topoffset='45px';

if(plus.navigator.isImmersedStatusbar()){// 兼容immersed狀態(tài)欄模式

// 獲取狀態(tài)欄高度并根據(jù)業(yè)務需求處理，這里重新計算了子窗口的偏移位置

topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';

}

// 使用偏移位置創(chuàng)建子窗口

wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});

通過userAgent判斷

5+API需要在plusready事件后才能調(diào)用，通常此事件在DOM加載渲染后才會觸發(fā)，無法再渲染前根據(jù)不同的狀態(tài)來設置css。

為了解決此問題，在支持5+API運行環(huán)境的userAgent中特定字段Html5Plus/1.0后添加Immersed標識，如下：

"Html5Plus/1.0 (Immersed/30)"

其中Immersed/后的30表示狀態(tài)欄的高度，單位為邏輯像素值。

可以使用正則表達式進行獲?。?/p>

var immersed = 0;

var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);

if(msms.length=3){ // 當前環(huán)境為沉浸式狀態(tài)欄模式

immersed=parseFloat(ms[2]);// 獲取狀態(tài)欄的高度

}

immersed值如果大于0則表示當前環(huán)境支持沉浸式狀態(tài)欄。

獲取狀態(tài)欄高度后，可以使用js動態(tài)修改DOM元素的css屬性來設置樣式，如設置界面頭區(qū)域的頂部內(nèi)邊距為狀態(tài)欄的高度（避免系統(tǒng)狀態(tài)欄與界面頭重疊），示例如下：

var t=document.getElementById('header');

tt.style.paddingTop=immersed+'px';

具體項目中可根據(jù)界面設計，靈活使用immersed值來動態(tài)適配各種效果。

完整用法可參考HelloH5應用中的“js/immersed.js”

Android QQ沉浸式狀態(tài)欄效果是怎么實現(xiàn)的

這個特性是andorid4.4支持的，最少要api19才可以使用。下面介紹一下使用的方法，非常得簡單： public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceSta

Android 沉浸式/透明式狀態(tài)欄、導航欄

Android 從4.4開始引進透明狀態(tài)欄和導航欄的概念，并且在5.0進行了改進，將透明變成了半透明的效果。雖然此特性最早出現(xiàn)在ios，但不否認效果還是很贊的。

至于4.4以下的手機，就不要考慮此特性了，好在4.4以下的手機份額已經(jīng)非常小了。

我們先來看一下透明狀態(tài)欄的實現(xiàn)，兩種常見效果圖如下：

虛擬導航欄并不是所有的手機都有，華為的手機多比較常見，就是上圖屏幕底部按鈕那塊區(qū)域。設置導航欄和狀態(tài)欄類似：

這是官方的解釋，大致意思就是我們在布局的最外層設置 android:fitsSystemWindows="true"，會在屏幕最上方預留出狀態(tài)欄高度的padding。

由于fitsSystemWindows屬性本質(zhì)上是給當前控件設置了一個padding，所以我們設置到根布局的話，會導致狀態(tài)欄是透明的，并且和窗口背景一樣。

但是多數(shù)情況，我們并不在根布局設置這個屬性，我們想要的無外乎是讓內(nèi)容沉浸在狀態(tài)欄之中。所以我們經(jīng)常設置在最上端的圖片背景、Banner之類的，如果是Toolbar的，我們可以使用一層LinearLayout包裹，并把這個屬性設置給LinearLayout，這樣就可以避免Toolbar的內(nèi)容下沉了。如：

上述方法可以解決普通頁面的透明式狀態(tài)欄需求，如有復雜需求可以參考下面這些：

Android 系統(tǒng)狀態(tài)欄沉浸式/透明化完整解決方案

Android 沉浸式狀態(tài)欄的實現(xiàn)

Android沉浸式狀態(tài)欄(透明狀態(tài)欄)最佳實現(xiàn)

還有開源庫推薦： ImmersionBar