需求:
页面顶部搜索框背景色随着列表的滑动而变色,中间有渐变的效果,如下图
思路:布局画两个起始(透明度为1)和结束(透明度为0)状态的layout,根据滑动的距离,起始布局的透明度逐渐变成0,结束布局的透明度逐渐变成1
<?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.jcodecraeer.xrecyclerview.XRecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout android:id="@+id/searchLayoutInit" android:layout_width="match_parent" android:layout_height="44dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:background="@color/red"> <ImageView android:id="@+id/scanInit" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentRight="true" android:paddingLeft="14dp" android:paddingRight="14dp" android:src="@drawable/btn_scan_white" /> <EditText android:id="@+id/searchEtInit" android:layout_width="match_parent" android:layout_height="30dp" android:layout_centerVertical="true" android:layout_marginLeft="14dp" android:layout_toLeftOf="@id/scanInit" android:background="@color/cFFFFFF" android:drawableLeft="@drawable/icon_search_pages" android:drawablePadding="10dp" android:gravity="center_vertical" android:hint="找课程" android:maxLines="1" android:paddingLeft="10dp" android:paddingRight="10dp" android:singleLine="true" android:textColor="@color/c333333" android:textColorHint="@color/c999999" tools:text="课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程" /> </RelativeLayout> <RelativeLayout android:id="@+id/searchLayout" android:layout_width="match_parent" android:layout_height="44dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:alpha="0" android:background="@color/green"> <ImageView android:id="@+id/scan" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentRight="true" android:paddingLeft="14dp" android:paddingRight="14dp" android:src="@drawable/btn_scan_red" /> <EditText android:id="@+id/searchEt" android:layout_width="match_parent" android:layout_height="30dp" android:layout_centerVertical="true" android:layout_marginLeft="14dp" android:layout_toLeftOf="@id/scan" android:background="@color/cF2F2F2" android:drawableLeft="@drawable/icon_search_pages" android:drawablePadding="10dp" android:gravity="center_vertical" android:hint="找课程" android:maxLines="1" android:paddingLeft="10dp" android:paddingRight="10dp" android:singleLine="true" android:textColor="@color/c333333" android:textColorHint="@color/c999999" tools:text="课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程" /> </RelativeLayout> </RelativeLayout>
final LinearLayoutManager manager = new LinearLayoutManager(getActivity()); recyclerView.setLayoutManager(manager); List<Integer> list = new ArrayList<>(); for (int i = 0; i < 100; i++) { list.add(i); } recyclerView.setAdapter(new TestAdapter(list, getActivity())); final int one = DensityHelp.dip2px(getActivity(), FIRST_LAYOUT_HEIGHT) / 10; recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView t, int dx, int dy) { View first = manager.findViewByPosition(2); int[] location = new int[2]; if (null != first) { first.getLocationOnScreen(location); int y = location[1]; if (y >= 0) { float alpha = (y / one) * 0.1f; searchLayoutInit.setAlpha(alpha); searchLayout.setAlpha(1 - alpha); } } super.onScrolled(recyclerView, dx, dy); } });
final int one = DensityHelp.dip2px(getActivity(), FIRST_LAYOUT_HEIGHT) / 10;
float alpha = (y / one) * 0.1f;
这两句是算法的关键