Android滑动冲突的完美解决方案

概述关于滑动冲突在Android开发中，如果是一些简单的布局，都很容易搞定，但是一旦涉及到复杂的页面，特别是为了兼容小屏手机而使用了ScrollView以后，就会出现很多点击事件的冲突，最经典的就是ScrollView中嵌套了List

关于滑动冲突

在AndroID开发中，如果是一些简单的布局，都很容易搞定，但是一旦涉及到复杂的页面，特别是为了兼容小屏手机而使用了ScrollVIEw以后，就会出现很多点击事件的冲突，最经典的就是ScrollVIEw中嵌套了ListVIEw。我想大部分刚开始接触AndroID的同学们都踩到过这个坑，下面跟着小编一起来看看解决方案吧。。

同方向滑动冲突

比如ScrollVIEw嵌套ListVIEw，或者是ScrollVIEw嵌套自己

这里先看一张效果图

上图是在购物软件上常见的上拉查看图文详情，关于这中动画效果的实现，其实实现整体的效果，办法是有很多的，网上有很多相关的例子，但是对某些细节的处理不是很清晰，比如，下拉之后显示的部分（例如底部的图文详情）又是一个类ScrollVIEw的控件（比如WebVIEw）的话，又会产生新的问题。这里就以下拉查看图文详情为背景做一下同方向滑动冲突的分析。

整体思路
这里看下图

多个ScrollVIEw嵌套示意图

首先，关于这张图做一些设定：

     1.黑色的框代表手机屏幕

     2.绿色的框代表一个外层的ScrollVIEw

     3.两个红色的框代表嵌套在里面的两个类ScrollVIEw控件，这里我们就暂时简称为 SUp,SDown

好了，接下来就分析一下实现整个流程的过程。

这里必须明确的一点，无论何时，SUp和SDown可见的部分始终是手机屏幕的高度。知道了这一点，我们就可以按以下步骤展开

首先，我们确保外部的ScrollVIEw不拦截滑动事件，这样SUp必然获得此次事件，然后根据其Action_Move事件，当其为向下滑动且自身滑动距离+屏幕高度=其自身高度 时，即可认为SUp滑动到了底部，此时外部ScrollVIEw可拦截滑动事件，从而保证整个视图能够继续向下滑动，这个时候底部SDown就显示出来了。

同理，这时候不允许外部ScrollVIEw拦截滑动事件，由SDown处理，根据其Action_move事件，当其为向上滑动，且自身可滑动距离为0时，就说明SDown已经滑动到了顶部，这时外部ScrollVIEw又可以获得拦截滑动事件的权利，从而保证整个视图能够向上继续滑动，此时SUp再次显示，又开始新一轮循环拦截。

这样整体的一个流程就可以实现动图中的效果。好了，说完原理，还是看代码。

代码实现

SUp实现

