顶部搜索框背景色渐变

需求:

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

思路:布局画两个起始(透明度为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 @   嘉禾世兴  阅读(459)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示