• 双重ScrollView,RecyclerView联动实例


    最近收到一个需求,如图,大家一看,不就是一个简单的表格吗,RecyclerView就搞定了

    我一开始也是这么想的,但是当我继续听下去

    需求是左边党支部栏目只能上下滑动,之后联动右边下方表格一起上下滑动,右边下方表格滑动,左边下方表格依然如此

    然后右边上方只能左右滑动,之后联动右边下方表格一起左右滑动,右下方滑动,右上同样一起滑动

    然后此时我的内心是崩溃的

    收集几个关键点吧

    1:右下方部分既能左右滑动,又可以上下滑动

    2:左上角就是一个TextView,不动

    3:需要对RecyclerView进行联动

    4:ListView应该也可以实现,但是我使用了扩展性更好的RecyclerView

    5:RecyclerView不可以既左右滑动,又上下滑动,即他只能支持一个方向

    所以基本有思路了

    RecyclerView放在ScrollView容器内,上下滑动做RecyclerView联动

    左右滑动做ScrollView联动

    下面看xml layout代码吧

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:gravity="center_vertical"
            android:layout_height="40dp">
    
            <LinearLayout
                android:gravity="center"
                android:layout_width="120dp"
                android:background="@color/gray_trans"
                android:layout_height="match_parent">
    
                <TextView
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:text="党支部"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
    
            </LinearLayout>
    
            <demo.MyScrollView
                android:id="@+id/scrollView_right_up"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:layout_height="wrap_content">
    
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
    
                    <demo.MyRecyclerView
                        android:id="@+id/recyclerview_right_up"
                        android:layout_width="match_parent"
                        android:layout_height="40dp">
    
                    </demo.MyRecyclerView>
    
                </RelativeLayout>
    
            </demo.MyScrollView>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerview_left_bottom"
                android:layout_width="119dp"
                android:layout_height="match_parent">
            </android.support.v7.widget.RecyclerView>
    
            <View
                android:background="@color/gray_trans"
                android:layout_width="1dp"
                android:layout_height="match_parent"/>
    
    
            <demo.MyScrollView
                android:id="@+id/scrollView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
    
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
    
                    <demo.MyRecyclerView
                        android:id="@+id/recyclerview_right_bottom"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
    
                        >
                    </demo.MyRecyclerView>
    
                </RelativeLayout>
    
            </demo.MyScrollView>
    
        </LinearLayout>
    
    </LinearLayout>

    其中MyScrollView是重写的暴露了onScrollChanged 方法,之后我们可以setOnScrollListener对其滑动进行监听

    MyRecyclerView重写以及为什么要套一层RelativeLayout请看我上一篇文章解释

     然后放出关键的联动滑动代码吧

       public void setOnScrollLowSdk(){
    
            recyclerViewLeftBottom.addOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                    if(recyclerView.getScrollState()!= RecyclerView.SCROLL_STATE_IDLE){
                        recyclerViewRightBottom.scrollBy(dx, dy);
                    }
                }
            });
    
            recyclerViewRightBottom.addOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                    if(recyclerView.getScrollState()!= RecyclerView.SCROLL_STATE_IDLE){
    
                        recyclerViewLeftBottom.scrollBy(dx,dy);
                    }
                }
            });
    
            scrollViewRB.setOnScrollListener(new MyScrollView.OnScrollListener() {
                @Override
                public void onScroll(int scorllX, int scrollY, int oldX, int oldY) {
    
                    scrollViewRU.scrollTo(scorllX,scrollY);
                }
            });
    
            scrollViewRU.setOnScrollListener(new MyScrollView.OnScrollListener() {
                @Override
                public void onScroll(int scorllX, int scrollY, int oldX, int oldY) {
                    scrollViewRB.scrollTo(scorllX,scrollY);
                }
            });
    
        }

    命名的话应该可以看懂RU代表RightUp右上方,RB代表RightBottom右下方

    至此就可以了,省去了RecyclerView数据填充以及各种的LayoutManager初始化,这个也不难

    就搞定了

     

  • 相关阅读:
    在vue中引入layer弹框的简易方法
    in ./node_modules/qs/lib/index.js Module build failed: Error: ENOENT: no such file or directory, o
    vue路由传参的三种基本方式
    跳转路由时传参,elementUI的table表格点击对应行,获取对应行的数据;更改el-table头部样式
    用Vue写移动端时有哪些UI框架
    1月25日学习日志
    1月22日学习日志
    1月21日学习日志
    1月20日学习日志
    1月19日学习日志
  • 原文地址:https://www.cnblogs.com/fengfenghuifei/p/10602583.html
Copyright © 2020-2023  润新知