public class UpScrollVIEw extends ScrollVIEw { /** * 屏幕高度 */ private int mScreenHeight; /** * 上一次的坐标 */ private float mLastY; /** * 当前VIEw滑动距离 */ private int mScrollY; /** * 当前VIEw内子控件高度 */ private int mChildH; public UpScrollVIEw(Context context) { super(context); init(context); } public UpScrollVIEw(Context context,AttributeSet attrs) { super(context,attrs); init(context); } public UpScrollVIEw(Context context,AttributeSet attrs,int defStyleAttr) { super(context,attrs,defStyleAttr); init(context); } private voID init(Context context) { WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); displayMetrics dm = new displayMetrics(); wm.getDefaultdisplay().getMetrics(dm); mScreenHeight = dm.heightPixels; } @OverrIDe public boolean ontouchEvent(MotionEvent ev) { //默认设定顶层VIEw不拦截 getParent().getParent().requestdisallowIntercepttouchEvent(true); switch (ev.getAction()) {  case MotionEvent.ACTION_DOWN:  mLastY = (int) ev.getY();  break;  case MotionEvent.ACTION_MOVE:  float y = ev.getY();  float deltaY = y - mLastY;  mChildH = this.getChildAt(0).getMeasuredHeight();  int translateY = mChildH - mScrollY;  //向上滑动时，如果translateY等于屏幕高度时，即表明滑动到底部，可又顶层VIEw控制滑动  if (deltaY < 0 && translateY == mScreenHeight) {   getParent().getParent().requestdisallowIntercepttouchEvent(false);  }  break;  default:  break; } return super.ontouchEvent(ev); } @OverrIDe protected voID onScrollChanged(int l,int t,int oldl,int oldt) { super.onScrollChanged(l,t,oldl,oldt); mScrollY = t; }}

这里在ACTION_MOVE里做了减法，其实道理是一样的。

onScrollChanged 是在VIEw类中实现，查看其API可以看到其第二个参数t解释

@param t Current vertical scroll origin.

即为当前VIEw此次滑动的距离

SDown实现

public class MyWebVIEw extends WebVIEw { public float oldY; private int t; public MyWebVIEw(Context context) { super(context); init(); } public MyWebVIEw(Context context,attrs); init(); } public MyWebVIEw(Context context,defStyleAttr); init(); } private voID init() { WebSettings settings = getSettings(); settings.setJavaScriptEnabled(true); setWebVIEwClIEnt(new WebVIEwClIEnt() {  @OverrIDe  public boolean shouldOverrIDeUrlLoading(WebVIEw vIEw,String url) {  vIEw.loadUrl(url);  return true;  } }); } @OverrIDe public boolean ontouchEvent(MotionEvent ev) { getParent().getParent().requestdisallowIntercepttouchEvent(true); switch (ev.getAction()) {  case MotionEvent.ACTION_DOWN:  oldY = ev.getY();  break;  case MotionEvent.ACTION_MOVE:  float Y = ev.getY();  float Ys = Y - oldY;  if (Ys > 0 && t == 0) {   getParent().getParent().requestdisallowIntercepttouchEvent(false);  }  break; } return super.ontouchEvent(ev); } @OverrIDe protected voID onScrollChanged(int l,int oldt) { this.t = t; super.onScrollChanged(l,oldt); }}

以上看到，这里底部的VIEw并没有继承ScrollVIEw，而是选择继承了WebVIEw，这里只是为了方便，当然继承ScrollVIEw也是没有问题。这里只是需要按实际情况考虑，因为底部图文详情的内容就是一个WebVIEw加载数据。

这个类的实现，按照之前说的原理应该很好理解。

外部ScrollVIEw

