Android實現沉浸式狀態列及標題欄滑動變色

摘要： Android實現沉浸式狀態列及標題欄滑動變色 效果圖 1. 沉浸式狀態列的實現 沉浸式狀態列實現的方式有很多，可自行百度谷歌 此處沉浸式狀態列實現採用第三方開源庫ImmersionBar,整合方式可直接檢視官方文件，這裡只做演...

Android實現沉浸式狀態列及標題欄滑動變色

1. 沉浸式狀態列的實現

沉浸式狀態列實現的方式有很多，可自行百度谷歌

此處沉浸式狀態列實現採用第三方開源庫 ofollow,noindex"> ImmersionBar ,整合方式可直接檢視官方文件，這裡只做演示

1.1 匯入包

implementation 'com.gyf.immersionbar:immersionbar:2.3.2-beta01'

1.2 初始化

//這裡需要注意初始化必須要在setContentView(view)之後執行
//解決狀態列與佈局頂部重疊，官方文件提供六種方案
//ImmersionBar.with(this).titleBar(mToolBar).init() 
ImmersionBar.with(this).init()

1.3 關閉銷燬

override fun onDestroy() {
super.onDestroy()
ImmersionBar.with(this).destroy()
}

到這，沉浸式狀態列的簡單整合就實現了，當然根據佈局複雜程度會有各種各樣的問題，比如側滑選單，Fragment等中沉浸式狀態列的實現，詳細可先檢視 文件

2. 標題欄隨著滑動透明度(顏色)變化，目標效果如網易雲音樂詳情頁

思路：標題欄後面新增一個ImageView作為標題欄的背景圖片，標題欄為透明，考慮到背景圖片為頭部圖片的底部擷取，可將大小設定與頭部圖片一樣，然後將其上移至標題欄部分；隨著滑動的變化，將背景圖片的透明度進行設定

2.1 佈局檔案如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<ScrollView
android:id="@+id/mScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/mIvHeadView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@mipmap/test" />

<TextView
android:id="@+id/mTv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="jkjlkjkljslkdjfklsjdfkljsdlkjfkljsdlkfj"
/>
</LinearLayout>
</ScrollView>


<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/mIvBarView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:alpha="0"
android:scaleType="centerCrop"
android:src="@mipmap/test"
android:visibility="visible" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<View
android:id="@+id/mTopView"
android:layout_width="match_parent"
android:layout_height="0dp" />

<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="圖片標題欄滑動變化"
app:titleTextColor="@android:color/white" />

</LinearLayout>
</FrameLayout>
</FrameLayout>

2.2 設定狀態列透明

ImmersionBar.with(this).titleBar(mToolBar).init()


override fun onDestroy() {
super.onDestroy()
ImmersionBar.with(this).destroy()
}

2.3 將標題圖片上移至狀態列+標題欄高度的底部部位

//將標題圖片上移至狀態列+標題欄高度的底部部位
val params = mIvBarView.getLayoutParams()
//狀態列+標題欄的高度
var topHeight = mToolBar.layoutParams.height + getStatusHeight()

val ivTitleHeadBgParams = mIvBarView.getLayoutParams() as ViewGroup.MarginLayoutParams
val marginTop = params.height - topHeight
ivTitleHeadBgParams.setMargins(0, -marginTop, 0, 0)

2.4 設定滑動監聽，控制背景圖片的透明度

//監聽滑動狀態設定透明度
mScrollView.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
var headHight = mIvHeadView.layoutParams.height
var flagHight = headHight - topHeight
var alpha = 0f
var scrolledY = if (scrollY < 0) 0 else scrollY

if (flagHight > 0) {
if (scrolledY < flagHight) {
alpha = scrolledY.toFloat() / flagHight
} else {
alpha = 1f
}
}
mIvBarView.alpha = alpha
}

參考資料

• Android - 仿網易雲音樂歌單詳情頁

原始碼地址

• Android實現沉浸式狀態列及標題欄滑動變色(Kotlin)