上滑下滑 viewpager + tablayout 跨頁面 Behavior聯動效果

跨頁面實現聯動效果

GitHub:https://github.com/sunan-n/GetAppInfo

Behavior實現 viewpager + tablayout 上下滑動隱藏顯示tablayout ,聯動main 頁面的底部導航欄也一起顯示隱藏

找了一下,基本上都是單頁面的Behavior實現的效果,要麼就是自定義Behavior來實現各種view的交互的,沒有demo是跨頁面來實現頂部底部聯動的,,可能是別人家的產品沒那麼皮吧
先說一下 實現思路,
viewpager + tablayout 頁面 也就是 有滑動view RecyclerView 或者 NestedScrollView或者別的View,就用系統自帶的appbar_scrolling_view_behavior 這個 屬性就可以,看佈局:

TabLayout 需要用AppBarLayout去包裹一下,不然 因爲是父佈局CoordinatorLayout 屬性類似FrameLayout,TabLayout會和viewpager 重疊,
AppBarLayout 加上屬性:
android:background="@null" 去掉AppBarLayout背景色,
app:elevation=“0dp” 去掉陰影效果,
就不會影響 TabLayout 的樣式了

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        app:elevation="0dp">

        <com.flyco.tablayout.SlidingTabLayout
            android:id="@+id/slidingTabLayout"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            app:layout_scrollFlags="scroll|enterAlways"
            tl:tl_indicator_color="#333333"
            tl:tl_indicator_height="3dp"
            tl:tl_indicator_width="17dp"
            tl:tl_textAllCaps="true"
            tl:tl_textBold="BOTH"
            tl:tl_textSelectColor="#333333"
            tl:tl_textSelectsize="20sp"
            tl:tl_textUnselectColor="#999999"
            tl:tl_textUnselectsize="15sp"
            tl:tl_textsize="20sp"
            tl:tl_underline_height="0dp" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

列表頁面頂部的聯動效果就OK了,問題是 列表 滑動的時候 怎麼讓main 底部的tab欄也跟着聯動,
是不是想到了 main.xml 裏也用 CoordinatorLayout 加上Behavior 屬性?
你會發現,只生效了一個 Behavior

只能通過滑動事件的傳遞 監聽 去丟給main 頁面自行處理了
監聽recyclerView的滑動 判斷滑動方向 發送 顯示或者隱藏的廣播
然後main頁面 判斷 廣播是 true 或者false 讓tab欄 顯示 隱藏就可以了


        boolean isShow = true;
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (dy < 0 && !isShow) {
                    // TODO: 2020-03-10 發送顯示廣播 保證同一個狀態 廣播只發送一次 避免浪費性能
                    sendBroadcast(true);
                    isShow = true;
                }
                if (dy > 0 && isShow) {
                    // TODO: 2020-03-10 發送隱藏廣播
                    sendBroadcast(false);
                    isShow = false;
                }
            }
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章