1.先看效果图
2.我的xml文件代码关键点在于:
a.正常代码:在MyScrollView控件中包含着顶部部分layout_top_view
b.在MyScrollView控件同一级,再复制一份相同的顶部代码layout_stick_view,同样是居于顶部,当然两个布局的背景色和图片,你可以任意自定义
注意:以下是简化了的布局代码
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.example.jingbin.zkfudou.view.MyScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/color_F7F4F8"
tools:context=".ui.GoodDetailActivity">
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_top"
android:layout_width="match_parent"
android:layout_height="320dp"
android:orientation="vertical">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@null"
app:indicator_drawable_selected="@drawable/banner_selected"
app:indicator_drawable_unselected="@drawable/banner_unselected"
app:indicator_height="3dp"
app:indicator_margin="5dp"
app:indicator_width="14dp" />
<RelativeLayout
android:id="@+id/layout_top_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="clickBack"
android:padding="14dp"
android:layout_marginTop="25dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="centerCrop"
android:src="@mipmap/icon_detail_back" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:onClick="onClickShare"
android:padding="14dp"
android:layout_marginTop="25dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="centerCrop"
android:src="@mipmap/icon_share_white" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</com.example.jingbin.zkfudou.view.MyScrollView>
<RelativeLayout
android:id="@+id/layout_stick_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:visibility="gone">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="clickBack"
android:padding="14dp"
android:layout_marginTop="25dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="centerCrop"
android:src="@mipmap/icon_detail_back_33" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:onClick="onClickShare"
android:padding="14dp"
android:layout_marginTop="25dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="centerCrop"
android:src="@mipmap/icon_share" />
</RelativeLayout>
</RelativeLayout>
复制代码
2.给scrollView控件添加滑动监听
监听scrollView的滑动y坐标的距离,动态控制两个顶部布局(layoutTopView和layoutStickView)的显示和隐藏,以及设置动画效果
scrollView.setScrollViewListener(new MyScrollView.ScrollViewListener() {
@Override
public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) {
if (y <= 0) {
layoutStickView.setVisibility(View.GONE);
layoutStickView.setBackgroundColor(Color.argb((int) 0, 227, 29, 26));//AGB由相关工具获得,或者美工提供
} else if (y > 0 && y <= layoutTopView.getHeight()) {
layoutStickView.setVisibility(View.VISIBLE);
//获取ScrollView向下滑动图片消失的比例
float scale = (float) y / layoutTopView.getHeight();
//更加这个比例,让标题颜色由浅入深
float alpha = (255 * scale);
// 只是layout背景透明
layoutStickView.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
}else {
layoutStickView.setVisibility(View.VISIBLE);
layoutStickView.setBackgroundColor(getResources().getColor(R.color.colorWhite));
}
}
});
复制代码