话不多说,上效果图
随着用户往底下滑动,标题栏渐渐展示出来
1、自定义滑动控件,继承ScrollView,重写3个方法,加上滑动监听和一个接口回调
public class ObservableScrollView extends ScrollView {
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//ScrollView提供的有一个滑动监听方法,但是外界调用不到,所以我们还是要进行接口的暴露
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mScrollViewListener!=null){
mScrollViewListener.onScrollChange(this,l,t,oldl,oldt);
}
}
//接口回调
public interface ScrollViewListener{
void onScrollChange(ObservableScrollView scrollView,int l, int t, int oldl, int oldt);
}
private ScrollViewListener mScrollViewListener;
//提供方法 让外界设置监听对象
public void setmScrollViewListener(ScrollViewListener mScrollViewListener) {
this.mScrollViewListener = mScrollViewListener;
}
}
2、xml布局对其进行引用
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ScollViewActivity">
<com.wd.tech.custom.ObservableScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_detail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:textSize="40sp"
android:text="孔乙己一到店,所有喝酒的人便都看着他笑,...."/>
</LinearLayout>
</LinearLayout>
</com.wd.tech.custom.ObservableScrollView>
<!-- 此处为顶部标题栏-->
<RelativeLayout
android:id="@+id/layout_title"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="top"
android:padding="5dp">
<TextView
android:id="@+id/tv_titlebar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#ff666666"
android:textSize="20dp"
android:visibility="gone"/>
</RelativeLayout>
</RelativeLayout>
3、初始化完控件后
//获取视图树的监听,我们得到视图树绘制完毕,我们再去得到控件的高度
ViewTreeObserver viewTreeObserver = iv_detail.getViewTreeObserver();
//使用视图观察者设置监听,以便获取所观察控件的高度
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//回调监听后的,第一件事情就是移除监听,减少内存的消耗
iv_detail.getViewTreeObserver().removeOnGlobalLayoutListener(this);
//得到控件高度(此变量上面定义int型)
mImageHeight = iv_detail.getHeight();
}
});
调用滑动监听,对标题栏设置渐变
//使用我们的自定义ScrollView滚动的监听,滑动超过图片的高度,标题显示出来
scrollView.setmScrollViewListener(new ObservableScrollView.ScrollViewListener() {
@Override
public void onScrollChange(ObservableScrollView scrollView, int l, int t, int oldl, int oldt) {
//对t参数进行判断,两种形态,一种消失没有 ; 随着滑动颜色越来越深
Log.d("1801", t + "");
if (t < 0) {
//设置标题隐藏
tv_titlebar.setVisibility(View.GONE);
//标题背景透明
layout_title.setBackgroundColor(Color.argb(0, 0, 0, 0));
} else if (t > 0 && t < mImageHeight) {
//让标题显示出来
tv_titlebar.setVisibility(View.VISIBLE);
//获取ScrollView向下滑动,图片消失部分的比例
float scale = (float) t / mImageHeight;
//根据这个比例,让标题的颜色慢慢由浅到深
float alpha = 255 * scale;
//设置标题的内容及颜色
tv_titlebar.setText("孔乙己");
tv_titlebar.setTextColor(Color.argb((int) alpha, 0, 0, 0));
//设置标题布局颜色
layout_title.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
}
}
});
以上就完成了。