Andy Zhao's Blog

  • 首页
  • web开发
  • 互联网
  • 技术分享
  • 网站运营
  • 交互设计
  • 资源分享
    • 工具
    • 欣赏
    • 素材
  • 生活杂语
Welcome
记录一些点点滴滴
  1. 首页
  2. 技术分享
  3. 其他
  4. 正文

移动端APP下拉刷新与轮播图冲突的解决方法

2020/10/19 789点热度 1人点赞 0条评论

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

 

4019913-fef56cf2ac8f5bf9.webp

 

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

选用的第三方控件

1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理);
2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也是一样的道理)。具体界面自行脑补哈。

解决方案

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

 

4019913-20094abba2533444.webp

 

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);
    }

}

 

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

原文地址:https://www.jianshu.com/p/a169c36f8083

标签: 暂无
最后更新:2020/10/19

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

点赞
< 上一篇
下一篇 >

文章评论

取消回复

搜索
分类
  • asp / 2篇
  • css / 27篇
  • html / 9篇
  • javascript / 15篇
  • php / 6篇
  • web开发 / 8篇
  • wordpress / 7篇
  • 互联网 / 16篇
  • 交互设计 / 30篇
  • 其他 / 3篇
  • 工具 / 3篇
  • 欣赏 / 11篇
  • 生活杂语 / 6篇
  • 用户体验 / 1篇
  • 素材 / 3篇
  • 网站建设 / 3篇
  • 网站推广 / 4篇
  • 网站运营 / 5篇
  • 网络技术 / 1篇
最新 热点 随机
最新 热点 随机
宝塔的FTP存储空间,API资料校验失败,请核实! 移动端APP下拉刷新与轮播图冲突的解决方法 头条号怎么运营?怎么涨粉? 转载:移动前端开发之viewport的深入理解 判断来访是搜索引擎蜘蛛还是普通用户,蜘蛛正常抓取,用户跳转指定页面 为什么我们需要构图?构图有哪些原则?
php,js中判断网站是不是用手机访问 谷歌关于网站重复内容的10个建议 微博安全:第三方网站看到改不到 css清除浮动的方法 IE6,IE7,IE8css bug集合 帝国CMS操作类型、标签说明

COPYRIGHT © 2022 zhaoan.org. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备09022954号