先上个动图:
UI结构
代码实现:
xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<app.myap.eyecloudtest.utils.CustomScrollView
android:id="@+id/scrollView_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="260dp"
custom:auto_cycle="true"
custom:indicator_visibility="visible"
custom:pager_animation="FlipPage"
custom:pager_animation_span="1100" />
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#00b7ee"
android:text="hahha" />
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="50dp"
android:background="#00b7ee"
android:text="hahha" />
</LinearLayout>
</app.myap.eyecloudtest.utils.CustomScrollView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="70dp">
<LinearLayout
android:id="@+id/header_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
</LinearLayout>
<RelativeLayout
android:id="@+id/ll_m"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="@drawable/icon_main_add" />
<TextView
android:id="@+id/header_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center_vertical"
android:text="眼云智家"
android:textColor="#ffffff"
android:textSize="20sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:src="@drawable/icon_main_ma" />
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</FrameLayout>
java代码,主要用到了一个依赖
compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-2'
compile 'com.jaeger.statusbarutil:library:1.5.1'
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
StatusBarUtil.setTranslucentForImageViewInFragment(getActivity(), 0, null);
StatusBarUtil.setDarkMode(getActivity());
addBanner();
addScrollViewListener();
}
/**
* 添加滑动监听
* (重点在这)
*/
private void addScrollViewListener() {
headerView.setAlpha(0);
final int h = dpTopx(100);
scrollViewMain.setOnScrollChangeListener(new CustomScrollView.OnScrollChangeListener() {
@Override
public void onScrollChanged(CustomScrollView scrollView, int l, int y, int oldl, int oldt) {
if (y > 0 && y <= h) {
float scale = (float) y / h;
headerView.setAlpha(scale);
}
if (y < 30) {
StatusBarUtil.setDarkMode(getActivity());
headerTitle.setTextColor(Color.WHITE);
} else {
StatusBarUtil.setLightMode(getActivity());
headerTitle.setTextColor(Color.BLACK);
}
}
});
}