仿京东滑动页面搜索框背景渐变

来源：互联网发布：锁 java 编辑：程序博客网时间：2024/05/21 10:02

原文地址：http://blog.csdn.net/qq_39734239/article/details/78504691

最近在做电商项目，看京东的首页搜索框渐变效果十分的不错就找了一些大神的博客

应用到自己的项目就是这个样子

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

提醒（一定要用RelativeLayout布局）

设置控件在布局最上边line.bringToFront();

好了直接上代码

第一步：定义控件

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);        }    }}

定义控件添加监听方法

第二步：布局

<LinearLayout    android:layout_width="match_parent"    android:id="@+id/line"    android:orientation="horizontal"    android:layout_height="100dp"></LinearLayout><com.example.dell.myapplication.ObservableScrollView    android:layout_width="368dp"    android:layout_height="495dp"    android:id="@+id/scrollView"    tools:layout_editor_absoluteY="8dp"    tools:layout_editor_absoluteX="8dp">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        >    </LinearLayout></com.example.dell.myapplication.ObservableScrollView>
scrollview默认只有一个子空间，所以要添加一个布局进行包裹，内容自己加
第三步：Activity.class

import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.LinearLayout;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));                }            }        });    }}

以上就可以实现滑动的导航栏颜色的渐变了。默认添加span标签什么鬼，麻烦自己去一下吧！

谢谢观看！！！

阅读全文

4 0