The effect is like this, the principle is very simple
As shown in the figure, there are actually two titles with the same layout on the page. The ceiling title is hidden by default, and then monitors the scroll height Y of the ScrollView. When the scroll height Y is greater than the height of content 1, the ceiling title is displayed, otherwise, the ceiling title is hidden . In this way, from the visual effect, the title has a ceiling effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/purple_500"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollView"
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/iv_header"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"
android:src="@drawable/banner_1"
app:layout_collapseMode="parallax" />
<TextView
android:id="@+id/magicIndicator"
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:background="@color/white"
android:text="好货推荐"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="44dp"
android:id="@+id/toolbar"
android:background="#FFFFFF"
android:gravity="center">
<ImageView
android:id="@+id/ivBack"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="标题" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:visibility="gone"
android:id="@+id/magicIndicatorTitle"
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:background="@color/white"
android:text="好货推荐"/>
</RelativeLayout>
</FrameLayout>
toolbar.setBackgroundColor(Color.argb((int) 0, 0,0,0));
tvTitle.setAlpha(0);
int high=DensityUtil.dip2px(this,160);
scrollView.setOnScrollChangeListener(new androidx.core.widget.NestedScrollView.OnScrollChangeListener() {
int h=toolbar.getHeight();
@Override
public void onScrollChange(androidx.core.widget.NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY> high) {
magicIndicatorTitle.setVisibility(View.VISIBLE);
} else {
magicIndicatorTitle.setVisibility(View.GONE);
}
if (scrollY <= 0) { //设置标题的背景颜色
toolbar.setBackgroundColor(Color.argb((int) 0, 0,0,0));
tvTitle.setAlpha(0);
} else if (scrollY > 0 && scrollY <= high) { //滑动距离小于banner图的高度时,设置背景和字体颜色颜色透明度渐变
float scale = (float) scrollY / high;
Log.i("TAG", "onScrollChange: "+scale);
float alpha = (255 * scale);
tvTitle.setAlpha(1f * scrollY / h);
toolbar.setBackgroundColor(Color.argb((int) alpha, 255,255,255));
} else { //滑动到banner下面设置普通颜色
toolbar.setBackgroundColor(Color.argb((int) 255, 255,255,255));
}
}
});
}