顶部搜索框背景色渐变

需求:

页面顶部搜索框背景色随着列表的滑动而变色,中间有渐变的效果,如下图

思路:布局画两个起始(透明度为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;
这两句是算法的关键
posted @ 2017-11-20 15:41  嘉禾世兴  阅读(451)  评论(0编辑  收藏  举报