效果就是这样,原理很简单
如图,其实页面上有两个相同布局的标题,吸顶标题默认隐藏,然后监听ScrollView滚动的高度Y,当滚动的高度Y大于内容1的高度,吸顶标题显示,反之,隐藏吸顶标题。这样从视觉效果上看,标题具有吸顶效果。
<?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));
}
}
});
}