仿京东首页悬浮栏导航

我之前做了一个类似京东首页滑动悬浮导航栏的任务。实现方法是先在顶部放一个导航栏，其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>

最后，把效果图放出来：