VerticalSlideView解析(仿 京东 淘宝 详情页)

本文介绍了一款用于实现京东、淘宝商品详情页向上滑动展示详细介绍的自定义控件VerticalSlideView。文章详细解析了ViewDragHelper和GestureDetectorCompat的工作原理,并提供了实战环节的概览。作者强调了理解第三方库的重要性,以便于未来问题的排查和扩展。控件的关键代码包括ViewDragHelper和GestureDetectorCompat的回调监听,以及如何处理滑动冲突和fling效果。
摘要由CSDN通过智能技术生成

为了支持作者的原创,在此首先贴上该项目的github VerticalSlideView

楼主最近在做商城项目,在展示商品详情的时候用到了一个类似京东商品详情的实现效果向上滑动当滑动到了一定的距离就展示商品的详细介绍,由于自己的自定义控件的基础薄弱,只能求助于第三方,,功夫不负有心人总算找到了一个类似的控件,无奈做项目的时候组长就对我们说过,用别人写的第三方可以,但是一定要看清他的原理,不能只会用不懂他们怎么实现的,防止日后出bug都不知咋找。。。趁着这次项目完成有点空余时间,自己整理下自己对该控件的认识,以便日后的复习!!(楼主第一次写博客,有不足之处还望指出,共同进步,共同学习。)

效果图:

这里写图片描述

VerticalSlide

该自定义的view控件使用重要的类
- ViewDragHelper 处理子视图拖拽滑动操作,可以分为以下几步
1. 创建实例
2. 触摸相关方法的调用
3. ViewDragHelp.Callback调用

首先来个代码简介,让不熟悉的同学大体了解下(这里只介绍该VerticalSlideView所用到的方法)

public class MyView extends ViewGroup
{
   
    private ViewDragHelper mDragger;

    public MyView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        //this 就是当前的ViewGroup;
        //1.0f 敏感度参数,参数越大越敏感;
        //callback 用户在触摸过程中回调的相关方法;
        mDragger = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback()
        {
             //用于控制那些子view可以移动,返回true表示当前view可以移动,false表示不可移动
            @Override
            public boolean tryCaptureView(View child, int pointerId) {
                return false;
            }
            //滑动的时候位置发生变化的回调,
            @Override
            public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
                super.onViewPositionChanged(changedView, left, top, dx, dy);
            }
            //方法的返回值是该childView纵向的移动的范围
            @Override
            public int getViewVerticalDragRange(View child) {
                return super.getViewVerticalDragRange(child);
            }
            //是在ACTION_UP事件后回调,可以实现view的自动滑动,
            @Override
            public void onViewReleased(View releasedChild, float xvel, float yvel) {
                super.onViewReleased(releasedChild, xvel, yvel);
            }
            //对child移动的边界进行控制
            @Override
            public int clampViewPositionVertical(View child, int top, int dy) {
                return super.clampViewPositionVertical(child, top, dy);
            }
        });
    }

   @Override
    public boolean onInterceptTouchEvent(MotionEvent event)
    {
        //在该方法中通过mDragger.shouldInterceptTouchEvent(event)来决定是否拦截当前事件
        return mDragger.shouldInterceptTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        在该方法中通过mDragger.processTouchEvent(event)获取用户Touch事件;
        return true;
    }
}
  • GestureDetectorCompat 进行复杂的触摸及手势操作,可分为以下几步(在该控件中使用相对简单࿰
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值