双重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初始化,这个也不难
就搞定了