上滑下滑 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;
                }
            }
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章