Android侧滑菜单和轮播图之滑动冲突问题

接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单。

猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开发人员自定义的)拦截了。

基于这个猜测,我自定义一个ViewPager,重写dispatchTouchEvent、onInterceptTouchEvent和onTouchEvent,分别在这三个方法中打印log;

重写SlidingMenu的dispatchTouchEvent、onInterceptTouchEvent和onTouchEvent,同样打印log。

重新编译运行,手滑轮播图,log如下:

06-08 09:52:08.394 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:0
06-08 09:52:08.395 19424-19424/com.parkingmore E/SlidingMenu: onInterceptTouchEvent ev:0
06-08 09:52:08.395 19424-19424/com.parkingmore E/RollViewPager: dispatchTouchEvent ev:0
06-08 09:52:08.395 19424-19424/com.parkingmore E/RollViewPager: onInterceptTouchEvent ev:0
06-08 09:52:08.441 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.441 19424-19424/com.parkingmore E/SlidingMenu: onInterceptTouchEvent ev:2
06-08 09:52:08.442 19424-19424/com.parkingmore E/SlidingMenu: ACTION_MOVE dx:15.473999
06-08 09:52:08.442 19424-19424/com.parkingmore E/RollViewPager: ACTION_MOVE getCurrentItem():1
06-08 09:52:08.442 19424-19424/com.parkingmore E/RollViewPager: dispatchTouchEvent ev:2
06-08 09:52:08.442 19424-19424/com.parkingmore E/RollViewPager: onInterceptTouchEvent ev:2
06-08 09:52:08.459 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.459 19424-19424/com.parkingmore E/SlidingMenu: onInterceptTouchEvent ev:2
06-08 09:52:08.459 19424-19424/com.parkingmore E/RollViewPager: dispatchTouchEvent ev:3
06-08 09:52:08.459 19424-19424/com.parkingmore E/RollViewPager: onInterceptTouchEvent ev:3
06-08 09:52:08.477 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.477 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.495 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.495 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.515 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.515 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.533 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.533 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.551 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.551 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.574 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.574 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.594 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.595 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.611 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.612 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.622 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:2
06-08 09:52:08.622 19424-19424/com.parkingmore E/SlidingMenu: onTouchEvent ev:2
06-08 09:52:08.623 19424-19424/com.parkingmore E/SlidingMenu: dispatchTouchEvent ev:1

从log中可以看出,该开始,还能将滑动事件传递给ViewPager,之后,就被SlidingMenu拦截了。这个log证实了这个猜想是正确的。

知道了原因就好解决了,我现在要考虑的是:要达到什么样的效果。

预期效果:可以正常滑动轮播图,当轮播图在第一张时,可以滑到侧滑菜单。

网上有人分享过类似的问题。我这里也借鉴了一下。

先来实现第一个功能:可以正常滑动轮播图。

可以设一个全局变量:public static boolean mRollViewPagerTouching;

用来表示是否在触摸轮播图。

在自定义ViewPager中,判断是否在触摸轮播图

public boolean dispatchTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
      case MotionEvent.ACTION_MOVE:
        break;
      case MotionEvent.ACTION_DOWN:
        MyApplication.mRollViewPagerTouching = true;
        break;
      case MotionEvent.ACTION_UP:
        MyApplication.mRollViewPagerTouching = false;
        break;
    }
    return super.dispatchTouchEvent(ev);
  }

在SlidingMenu中,做出如下处理

public boolean onInterceptTouchEvent(MotionEvent ev) {
    if (MyApplication.mRollViewPagerTouching){
      return false;
    }
    return super.onInterceptTouchEvent(ev);
  }

重新编译运行,可以正常滑动轮播图,但是当轮播图在第一张时,不能滑到侧滑菜单。

现在来做第二个功能:当轮播图在第一张时,可以滑到侧滑菜单。

这里有两个地方要注意:1.当轮播图在第一张时;2.由于我的侧滑菜单是在左边,需要手指向右滑动进入侧滑菜单,所以,第二个条件,应该是右滑。

在以上的基础上,修改自定义ViewPager代码

public boolean dispatchTouchEvent(MotionEvent ev) {
    //在触发时回去到起始坐标
    float x = ev.getX();
    switch (ev.getAction()) {
      case MotionEvent.ACTION_MOVE:
        //获取到距离差
        float dx = x - downX;
        //防止是按下也判断
        if (Math.abs(dx) > 8) {
          //通过距离差判断方向
          if (dx > 0) {
            //                "右";
            if (getCurrentItem() == 0) {
              MyApplication.mRollViewPagerTouching = false;
            } else {
              MyApplication.mRollViewPagerTouching = true;
            }
          } else {
            //                "左";
            MyApplication.mRollViewPagerTouching = true;
          }
        }
        break;
      case MotionEvent.ACTION_DOWN:
        //将按下时的坐标存储
        downX = x;
        MyApplication.mRollViewPagerTouching = true;
        break;
      case MotionEvent.ACTION_UP:
        MyApplication.mRollViewPagerTouching = false;
        break;
    }
    return super.dispatchTouchEvent(ev);
  }

