ios 开发Android自定义控件Android 自定义控件

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

2016-05-09  本文已影响1629人  韦东锏

在新的项目中,可能会用到拖动选择的效果,体验了下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,欢迎检阅!

上一篇下一篇

猜你喜欢

热点阅读