仿京东首页的实现(搜索框在顶部固定)

一.自定义ScrollView 

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

二.布局实现(最外围必须为RelativeLayout )
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/line"
        android:layout_height="100dp"
        android:layout_width="match_parent"

        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="aa"/>
    </LinearLayout>
    <guo.ObservableScrollView
        android:id="@+id/scrollView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        tools:layout_editor_absolutex="8dp"
        tools:layout_editor_absolutey="8dp">
        <LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="BB"
                android:textSize="30dp"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="CC"
                android:textSize="30dp"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="DD"
                android:textSize="30dp"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/> 
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>  <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>  
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>  <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:text="EE"
                android:textSize="30dp"
                android:gravity="center"/>
        </LinearLayout>
    </guo.ObservableScrollView>

</RelativeLayout>

三.代码实现效果

 

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

}

猜你喜欢

转载自blog.csdn.net/qq_30180491/article/details/81084651