最近收到一个需求,如图,大家一看,不就是一个简单的表格吗,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联动实例的更多相关文章

  1. Android实现两个ScrollView互相联动,同步滚动的效果

    公众号:smart_android 作者:loonggg 点击"阅读原文",可查看更多内容和干货 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意 ...

  2. RecyclerView联动滑动失败

    RecyclerView联动滑动失败 我们在做Recyclerview联动滑动的时候,就是左边一个RecyclerView右边一个RecyclerView 我们希望左边的RecyclerView可以和 ...

  3. “京东金融”主页效果 RecyclerView联动

    先上效果图吧: 第一个想到的实现方式是上面使用horizontalScrollview,下面使用Viewpager,经过尝试之后发现二者API有限,不能达到理想效果.几经折腾,最后上下都使用了自定义的 ...

  4. android开发学习 ------- RecyclerView多类型实例

    实现RecyclerView多类型的实例:效果如下图所示 public class CarFragment extends Fragment{ private View view; private R ...

  5. Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  6. JS三级联动实例

    简单的HTML实例: <h4>选择省</h4> <div class="selectSheng"></div> <select ...

  7. scroll-view组件bindscroll实例应用:自定义滚动条

    我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸])嗯,没错.自己 ...

  8. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)

    <template> <div> <div class="navbox"> <div class="nav"> ...

随机推荐

  1. 【原创】canvas裁剪上传图片异步提交

    <!DOCTYPE html> canvas裁剪图片,纯前端 裁剪文件 后台返回获取裁剪后的文件

  2. 透析SOA、RPC、SOAP、REST、ICE、ESB模型发展史

    最初的程序全是单机程序,没有网络,没有RPC,更没有RESTful.程序猿写的东西孤独运行在单机上. 那时的程序猿们语言相通,参与开发同一套系统的团队可以面对面沟通. 网络出现了.网络,也带来变乱.网 ...

  3. ABP 2.0.2 升到 2.2.1

    1.选择解决方案 右键 管理 nuget 更新 输入abp 这里只升级 abp的包 点升级 2.update-database  可能需要你添加个迁移(这一步可能不需要) 3.Core 项目下面的Au ...

  4. 解决Linux 环境 GLIBCXX_3.4.15' not found问题

    升级Centos系统之后,运行filezilla时,出现如下错误的提示信息: ./filezilla: /usr/lib/libstdc++.so.6: version `GLIBCXX_3.4.15 ...

  5. jquery.uploadify上传插件HTML5版中文api使用说明

    插件官网文档:http://www.uploadify.com/documentation/ H5版下载地址:https://download.csdn.net/download/u010075697 ...

  6. Linux格式化、挂载及卸载数据盘

    注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有数据,请务必对数据进行备份以避免可能的数据丢失. 服务器仅支持对 数据盘 进行分区,而不支持对  ...

  7. JavaFX-Stage

    1.Stage类继承自Window类,继承了Window类的show()方法,Stage的close()方法实际上是调用了继承自Window类的hide()方法.另外还有Window的setOpaci ...

  8. tomcat是什么?Tomcat 下载、安装、配置图文教程

    你用浏览器上网的所有操作,所有请求发送给服务器(tomcat),服务器通过请求,找相应的逻辑处理程序(jsp或servelet或java类,就是有关java语言的所有可以处理逻辑的代码,其中包括访问后 ...

  9. jmeter接口/性能压测入门

    1.相关知识 https://www.cnblogs.com/star91/p/5059222.html http://www.51testing.com/zhuanti/jmeter.html 测试 ...

  10. flutter 读写文件

    import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; import 'd ...