您當前位置：首頁 > php開源 > 綜合技術 > Android“沉浸式”狀態欄實現

Android“沉浸式”狀態欄實現

來源：程序員人生發布時間：2016-10-11 08:24:45 閱讀次數：2520次

1 甚么是“沉醉式”狀態欄

我們通常所說的沉醉式狀態欄，其實叫法其實不正確，準確來講應當叫透明狀態欄，這個不多說，很多大神都已說過了。那我們就來看看市面上的App使用了“沉醉式”狀態欄。
大致分為兩類：

1種是通過設置狀態欄的色彩與app相同
例如QQ
另外一種是讓狀態欄和全部app使用同1張圖片

不管那種方式，目的都只有1個，讓用戶覺得狀態欄和全部App是1體的，而不是系統單獨出來的1部份，從而到達所謂沉醉式的效果。
不管那種方法只有在Android在4.4以后才可以實現，并且現在國產手機基本上都是4.4以上，新生產的手機6.0都是標配，所以4.4之前的暫不斟酌兼容，接下來就來看看是怎樣實現的。

2 給StatusBar設置View

2.1 設置App充滿StatusBar所在空間

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

2.2 創建1個與StatusBar長寬相同的View

//獲得填充的statusView
            LayoutInflater layoutInflater = LayoutInflater.from(this);
            View statusBarView = layoutInflater.inflate(R.layout.statusbar, null);
            int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
            int statusBarHeight = getResources().getDimensionPixelSize(resourceId);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    statusBarHeight);
            statusBarView.setLayoutParams(params);

R.layout.statusbar布局

<?xml version="1.0" encoding="utf⑻"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:orientation="vertical">
</LinearLayout>

2.3 將View填充到StatusBar所在的空間

// 添加 statusView 到布局中
            ViewGroup decorView = (ViewGroup) getWindow().getDecorView();
            decorView.addView(statusBarView);

2.4 設置根布局的屬性

    android:fitsSystemWindows="true"
    android:clipToPadding="true"

運行效果以下圖
這里寫圖片描述
完全代碼

Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //讓利用充滿StatusBar
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//            //設置透明導航欄
//            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //獲得填充的statusView
            LayoutInflater layoutInflater = LayoutInflater.from(this);
            View statusBarView = layoutInflater.inflate(R.layout.statusbar, null);
            int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
            int statusBarHeight = getResources().getDimensionPixelSize(resourceId);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    statusBarHeight);
            statusBarView.setLayoutParams(params);
            // 添加 statusView 到布局中
            ViewGroup decorView = (ViewGroup) getWindow().getDecorView();
            decorView.addView(statusBarView);
        }
    }

}

layout

<?xml version="1.0" encoding="utf⑻"?>
<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:background="@color/colorPrimary"
    android:fitsSystemWindows="true"
    android:clipToPadding="true"
    tools:context="cn.sq.transparentstatusbardemo.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="TransparentStatusBar"
        android:textSize="30dp"
        android:textColor="@color/colorAccent"/>
</RelativeLayout>

3 讓Layout占滿StatusBar的空間

3.1 代碼中設置Flag

在Activity中為窗體AddFlag “FLAG_TRANSLUCENT_STATUS”

if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //設置透明狀態欄         getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //設置透明導航欄           getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

分別設置圖片和純色設置后運行結果以下圖
這里寫圖片描述

運行后發現布局全部向上偏移，占據了狀態欄的位置，不用著急，只需要在布局中設置屬性便可

3.2 給布局文件添加屬性

需要給根布局添加兩個屬性

    android:fitsSystemWindows="true"
    android:clipToPadding="true"

運行結果以下圖
這里寫圖片描述

完全代碼
Activity


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //設置透明狀態欄
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //設置透明導航欄
//            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
    }
}

布局文件

<?xml version="1.0" encoding="utf⑻"?>
<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:background="@mipmap/luffy"
    android:fitsSystemWindows="true"
    android:clipToPadding="true"
    tools:context="com.drision.transparentstatusbardemo.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="TransparentStatusBar"
        android:textSize="30dp"
        android:textColor="@color/colorAccent"/>
</RelativeLayout>