再次编译运行,成功达到预期效果。

(0)

相关推荐

  • Android下拉刷新与轮播图滑动冲突解决方案

    最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示: 如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新.网上查了很多方法,发现都不能很好的解决,于是自己研究了下. 我选用的第三方控件 1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理); 2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也

  • Android自定义控件实现简单的轮播图控件

    最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

  • Android实现原生侧滑菜单的超简单方式

    先来看看效果图 当你点击菜单可以更改图标,例如点击happy,首页就会变一个笑脸,这个实现的过程超级简单 你需要使用ToolBar与DrawableLayout两个比较新的控件 首先要写三个xml布局文件,我这里的布局文件是使用了include标签嵌入的,代码如下 headbar_toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar

  • Android实现自定义轮播图片控件示例

    要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 直接先上效果图: 创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import android.os

  • Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android滑动优化高仿QQ6.0侧滑菜单(滑动优化)

     推荐阅读:Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一) 但是之前的实现,只是简单的可以显示和隐藏左侧的菜单,但是特别生硬,而且没有任何平滑的趋势,那么今天就来优化一下吧,加上平滑效果,而且可以根据手势滑动的方向来判断是否是显示和隐藏. 首先先来实现手势判断是否隐藏和显示 这里就要用到了一个方法了,如下: 这个是ViewDradHelper里面的方法: /** * 当view被释放的时候处理的事情(松手) * * @param releasedChild 被释放的

  • Android侧滑菜单和轮播图之滑动冲突问题

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开发人员自定义的)拦截了. 基于这个猜测,我自定义一个ViewPager,重写dispatchTouchEvent.onInterceptTouchEvent和onTouchEvent,分别在这三个方法中打印log: 重写SlidingMenu的dispatchTouchEvent.onInterce

  • Android 使用ViewPager实现轮播图效果

    写这篇文章只是对今天所学的知识进行加深印象,对ViewPager的一些处理,比如适配器和各个方法的作用等. 先看效果图 这里我是在xml中写的圆点 Drawable文件夹下的xml代码: Shape_yes.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

  • BootStrap实现手机端轮播图左右滑动事件

    用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件.框架.但是都不能和bootstrap良好的结合. 功夫不负有心人,经过一番查找终于在github找到了一段js:toucher.js,原文链接:https://github.com/bh-lay/toucher 由于个人水平原因代码没看懂抓狂,不过使用还是没问题滴. 第一.在head中加载toucher.js. <script type="text/JavaScript" src="__PUBLIC

  • Android实现炫酷轮播图效果

    轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用volley封装了网络请求框架,异步加载网络图片,也可以给大家参考,非常实用. 效果图:这只是其中的一种效果 底层封装的我在下面会一一展示,先看下在MainActivity中怎样调取这个轮播控件 package com.wujie.advertisment.activity; import android.

  • Android使用RollViewPager实现轮播图

    记录Android中轮播图的学习与使用,供大家参考,具体内容如下 1.build.gradle(:app)文件里面加依赖 implementation 'com.jude:rollviewpager:1.2.9' 2.activity_main.xml <com.jude.rollviewpager.RollPagerView android:id="@+id/roll_view_pager" android:layout_width="match_parent&quo

  • Android实现简单的banner轮播图

    本文实例为大家分享了Android实现简单banner轮播图的具体代码,供大家参考,具体内容如下 说明:想玩一个简单的轮播图效果  用的第三方的框架玩一下,支持设置轮播图多种样式 1.效果图 2.添加依赖 implementation 'com.youth.banner:banner:1.4.10' implementation "com.github.bumptech.glide:glide:4.6.1" 3.主界面 package com.example.myapplication

  • Android Banner本地和网络轮播图使用介绍

    目录 加载本地图片 第一步:先在build.gradle中加入banner和glide的依赖 第二步:xml布局 第三步:MainActivity 加载网络图片 下载网络图片的时候要记得添加网络权限 样式一:CIRCLE_INDICATOR:无标题,有小圆点 样式二:CIRCLE_INDICATOR_TITLE_INSIDE:小圆点和标题在同一栏 样式三:CIRCLE_INDICATOR_TITLE:标题和小圆点同时出现 现在恰好有个项目需要做个轮播图效果,这个需求也是很常见的需求,于是就做个笔

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • js实现左右轮播图

    本文实例为大家分享了js实现左右轮播图的具体代码,供大家参考,具体内容如下 我的轮播图功能有:自动播放.点击焦点切换和点击左右按钮切换 效果图: 自动轮播 点击焦点切换 点击左右按钮切换 注意:本文用带背景颜色的li标签指代图片,有需要的话可以将图片插入li标签内 思路: 基础布局和css样式 (1) 给盛放要轮播的图片的盒子绝对定位 js中的代码 (2) 复制第一张图片放在盒子最后,复制最后一张图片放在盒子最前,以保证轮播图左右滑动效果(否则看起来会有一点卡顿) (3)设置盒子位置,通过移动这

随机推荐