仿照Google相册的滑动选择效果

在新的项目中,可能会用到拖动选择的效果,体验了下Google相册的拖动选择效果,很喜欢,github有一个类似想库,叫做drag-select-recyclerview,研究了一下,有如下几个问题:

  1. 在自动滚动的时候,如果手指没有移动,不会触发自动选择
  2. 滑动时候计算过多
  3. 最麻烦的是需要extent库里面的自定义的recyclerview跟Adapter,对于原有的项目结构影响大
  4. 没有选中反选的动画效果

于是自己做了一个实现的demo,效果如下:

MyVideo Gif.gif

由于我把滑动选择的逻辑跟选中没选中的动画切换逻辑做了剥离,当做两个独立逻辑处理,便于原有项目的集成和后期逻辑的剥离

集成滑动选择
github上原有的那个库是通过自定义的recyclerView,在onDespatchTouchEvent中,处理滑动事件和相关的选择逻辑,不过recyclerView自带一个很有用的方法:mRecyclerView.addOnItemTouchListener,这个方法可以拦截motionevent,从而实现我们的滑动选择逻辑
我把滑动选择的逻辑封装在一个类:DragSelectTouchListener里面,项目需要实现滑动选择的时候,添加如下代码即可

    touchListener = new DragSelectTouchListener();
    //监听滑动选择
    mRecyclerView.addOnItemTouchListener(touchListener);

    touchListener.setSelectListener(new DragSelectTouchListener.onSelectListener() {
        @Override
        public void onSelect(int start, int end) {
            //选择的范围回调
            adapter.selectRangeChange(start, end);
            actionBar.setTitle(String.valueOf(adapter.getSelectedSize()) + " selected");
        }

        @Override
        public void reset() {
            //长按只触发一次滑动选择,结束后需要初始化相关的值
            adapter.resetStartAndEnd();
        }
    });

原有的项目逻辑结构不用改动,就可以实现接收滑动选择的回调,然后在adapter中处理选择

集成选择状态切换的动画效果
在选中跟反选的时候,图片有一个缩小跟复原的动画效果,这个效果是通过recyclerView自带的RecyclerView.ItemAnimator实现的,我已经把动画效果封装好了,实现方式如下:

RecyclerView.ItemAnimator itemAnimator = new SelectItemAnimator();
    //设置选择状态切换时候的动画执行时间
    itemAnimator.setChangeDuration(300);

    mRecyclerView.setItemAnimator(itemAnimator);

集成也是很便捷,如果不需要动画效果,直接移除这行代码即可,不用改动原有的逻辑,如果需要其他特定需求的动画效果,也可以通过修改SelectItemAnimator里面的代码来实现。

滑动选择的实现逻辑
在自定义的DragSelectTouchListener中,封装了滑动选择的实现逻辑
首先,拦截touch事件

@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
    if (!isActive || rv.getAdapter().getItemCount() == 0) {
        return false;
    }
    int action = MotionEventCompat.getActionMasked(e);
    switch (action) {
        case MotionEvent.ACTION_POINTER_DOWN:
            Log.d("debug", "onInterceptTouchEvent ACTION_POINTER_DOWN");
        case MotionEvent.ACTION_DOWN:
            Log.d("debug", "onInterceptTouchEvent ACTION_DOWN");
            reset();
            break;
    }
    recyclerView = rv;
    int height = rv.getHeight();
    mTopBound = -20;
    mBottomBound = height - autoScrollDistance;
    return true;
}

onInterceptTouchEvent要返回true,代表这次的touch事件被你拦截了,然后在onTouchEvent中处理滑动选择的逻辑

@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
    int action = MotionEventCompat.getActionMasked(e);
    switch (action) {
        case MotionEvent.ACTION_MOVE:
            if (!inTopSpot && !inBottomSpot) {
                //更新滑动选择区域
                updateSelectedRange(rv, e);
            }
            //在顶部或者底部触发自动滑动
            processAutoScroll(e);
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_POINTER_UP:
            //结束滑动选择,初始化各状态值
            reset();
            break;
    }
}

这是基本的思路,具体的实现可以查看github上代码

选择反选的动画实现
在自定义的itemAnimator中实现动画效果

private void animateChangeImpl(final ChangeInfo changeInfo) {
    final RecyclerView.ViewHolder holder = changeInfo.oldHolder;
    final View view = holder == null ? null : holder.itemView;
    final RecyclerView.ViewHolder newHolder = changeInfo.newHolder;
    final View newView = newHolder != null ? newHolder.itemView : null;
    if (view != null) {
        final ViewPropertyAnimatorCompat oldViewAnim = ViewCompat.animate(view).setDuration(
                getChangeDuration());
        mChangeAnimations.add(changeInfo.oldHolder);
        oldViewAnim.translationX(changeInfo.toX - changeInfo.fromX);
        oldViewAnim.translationY(changeInfo.toY - changeInfo.fromY);
        //对于本来是选中的,执行放大的动画,对于不是选择的,执行缩放的动画
        boolean isScale = ViewCompat.getScaleX(view) < 0.9f;
        float scaleFactor = isScale ? 1f : 0.8f;
        oldViewAnim.scaleX(scaleFactor)
                .scaleY(scaleFactor)
                .setListener(new VpaListenerAdapter() {
                    @Override
                    public void onAnimationStart(View view) {
                        dispatchChangeStarting(changeInfo.oldHolder, true);
                    }

                    @Override
                    public void onAnimationEnd(View view) {
                        oldViewAnim.setListener(null);
                        ViewCompat.setAlpha(view, 1);
                        ViewCompat.setTranslationX(view, 0);
                        ViewCompat.setTranslationY(view, 0);
                        ViewCompat.setScaleX(view, 1f);
                        ViewCompat.setScaleY(view, 1f);
                        dispatchChangeFinished(changeInfo.oldHolder, true);
                        mChangeAnimations.remove(changeInfo.oldHolder);
                        dispatchFinishedWhenDone();
                    }
                }).start();
    }

其实recyclerView有一个默认的动画效果DefaultItemAnimator,我这个是基于这默认的效果,改动了item更新时候的动画实现方式,其实包括新增,删减,移除等动画都是可以自定义的

暂时就说明这些,具体的请查看代码。

2016.5.23更新

  1. 选择跟反选的逻辑也放到DragSelectTouchListener中,跟adapter进一步解耦
  2. 自动滚动,由ScrollerCompat替代handle,使滚动如丝滑般顺畅
  3. 修复滚动的时候,同时有其他手指触碰屏幕造成的错误

代码已上传到github,欢迎检阅!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容