public class CustomerScrollVIEws extends ScrollVIEw { /** * 屏幕高度 */ private int mScreenHeight; private UpScrollVIEw upScrollVIEw; private MyWebVIEw myWebVIEw; private boolean init = false; private float fator = 0.2f; private int factorHeight; private boolean upShow = true; public CustomerScrollVIEws(Context context) { super(context); init(context); } public CustomerScrollVIEws(Context context,attrs); init(context); } public CustomerScrollVIEws(Context context,defStyleAttr); init(context); } private voID init(Context context) { WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); displayMetrics dm = new displayMetrics(); wm.getDefaultdisplay().getMetrics(dm); mScreenHeight = dm.heightPixels; factorHeight = (int) (mScreenHeight * fator); } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) { if (!init) {  linearLayout parentVIEw = (linearLayout) getChildAt(0);  //获得内部的两个子vIEw  upScrollVIEw = (UpScrollVIEw) parentVIEw.getChildAt(0);  myWebVIEw = (MyWebVIEw) parentVIEw.getChildAt(2);//  //并设定其高度为屏幕高度  upScrollVIEw.getLayoutParams().height = mScreenHeight;  myWebVIEw.getLayoutParams().height = mScreenHeight;  init = true; } super.onMeasure(wIDthMeasureSpec,heightmeasureSpec); } @OverrIDe protected voID onLayout(boolean changed,int l,int r,int b) { super.onLayout(changed,l,r,b); if (changed) {  scrollTo(0,0); } } @OverrIDe public boolean ontouchEvent(MotionEvent ev) { switch (ev.getAction()) {  case MotionEvent.ACTION_UP:  int scrollY = getScrollY();  if (upShow) {   if (scrollY <= factorHeight) {   smoothScrollTo(0,0);   } else {   smoothScrollTo(0,mScreenHeight);   upShow = false;   }  } else {   int scrollpadding = mScreenHeight - scrollY;   if (scrollpadding >= factorHeight) {   this.smoothScrollTo(0,0);   upShow = true;   } else {   this.smoothScrollTo(0,mScreenHeight);   }  }  return true; } return super.ontouchEvent(ev); }}

这个类的实现，就很灵活了，在onMeasure方法中初始化完内部的VIEw之后，在Ontouch方法中就可以根据实际需求完成不同的逻辑实现，这里只是为了仿照查看图文详情的效果，对整个视图通过ScrollVIEw的smoothScrollTo方法进行位移变化，这个逻辑很简单。

这里重点说一下一个地方：

upScrollVIEw = (UpScrollVIEw) parentVIEw.getChildAt(0);myWebVIEw = (MyWebVIEw) parentVIEw.getChildAt(2);

你可能会奇怪中间的child(1)去了哪里？这里还要从MainActivity的布局文件说起

dual_scrollvIEw_activity_layout1.xml

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical"> <com.example.dreamwork.activity.superscrollvIEw.CustomerScrollVIEws androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <linearLayout  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:orIEntation="vertical">  <com.example.dreamwork.activity.superscrollvIEw.UpScrollVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:scrollbars="vertical">  <linearLayout   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:orIEntation="vertical">   <ImageVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:scaleType="fitXY"   androID:src="@drawable/taobao" />   <ImageVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:scaleType="fitXY"   androID:src="@drawable/taobao" />   <TextVIEw   androID:textSize="20sp"   androID:padding="10dp"   androID:gravity="center"   androID:layout_margintop="20dp"   androID:layout_marginBottom="60dp"   androID:text="查看图文详情"   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content" />  </linearLayout>  </com.example.dreamwork.activity.superscrollvIEw.UpScrollVIEw>  <include layout="@layout/selector_tab_items" />  <com.example.dreamwork.activity.superscrollvIEw.MyWebVIEw  androID:ID="@+ID/web"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"/> </linearLayout> </com.example.dreamwork.activity.superscrollvIEw.CustomerScrollVIEws></linearLayout>

整个布局文件可以看出，我们在CustomerScrollVIEws这个最外层的自定义ScrollVIEw内部又放置了两个自定义的ScrollVIEw（就如我们看到的原理图那样），只不过在这两个ScrollVIEw类控件的中间通过layout又放置一个linearLayout，里面的内容就是在动图中看到的那个中间的写着qq,baIDu字样的用于切换WebVIEw内容的一个VIEw。这里就不贴代码了。

这样，你就可以理解之前的child(1)为什么被跳过了吧。

使用

public class DualScrollVIEwActivity1 extends Activity implements VIEw.OnClickListener { private MyWebVIEw webVIEw; private TextVIEw sinaTv,qqTv,baIDuTv; private VIEw line1,line2,line3; private final String BAIDU = "http://www.baIDu.com"; private final String QQ = "http://www.qq.com"; private final String SINA = "http://sina.cn"; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestwindowFeature(Window.FEATURE_NO_Title); InitVIEw(); sinaTv.performClick(); } private voID InitVIEw() { setContentVIEw(R.layout.dual_scrollvIEw_activity_layout1); webVIEw = V.f(this,R.ID.web); sinaTv = V.f(this,R.ID.one); sinaTv.setonClickListener(this); qqTv = V.f(this,R.ID.two); qqTv.setonClickListener(this); baIDuTv = V.f(this,R.ID.three); baIDuTv.setonClickListener(this); line1 = V.f(this,R.ID.line1); line2 = V.f(this,R.ID.line2); line3 = V.f(this,R.ID.line3); } @OverrIDe public voID onClick(VIEw v) { reset(); String url = ""; switch (v.getID()) {  case R.ID.one:  line1.setVisibility(VIEw.VISIBLE);  url = SINA;  break;  case R.ID.two:  line2.setVisibility(VIEw.VISIBLE);  url = QQ;  break;  case R.ID.three:  line3.setVisibility(VIEw.VISIBLE);  url = BAIDU;  break;  default:  break; } webVIEw.loadUrl(url); } private voID reset(){ line1.setVisibility(VIEw.GONE); line2.setVisibility(VIEw.GONE); line3.setVisibility(VIEw.GONE); }}

关于底部VIEw内容更新，WebVIEw 通过加载不同URL实现不同视图效果，只是作为Demo测试，实际中应考虑通过fragment切换实现。

这里对滑动冲突的解决方法，是由内而外的展开，默认使顶层VIEw失去拦截能力，在由底部VIEw的滑动距离，做出不同逻辑判断控制了顶层的拦截与否；这也是比较容易理解和实现的思路。当然，对于此类滑动冲突，有很多不同思路，这里只是列举其一。

实际开发开发中，这种带有同方向滑动特性的控件嵌套时，产生的问题不只是滑动冲突，有时候会有内容显示不全或不显示的情况。

最常见如ScrollVIEw嵌套ListVIEw，这种情况只需自定义ListVIEw使其高度计算为一个很大的值，某种意义上让其失去了滑动的特性，但是这样也让ListVIEw貌似失去了视图回收机制，这种时候如果加载很多很多很多图片，效果就会很不理想。对于这种情况，通过对ListVIEw添加headVIEw及footVIEw也是一种解决的办法，但也得实际UI情况允许。

ScrollVIEw嵌套RecyclerVIEw时稍微麻烦一点，需要自定义ScrollVIEw，还需要自定义实现linearlayoutmanager。

不同方向滑动冲突

比如ScrollVIEw嵌套VIEwPager，或者是VIEwPager嵌套ScrollVIEw，这种情况其实很典型。现在大部分应用最外层都是VIEwPager+Fragment 的底部切换（比如微信）结构，这种时候，就很容易出现滑动冲突。不过VIEwPager里面无论是嵌套ListVIEw还是ScrollVIEw，滑动冲突是没有的，毕竟是官方的东西，可能已经考虑到了这些，所以比较完善。

复杂一点的滑动冲突，基本上就是这两个冲突结合的结果。

滑动冲突解决思路
滑动冲突，就其本质来说，两个不同方向（或者是同方向）的VIEw，其中有一个是占主导地位的，每次总是抢着去处理外界的滑动行为，这样就导致一种很别扭的用户体验，明明只是横向的滑动了一下，纵向的列表却在垂直方向发生了动作。就是说，这个占主导地位的VIEw，每一次都身不由己的拦截了这个滑动的动作，因此，要解决滑动冲突，就是得明确告诉这个占主导地位的VIEw，什么时候你该拦截，什么时候你不应该拦截，应该由下一层的VIEw去处理这个滑动动作。

这里不明白的同学，可以去了解一下AndroID touch事件的分发机制，这也是解决滑动冲突的核心知识。

滑动冲突

这里，说一下背景情况。之前做下拉刷新、上拉加载更多时一直使用的是PullToRefreshVIEw这个控件，因为很方便，不用导入三方工程。在其内部可以放置ListVIEw，GrIDVIEw及ScrollVIEw，非常方便，用起来可谓是屡试不爽。但是直到有一天，因项目需要，在ListVIEw顶部加了一个轮播图控件BannerVIEw（这个可以参考之前写的一篇学习笔记）。结果发现轮播图滑动的时候，和纵向的下拉刷新组件冲突了。

如之前所说，解决滑动冲突的关键，就是明确告知接收到touch的VIEw，是否需要拦截此次事件。

解决方法

解决方案1，从外部拦截机制考虑

这里，相当于是PullToRefreshVIEw嵌套了VIEwPager，那么每次优先接收到touch事件的必然是PullToRefreshVIEw。这样就清楚了，看代码：

在PullToRefreshVIEw中：

