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

最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示:

如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新。网上查了很多方法,发现都不能很好的解决,于是自己研究了下。

我选用的第三方控件

1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理);

2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也是一样的道理)。具体界面自行脑补哈。

解决方案

我们仔细分析一下,我们要解决的实际上就是控件的事件拦截问题。现在的情况是外层的控件已经拦截了斜着滑动的事件,那么我们只要让外层的控件把这个事件分发下去就可以了【在dispatchTouchEvent(MotionEvent ev)方法中处理】,那么问题来了,怎么判断斜着的事件。网上有很多方案,但都不是很完美。我想到了一种,跟大家分享一下,先看图:

方案分析

1.图一中x=y,作为临界条件,这时α刚好等于45°;

2.图二中x<y,α>45°,这时我们判断为上下移动;

3.图三中x>y,α<45°,这时我们判断为左右移动。

那么我们只要判断tan(α)与tan(45)的关系就能判断是左右还是上下移动。我们写一个类继承PtrClassicFrameLayout,下面是关键代码:

public class SubPtrClassicFrameLayout extends PtrClassicFrameLayout {

  private float mDownX;
  private float mDownY;

  public SubPtrClassicFrameLayout(Context context) {
    super(context);
  }

  public SubPtrClassicFrameLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public SubPtrClassicFrameLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
      case MotionEvent.ACTION_DOWN:
        mDownX = ev.getX();
        mDownY = ev.getRawY();
        break;
      case MotionEvent.ACTION_MOVE:
        float moveX = ev.getX();
        float moveY = ev.getRawY();
        float diffX = Math.abs(moveX - mDownX);
        float diffY = Math.abs(moveY - mDownY);
        boolean isHorizon = Math.tan(diffY / diffX) < Math.tan(45.0);
        if (isHorizon) {
          return dispatchTouchEventSupper(ev);
        }
        break;
    }
    return super.dispatchTouchEvent(ev);
  }

}

我们可以看到,其实很简单,关键就是判断当前位置相对于初始位置的滑动方向。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android开发在轮播图片上加入点击事件的方法

    这是我加在里面的代码,用Switch(position) 来获取当前图片,在相应的图片上加入点击事件, case  0:, case 1: 时代码如下,当点击第一张图片时,想实现case 0里面的代码,但是直接直接报错,退出,当点击第二张实现case 1中的代码时却是没问题,我想知道到底哪里不对啊. 对了,这些代码是在Fragemnt内写的,点击图片时是要从一个Fragment转到一个Activity,求大神指教

  • Android自定义控件实现优雅的广告轮播图

    前言 今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡 简洁简洁简洁 扩展性强 如何使用 下面我们先展示两种效果图 1 默认效果 代码实现 //布局代码 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_pare

  • Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

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

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

  • Android RollPagerView实现轮播图

    Android RollPagerView实现轮播图 android图片轮播效果,RollViewPager的简单使用  <com.jude.rollviewpager.RollPagerView android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="170dp" app:rollviewpager_play_delay

  • Android如何使用RecyclerView打造首页轮播图

    先看看效果图: 停在中间自动翻页 序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传 停在左边 在开始之前呢,首先

  • Android实现轮播图无限循环效果

    本文实例为大家分享了Android轮播图无限循环的具体代码,供大家参考,具体内容如下 实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int position是个非常大的数,对他进行求余数 在destroyItem()方法中,同样 在onPageSelected()监听方法中,对传递进来的索引进行取于 反向的无限循环 调用ViewPager对象的setC

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

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

  • 微信小程序实现下拉刷新和轮播图效果

    本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"

  • 浅谈Viewpager和轮播图的冲突解决方法

    实例如下: //解决ViewPager和轮播图滑动冲突 @Override public boolean dispatchTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: // 让当前viewpager的父控件不去拦截touch事件 getParent().requestDisallowInterceptTouchEvent(true); downX = (int) ev.ge

  • Android下拉刷新框架实现代码实例

    前段时间项目中用到了下拉刷新功能,之前在网上也找到过类似的demo,但这些demo的质量参差不齐,用户体验也不好,接口设计也不行.最张没办法,终于忍不了了,自己就写了一个下拉刷新的框架,这个框架是一个通用的框架,效果和设计感觉都还不错,现在分享给各位看官. 一. 关于下拉刷新 下拉刷新这种用户交互最早由twitter创始人洛伦•布里切特(Loren Brichter)发明,有理论认为,下拉刷新是一种适用于按照从新到旧的时间顺序排列feeds的应用,在这种应用场景中看完旧的内容时,用户会很自然地下

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Android下拉刷新上拉加载控件(适用于所有View)

    前面写过一篇关于下拉刷新控件的文章下拉刷新控件终结者:PullToRefreshLayout,后来看到好多人还有上拉加载更多的需求,于是就在前面下拉刷新控件的基础上进行了改进,加了上拉加载的功能.不仅如此,我已经把它改成了对所有View都通用!可以随心所欲使用这两个功能~~ 我做了一个大集合的demo,实现了ListView.GridView.ExpandableListView.ScrollView.WebView.ImageView.TextView的下拉刷新和上拉加载.后面会提供demo的

  • android ViewPager实现一个无限轮播图

    上节我们实现了一个图片可以无限滑动的ViewPager,这一节我们需要自定义一个ViewPager来实现我们想要展现的布局 首先我们需要建一个包,然后新建一个java类,名字随便起 这个类我们需要随便继承自一个viewGroup就行,viewGroup就是可以存放子控件的view,我们的各种layout,比如LinearLayour或者RelativeLayout这种可以在里面放东西的view,而TextView或者ImageView这种只能放内容而不能放其他view的就是普通view 然后我们

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

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

  • js实现移动端轮播图滑动切换

    本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu

  • Android下拉刷新SwipeRefreshLayout控件使用方法

    我们知道现在的material design十分的流行,而SwipeRefreshLayout 就是原生的一个效果(也是Facebook下拉刷新效果)SwipeRefreshLayout 是一个下拉刷新控件,几乎可以包裹一个任何可以滚动的内容(ListView GridView ScrollView RecyclerView),可以自动识别垂直滚动手势.使用起来非常方便. 他强大到可以有很多个子view来继承,进而可以实现不同效果(博主未研究) 话不多说先来看图 看到上面那个绿色的小圆圈没?就是

随机推荐