Android状态栏适配和自定义toolbar胶囊按钮（可实现半透明状态栏）

自己搞开发，简单状态栏适配和自定义toolbar胶囊按钮，先看两张效果图：

如果你也在寻找沉浸式状态栏，应该也看过好多资料了，以及各种Android版本适配，但是自己用的话就变卦了…，所以最好简单点，就能达到我们想要的结果，先说说思路：

• 通过主题设置，让布局填充状态栏，并且使状态栏为透明
• 在布局里不使用android:fitsSystemWindows="true"属性（这个属性会使布局下移一个状态栏的距离，效果不好）
• 对于toolbar的颜色是我们自己定义的（注意状态栏一直是透明的，且布局也一直是延伸到状态栏下面的）
• toolbar内部的padding值是我们自己预定义的，不是在代码里通过获取状态栏的高度所确定的
• 状态栏半透明效果是在布局根部添加一个半透明View实现的

---

先来实现第一张图片效果：

设置主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    
    "colorPrimary">@color/colorPrimary
    "colorPrimaryDark">@color/colorPrimaryDark
    "colorAccent">@color/colorAccent
    
    "android:windowTranslucentStatus">true
    
    "android:statusBarColor">@android:color/transparent
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右上角胶囊按钮的形状

<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">

		   
            <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"就可得到这样的效果了：