仿京东滑动页面搜索框背景渐变实现方法

这里主要的两个控件就是 Linelayout(包裹的是搜索框部分) Scrollview(包裹的滑动整体页面)

提醒（一定要用RelativeLayout布局）

设置控件在布局最上边line.bringToFront();//相当于改变Z轴

好了直接上代码

第一步：定义控件

public class ObservableScrollView extends ScrollView {
 
    public interface ScrollViewListener {
 
        void onScrollChanged(ObservableScrollView scrollView, int x, int y,
                             int oldx, int oldy);
    }
    private ScrollViewListener scrollViewListener = null;
 
    public ObservableScrollView(Context context) {
        super(context);
    }
 
    public ObservableScrollView(Context context, AttributeSet attrs,
                                int defStyle) {
        super(context, attrs, defStyle);
    }
 
    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }
    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }
}

定义控件添加监听方法

第二步：布局

scrollview默认只有一个子空间，所以要添加一个布局进行包裹，内容自己加
第三步：Activity.class

public class MainActivity extends AppCompatActivity {
 
    private LinearLayout line;
    private ObservableScrollView scrollView;
    private int imageHeight=300; //设置渐变高度，一般为导航图片高度，自己控制
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //查找控件
        line= (LinearLayout) findViewById(R.id.line);
        scrollView= (ObservableScrollView) findViewById(R.id.scrollView);
        //搜索框在布局最上面
        line.bringToFront();
        //滑动监听
        scrollView.setScrollViewListener(new ObservableScrollView.ScrollViewListener() {
            @Override
            public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
                if (y <= 0) {
                    line.setBackgroundColor(Color.argb((int) 0, 227, 29, 26));//AGB由相关工具获得，或者美工提供
                } else if (y > 0 && y <= imageHeight) {
                    float scale = (float) y / imageHeight;
                    float alpha = (255 * scale);
                    // 只是layout背景透明
                    line.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));
                } else {
                    line.setBackgroundColor(Color.argb((int) 255, 227, 29, 26));
                }
            }
        });
 
    }