仿京东首页悬浮栏导航

我之前做了一个类似京东首页滑动悬浮导航栏的任务。实现方法是先在顶部放一个导航栏，其VIsible是Gone,不可见，监听scollview滑动的距离，判断距离是否显示该导航栏。

代码是：

1.ScrollTabView代码

public class ScrollTabView extends NestedScrollView {

    public ScrollTabView(@NonNull Context context) {
        super(context);
    }

    public ScrollTabView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ScrollTabView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(scrollDistanceListener!=null){
            scrollDistanceListener.distance(t);//滑动监听距离
        }
    }

    ScrollDistanceListener scrollDistanceListener;

    public ScrollDistanceListener getScrollDistanceListener() {
        return scrollDistanceListener;
    }

    public void setScrollDistanceListener(ScrollDistanceListener scrollDistanceListener) {
        this.scrollDistanceListener = scrollDistanceListener;
    }

    public interface ScrollDistanceListener{
      void distance(int y);


    }
}

2.activity代码：

public class TabScrollActivity extends AppCompatActivity {

    @BindView(R.id.myrv)
    RecyclerView myrv;
    @BindView(R.id.tab_scroll_view)
    ScrollTabView tabScrollView;
    MyAdapter adapter;
    List<ProductBean> list = new ArrayList<ProductBean>();
    @BindView(R.id.tab1)
    LinearLayout tab1;//顶部导航栏
    @BindView(R.id.tab2)
    LinearLayout tab2;//中部导航栏
    int height = 0;
    @BindView(R.id.iv)
    ImageView iv;
    boolean isview=false;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_scroll_activity_layout);
        ButterKnife.bind(this);
        initData();
        adapter = new MyAdapter(this, list);
        LinearLayoutManager manager = new LinearLayoutManager(this);
        myrv.setLayoutManager(manager);
        myrv.setAdapter(adapter);

        tabScrollView.setScrollDistanceListener(new ScrollTabView.ScrollDistanceListener() {
            @Override
            public void distance(int y) {
                if (height == 0) {
                    height =iv.getMeasuredHeight();//获取需要滑动多少距离才显示悬浮顶部的导航栏，我感觉这样获取view的高度较准确，也可以自己定这个距离
                }
                 if(y>height){
                        if(tab1.getVisibility()==View.GONE){
                            tab1.setVisibility(View.VISIBLE);//当顶部导航栏显示的时候，中部的导航栏隐藏起来比较好，                               
                            tab2.setVisibility(View.GONE); //这样不会出现两个导航栏显示的问题
                        }



                 }else{
                    if(tab1.getVisibility()==View.VISIBLE) {
                        tab1.setVisibility(View.GONE); //同上，当顶部导航栏隐藏的时候，把中部导航栏再显示出来
                        tab2.setVisibility(View.VISIBLE);

                    }
                 }

            }
        });



        tabScrollView.post(new Runnable() { 
            @Override
            public void run() {
                tabScrollView.scrollTo(0,0);
                tabScrollView.smoothScrollTo(0,0);
            }
        });
    }


    void initData() {

        for (int i = 0; i < 10; i++) {
            ProductBean productBean = new ProductBean();
            productBean.setPname("儿童水杯");
            list.add(productBean);
        }


    }

}

 

3.activity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:id="@+id/tab1"
        android:visibility="gone"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="精选"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="新品"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="直播"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="实惠"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="进口"
            android:layout_weight="1"
            />
    </LinearLayout>


<com.example.testdemoactivity.view.ScrollTabView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tab_scroll_view"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
    <ImageView
        android:layout_width="match_parent"
       android:layout_height="wrap_content"
        android:src="@mipmap/hengtu"
        android:scaleType="fitXY"
        android:id="@+id/iv"

        />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="10dp"
            android:id="@+id/tab2"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="精选"
                android:layout_weight="1"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="新品"
                android:layout_weight="1"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="直播"
                android:layout_weight="1"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="实惠"
                android:layout_weight="1"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="进口"
                android:layout_weight="1"
                />
        </LinearLayout>
<androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/myrv"
    />
    </LinearLayout>
</com.example.testdemoactivity.view.ScrollTabView>

</LinearLayout>

最后，把效果图放出来：