 @OverrIDe public boolean onIntercepttouchEvent(MotionEvent e) { int y = (int) e.getRawY(); int x = (int) e.getRawX(); boolean resume = false; switch (e.getAction()) {  case MotionEvent.ACTION_DOWN:  // 发生down事件时,记录y坐标  mLastMotionY = y;  mLastMotionX = x;  resume = false;  break;  case MotionEvent.ACTION_MOVE:  // deltaY > 0 是向下运动,< 0是向上运动  int deltaY = y - mLastMotionY;  int deleaX = x - mLastMotionX;  if (Math.abs(deleaX) > Math.abs(deltaY)) {   resume = false;  } else {  //当前正处于滑动   if (isRefreshVIEwScroll(deltaY)) {   resume = true;   }  }  break;  case MotionEvent.ACTION_UP:  case MotionEvent.ACTION_CANCEL:  break; } return resume; }

这里最关键的代码就是这行

if (Math.abs(deleaX) > Math.abs(deltaY)) {   resume = false;  }

横向滑动距离大于纵向时，无须拦截这次滑动事件。其实，就是这么简单，但前提是你必须明确了解AndroID touch事件的传递机制，期间各个方法执行的顺序及意义。

解决方案2，从内容逆向思维分析

有时候，我们不想去修改引入的第三方控件，或者说是无法修改时。就必须考虑从当前从touch传递事件中最后的那个VIEw逆向考虑。首先，由AndroID中VIEw的touch事件传递机制，我们知道touch事件，首先必然由最外层VIEw拦截，如果无法更改这个最外层VIEw，那么是不是就没辙了呢？其实不然，AndroID这么高大上的系统必然考虑到了这个问题，好了废话不说，先看代码

 private BannerVIEw carouselVIEw; private Context mContext; private PullToRefreshVIEw refreshVIEw; ......... refreshVIEw.setontouchListener(new VIEw.OntouchListener() {  @OverrIDe  public boolean ontouch(VIEw v,MotionEvent event) {  carouselVIEw.getParent().requestdisallowIntercepttouchEvent(false);  return false;  } }); carouselVIEw.setontouchListener(new VIEw.OntouchListener() {  @OverrIDe  public boolean ontouch(VIEw v,MotionEvent event) {  carouselVIEw.getParent().requestdisallowIntercepttouchEvent(true);  int x = (int) event.getRawX();  int y = (int) event.getRawY();  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:   lastX = x;   lastY = y;   break;   case MotionEvent.ACTION_MOVE:   int deltaY = y - lastY;   int deltaX = x - lastX;   if (Math.abs(deltaX) < Math.abs(deltaY)) {    carouselVIEw.getParent().requestdisallowIntercepttouchEvent(false);   } else {    carouselVIEw.getParent().requestdisallowIntercepttouchEvent(true);   }   default:   break;  }  return false;  } });

首先说一下这个方法

public abstract voID requestdisallowIntercepttouchEvent (boolean disallowIntercept)

API里的意思很明确，子VIEw如果不希望其父VIEw拦截touch事件时，可调用此方法。当disallowIntercept这个参数为true时，父VIEw将不拦截。

PS:这个方法的命名和其参数的使用逻辑，让我想到了一句很有意思的话，敌人的敌人就是朋友，真不知道Google的大神们怎么想的，非要搞一个反逻辑。

言归正传。这里拦截直接也很明确，在carouselVIEw的ontouch方法中每次进入就设定父VIEw不拦截此次事件，然后在MOTION_MOVE时候，根据滑动的距离判断再决定是父VIEw是否有权利拦截touch事件（即滑动行为）。

总结

好了，本文内容到这基本就结束了，本篇文章只是提供一种解决方法的思路，在具体的场景下，交互往往是贴合具体业务需求的。但是不管怎么样，找出点击事件截断和处理的时机是最重要的，围绕这个关键点，总能找出相应的解决方法。

总结

以上是内存溢出为你收集整理的Android滑动冲突的完美解决方案全部内容，希望文章能够帮你解决Android滑动冲突的完美解决方案所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。