实现效果：
e34371e415200a2fca9abca544d47ea7.gif
使用
CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、TabLayout来实现想要的效果
布局的实现：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<View
android:id="@+id/topView"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@android:color/holo_red_dark" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordLay"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/tabLay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="123"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="@+id/oneView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/colorPrimary" />
<View
android:id="@+id/twoView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/colorPrimaryDark" />
<View
android:id="@+id/threeView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@android:color/holo_green_dark" />
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabContent"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@android:color/holo_purple">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="惊喜呀" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="惊喜呀" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="惊喜呀" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
acitivity的代码：
import android.annotation.SuppressLint
import android.graphics.Color
import android.graphics.drawable.GradientDrawable
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.appbar.AppBarLayout
import kotlinx.android.synthetic.main.activity_coordinator_scroll_view.*
import kotlin.math.abs
/**
*@Created by wrs on 2020/10/26,11:59
*@Description: 协调者布局滑动监听测试
*/
class CoordinatorScrollActivity : AppCompatActivity(),AppBarLayout.OnOffsetChangedListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_coordinator_scroll_view)
initView()
initListener()
}
@SuppressLint("WrongConstant")
private fun initView() {
//实现背景颜色的渐变
val waterColors = intArrayOf(
Color.parseColor("#D3BEFF"),
Color.parseColor("#9BABFD"),
Color.parseColor("#5C97FB")
)
val drawable = GradientDrawable()
drawable.gradientType = GradientDrawable.RECTANGLE
drawable.cornerRadius = 0f
drawable.orientation = GradientDrawable.Orientation.LEFT_RIGHT
drawable.colors = waterColors
topView.background = drawable
}
private fun initListener() {
coordLay.setOnScrollChangeListener { view, scrollX, scollY, oldScrollX, oldScrollY ->
Log.e("tag","scrollX:$scrollX scollY:$scollY")
Log.e("tag","oldScrollX:$oldScrollX oldScrollY:$oldScrollY")
}
tabLay.addOnOffsetChangedListener(this)
}
@SuppressLint("WrongConstant")
override fun onOffsetChanged(bar: AppBarLayout?, height: Int) {
val heghtScroll = abs(height)
val oneHeight = oneView.height
val twoHeight = twoView.height
val threeHeight = threeView.height
val fourHeight = tabContent.height
if (heghtScroll == 0){
Log.e("tag","$height******头部")
initView()
}else if (heghtScroll in 1..oneHeight){
Log.e("tag","$height******第一部分0~300")
topView.setBackgroundColor(resources.getColor(R.color.colorPrimary))
}else if (heghtScroll in (oneHeight+1) .. (oneHeight+twoHeight)){
Log.e("tag","$height******第二部分300~600")
// topView.setBackgroundColor(resources.getColor(R.color.colorPrimaryDark))
initView()
}else if (heghtScroll in (oneHeight+twoHeight+1) until (oneHeight+twoHeight+threeHeight)){
Log.e("tag","$height******第三部分600~900")
topView.setBackgroundColor(resources.getColor(android.R.color.holo_green_dark))
}else if (heghtScroll == oneHeight+twoHeight+threeHeight){
Log.e("tag","$height******第四部分900以上")
topView.setBackgroundColor(resources.getColor(android.R.color.holo_purple))
}else{
Log.e("tag","******$height******")
}
}
override fun onDestroy() {
super.onDestroy()
tabLay.removeOnOffsetChangedListener(this)
}
}
AppBarLayout的addOnOffsetChangedListener监听有点儿耗性能
