版权声明:转载必须注明本文转自郭子轩的博客 https://blog.csdn.net/gpf1320253667/article/details/82734048
效果图如下:
实现步骤:
1、继承ScrollView实现自定义的ObservableScrollView.java类,代码如下:
public class ObservableScrollView extends ScrollView {
/**
* 回调接口监听事件
*/
private OnObservableScrollViewListener mOnObservableScrollViewListener;
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);
}
/**
* 添加回调接口,便于把滑动事件的数据向外抛
*/
public interface OnObservableScrollViewListener {
void onObservableScrollViewListener(int l, int t, int oldl, int oldt);
}
/**
* 注册回调接口监听事件
*
* @param onObservableScrollViewListener
*/
public void setOnObservableScrollViewListener(OnObservableScrollViewListener onObservableScrollViewListener) {
this.mOnObservableScrollViewListener = onObservableScrollViewListener;
}
/**
* 滑动监听
* This is called in response to an internal scroll in this view (i.e., the
* view scrolled its own contents). This is typically as a result of
* {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
* called.
*
* @param l Current horizontal scroll origin. 当前滑动的x轴距离
* @param t Current vertical scroll origin. 当前滑动的y轴距离
* @param oldl Previous horizontal scroll origin. 上一次滑动的x轴距离
* @param oldt Previous vertical scroll origin. 上一次滑动的y轴距离
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnObservableScrollViewListener != null) {
//将监听到的数据向外抛
mOnObservableScrollViewListener.onObservableScrollViewListener(l, t, oldl, oldt);
}
}
}
2、页面布局代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.administrator.myapplication.widgets.ObservableScrollView
android:id="@+id/sv_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_main_topContent"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="#b5b433"
android:gravity="center"
android:src="@mipmap/ic_launcher"
android:text="我是头部"
android:textSize="22sp" />
<TextView
android:id="@+id/tvShow"
android:layout_width="match_parent"
android:layout_height="600dp"
android:background="#ffffff"
android:gravity="center"
android:src="@mipmap/ic_launcher"
android:text="我是内容"
android:textSize="22sp" />
</LinearLayout>
</com.example.administrator.myapplication.widgets.ObservableScrollView>
<include layout="@layout/include_header_itl" />
</RelativeLayout>
3、include_header_itl.xml为顶部标题栏布局文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_header_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:paddingTop="25dp">
<ImageView
android:id="@+id/iv_header_left"
android:layout_width="40dp"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="12dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/tv_header_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:gravity="center"
android:maxLines="2"
android:text="我是标题"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/iv_header_img"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="8dp"
android:src="@mipmap/ic_launcher" />
</RelativeLayout>
</LinearLayout>
4、主页面逻辑代码:
public class FragmentTab02 extends BaseFragment implements ObservableScrollView.OnObservableScrollViewListener {
@BindView(R.id.sv_main_content)
ObservableScrollView mObservableScrollView;
@BindView(R.id.tv_main_topContent)
TextView tvImage; // 标题栏覆盖下的头部
@BindView(R.id.ll_header_content)
LinearLayout mHeaderContent; // 标题栏
@BindView(R.id.tvShow)
TextView tvShow; // 标题栏覆盖下的内容
private int mHeight;
@Override
protected int getContentViewId() {
return R.layout.fragment_tab02;
}
@Override
protected void initData() {
// 设置沉浸式效果,或者在fragment所依附的activity中设置也可以
setStatusBarTranslucent(getActivity());
//注册滑动监听
mObservableScrollView.setOnObservableScrollViewListener(Fragment2Tab02.this);
}
/**
* 我们可以利用OnGlobalLayoutListener来获得一个视图的真实高度
* 但是需要注意的是OnGlobalLayoutListener可能会被多次触发,因此在得到了高度之后,要将OnGlobalLayoutListener注销掉
* 注意在fragment中使用:
* 如果有多个fragment通过show和hide显示和隐藏,并且进入activity后显示的不是这个fragment,那么在onViewCreate()里调用此方法测得的宽高依然为0!
* 解决方案:
* 重写onHiddenChanged()方法,并在里面判断当fragment不隐藏的时候调用此方法即可正常获取,如下:
*/
@Override
public void onHiddenChanged(boolean hidden) {
super.onHiddenChanged(hidden);
if (!hidden) {
final ViewTreeObserver viewTreeObserver = tvImage.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
tvImage.getViewTreeObserver().removeOnGlobalLayoutListener(this);
mHeight = tvImage.getHeight() - mHeaderContent.getHeight();//这里取的高度应该为图片的高度-标题栏
}
});
}
}
/**
* 获取ObservableScrollView的滑动数据
*
* @param l
* @param t
* @param oldl
* @param oldt
*/
@Override
public void onObservableScrollViewListener(int l, int t, int oldl, int oldt) {
if (t <= 0) {
//顶部图处于最顶部,标题栏透明
mHeaderContent.setBackgroundColor(Color.argb(0, 48, 63, 159));
} else if (t > 0 && t < mHeight) {
//滑动过程中,渐变
float scale = (float) t / mHeight;//算出滑动距离比例
float alpha = (255 * scale);//得到透明度
mHeaderContent.setBackgroundColor(Color.argb((int) alpha, 48, 63, 159));
} else {
//过顶部图区域,标题栏定色
mHeaderContent.setBackgroundColor(Color.argb(255, 48, 63, 159));
}
}
@OnClick(R.id.tvShow)
public void onClick(){
startActivity(new Intent(mActivity, SearchActivity.class));
}
/**
* 设置activity全屏,状态栏透明,内容填充到状态栏中
*/
public static void setStatusBarTranslucent(Activity activity) {
// 5.0 以上
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
View decorView = activity.getWindow().getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
}
重要知识点:
final ViewTreeObserver viewTreeObserver = tvImage.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
tvImage.getViewTreeObserver().removeOnGlobalLayoutListener(this);
mHeight = tvImage.getHeight() - mHeaderContent.getHeight();//这里取的高度应该为图片的高度-标题栏
}
});
使用上述代码获取控件宽高时,如果是在Activity中,那么可直接在onCreate方法中使用,但如果有多个fragment通过show和hide显示和隐藏,并且进入activity后显示的不是这个fragment,那么在onViewCreate()里调用此方法测得的宽高依然为0!,此例子就是,该效果是在第二个Fragment中实现的,并且该fragment也是通过show和hide控制显示和隐藏。
解决方案:
重写onHiddenChanged()方法,并在里面判断当fragment不隐藏的时候调用此方法即可正常获取,如上面的写法。