Android狀態欄適配和自定義toolbar膠囊按鈕（可實現半透明狀態欄）

自己搞開發，簡單狀態欄適配和自定義toolbar膠囊按鈕，先看兩張效果圖：

如果你也在尋找沉浸式狀態欄，應該也看過好多資料了，以及各種Android版本適配，但是自己用的話就變卦了…，所以最好簡單點，就能達到我們想要的結果，先說說思路：

• 通過主題設置，讓佈局填充狀態欄，並且使狀態欄爲透明
• 在佈局裏不使用android:fitsSystemWindows="true"屬性（這個屬性會使佈局下移一個狀態欄的距離，效果不好）
• 對於toolbar的顏色是我們自己定義的（注意狀態欄一直是透明的，且佈局也一直是延伸到狀態欄下面的）
• toolbar內部的padding值是我們自己預定義的，不是在代碼裏通過獲取狀態欄的高度所確定的
• 狀態欄半透明效果是在佈局根部添加一個半透明View實現的

---

先來實現第一張圖片效果：

設置主題

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!--佈局延伸到狀態內4.4+-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--設置狀態的顏色5.0+-->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

自定義Toolbar

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingTop="32dp"
        android:paddingBottom="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/toolbarTextViewTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="TextView"
            android:textColor="@color/titles_light_bg"
            android:textSize="@dimen/title"
            tools:layout_editor_absoluteX="16dp"
            tools:layout_editor_absoluteY="36dp" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_marginEnd="16dp"
            android:background="@drawable/toolbar_icon_layout_shape">

            <ImageView
                android:id="@+id/toolbarImageViewMenu"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginStart="12dp"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="4dp"
                android:src="@drawable/ic_three_point_white"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/divider"
                android:layout_width="1dp"
                android:layout_height="16dp"
                android:background="#80FFFFFF"
                app:layout_constraintBottom_toBottomOf="@+id/toolbarImageViewAbout"
                app:layout_constraintEnd_toStartOf="@+id/toolbarImageViewAbout"
                app:layout_constraintStart_toEndOf="@+id/toolbarImageViewMenu"
                app:layout_constraintTop_toTopOf="@+id/toolbarImageViewAbout" />

            <ImageView
                android:id="@+id/toolbarImageViewAbout"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/toolbarImageViewMenu"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_about_2_white" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

toolbar_icon_layout_shape.xml 這個是toolbar右上角膠囊按鈕的形狀

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <!-- 設置背景顏色 -->
    <solid android:color="#11000000" />

    <!-- 定義圓角弧度 -->
    <corners
        android:radius="16dp" />

</shape>

在需要使狀態欄半透明的根佈局添加一個View

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.MainFragment">

	<!-- 佈局頁面可以滾動 -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

		   <!-- 引用toolbar -->
            <include
                android:id="@+id/includeToolbar"
                layout="@layout/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

		   <!-- 其他佈局組件... -->
		   
    </ScrollView>

    <!-- 遮住狀態欄的半透明遮罩 -->
    <View
        android:id="@+id/toolbarDividerStatusBar"
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:background="#11000000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

注：toolbar的背景默認是透明的

在第二張效果圖裏，是沒有遮罩View的，之後在代碼文件中設置toolbar的顏色，和監聽事件

toolbar.toolbarTextViewTitle.text = "搜索"
toolbar.background = ColorDrawable(Color.parseColor("#019587"))
toolbar.toolbarImageViewMenu.setOnClickListener { 
	 // 設置監聽事件             
}
toolbar.toolbarImageViewAbout.setOnClickListener { 
	 // 設置監聽事件             
}

---

說明：爲什麼要預定義padding值，是因爲在代碼中toolbar的四個padding值都是0，加上狀態欄的高度後，只把toolbar的內容下移了，但是view的邊界沒有下移，就很尷尬

// 獲取狀態欄的高度
fun getStatusBar(): Int {
    var height = 0
    val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
    if (resourceId > 0) height = resources.getDimensionPixelSize(resourceId)
    return height
}

// 在 onActivityCreated 中調用
fun setToolbarPadding() {
	// 獲取toolbar的padding值
    Log.v("LOG-toolbarTopOld", toolbar.paddingTop.toString())
    Log.v("LOG-toolbarLeftOld", toolbar.paddingLeft.toString())
    Log.v("LOG-toolbarBottomOld", toolbar.paddingBottom.toString())
    Log.v("LOG-toolbarRightOld", toolbar.paddingRight.toString())
    Log.v("LOG-height", getStatusBar().toString())
    
    toolbar.setPadding(toolbar.paddingLeft, toolbar.paddingTop + getStatusBar(), toolbar.paddingRight, toolbar.paddingBottom)
    Log.v("LOG-toolbarTopOld", toolbar.paddingTop.toString())
}

日誌內容及效果：

所以還是設一個值吧，狀態欄的高度是25dp，爲了美觀可以設置：android:paddingTop="32dp", android:paddingBottom="12dp"就可得到這樣的效果了：