双重ScrollView,RecyclerView联动实例

时间:2021-04-26 16:16:56

双重ScrollView,RecyclerView联动实例

双重ScrollView,RecyclerView联动实例

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

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

双重ScrollView,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初始化,这个也不难

就搞定了

双重ScrollView,RecyclerView联动实例