自己搞開發,簡單狀態欄適配和自定義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"
就可得到這樣的效果了: