布局代码
<?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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:elevation="0dp">
<!--layout_scrollFlags
enterAlways永远先记着自己滚
enterAlwaysCollapsed先记着自己滚一点等到头了在全展开
exitUntilCollapsed永远先记着别人滚
snap类似viewpager的吸附效果
-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f7f7f7"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- 这里便是顶部会划走的内容 -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="350dp" />
</RelativeLayout>
<!-- layout_collapseMode=””
1、 pin
在view折叠的时候Toolbar仍然被固定在屏幕的顶部。
2、 parallax
设置为这个模式时,在内容滚动时,
CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,
通常和layout_collapseParallaxMultiplier(设置视差因子,值为0~1)搭配使用。-->
<!-- toolbar 跟Collapsingtoolbarlayout联动-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbaretail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin">
<!-- 这就是一个动态计算状态栏高度的自定义控件-->
<com.example.myapplication.util.StatusBarHeightView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:use_type="use_padding_top">
<!--这里放内容布局或View-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#000000">
</androidx.constraintlayout.widget.ConstraintLayout>
</com.example.myapplication.util.StatusBarHeightView>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!--tablyout
这是会吸顶的内容
不多介绍-->
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorColor="#FF791F"
app:tabIndicatorFullWidth="false"
app:tabRippleColor="@android:color/transparent"
app:tabSelectedTextColor="#656565"
app:tabTextColor="#7a7d83" />
</com.google.android.material.appbar.AppBarLayout>
<!-- 这个是底部滑动内容,可以用recyclerview,也可已放其他可滑动的控件-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_rlv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
java代码 做toolbar渐变
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.BaseOnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//verticalOffset 当前偏移量 appBarLayout.getTotalScrollRange() 最大高度 便宜值
Log.e("偏移量", verticalOffset + "");
Log.e("appbar高度", appBarLayout.getTotalScrollRange() + "");
int Offset = Math.abs(verticalOffset); //目的是将负数转换为绝对正数;
//标题栏的渐变
toolbaretail.setBackgroundColor(changeAlpha(getResources().getColor(R.color.white)
, Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
if (Offset >= appBarLayout.getTotalScrollRange()) {
} else {
}
}
});
/**
* 根据百分比改变颜色透明度
*/
public int changeAlpha(int color, float fraction) {
int alpha = (int) (Color.alpha(color) * fraction);
return Color.argb(alpha, 255, 0, 0);
}
记录下,以后直接copy
网友评论