zoukankan      html  css  js  c++  java
  • 顶部搜索框背景色渐变

    需求:

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

    思路:布局画两个起始(透明度为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;
    这两句是算法的关键
  • 相关阅读:
    第八次作业
    第七次作业2
    jsp第十一次作业
    jsp第十次作业
    jsp第九次作业
    jsp第八次作业
    jsp第七次作业
    jsp第六次作业
    软件测试第二次作业
    jsp第五次作业
  • 原文地址:https://www.cnblogs.com/anni-qianqian/p/7866600.html
Copyright © 2011-2022 走看看