自定义LayoutManager实现抖音的效果

作者: 钉某人 | 来源:发表于2018-06-03 22:48 被阅读3790次

抖音.gif

时下最火的莫过抖音了，实现这个效果应该很简单嘛，用ViewPager就可以了。但是等你通过ViewPager来实现的时候，手机内存不够用的情况就会显现出来。有没有更好的方式呢？？？自然是有，每个人都会用RecyclerView吧，我们就用RecyclerView来实现这个效果，关于内存的回收利用就交给RecyclerView就好了。

那么我们怎么通过RecyclerView来实现这个效果呢？如果你使用过SnapHelper的话，就会很好理解。

1.自定义LayoutManager，并且继承LinearLayoutManager,这样就得到一个可以水平排向或者竖向排向的布局策略。如果你接触过SnapHelper应该了解一个LinearSnapHelper的类，可以实现让列表的Item居中显示的效果。但是这里我们不用这个类，我们要的效果是一次只能滑动一个Item，也就是一页。PagerSnapHelper就可以做到哦,

    @Override
    public void onAttachedToWindow(RecyclerView view) {
        super.onAttachedToWindow(view);
        mPagerSnapHelper.attachToRecyclerView(view);
        this.mRecyclerView = view;
  
    }

2.经过第一步基本可以实现抖音的效果，但是写完之后一会发现，不知道哪里来开始播放视频和在哪里释放视频。不要着急，要监听滑动到哪页，需要我们重写onScrollStateChanged（）函数，这里面有三种状态：SCROLL_STATE_IDLE（空闲），SCROLL_STATE_DRAGGING（拖动），
SCROLL_STATE_SETTLING（要移动到最后位置时）。我们需要的就是RecyclerView停止时的状态，我们就可以拿到这个View的Position.注意这里还有一个问题，当你通过这个position去拿Item会报错，这里涉及到RecyclerView的缓存机制，自己去脑补~~。打印Log,你会发现RecyclerView.getChildCount()一直为1或者会出现为2的情况。好了，我们自己来实现一个接口然后通过接口把状态传递出去。

监听器

/**
 * Created by 钉某人
 * github: https://github.com/DingMouRen
 * email: naildingmouren@gmail.com
 * 用于ViewPagerLayoutManager的监听
 */

public interface OnViewPagerListener {

    /*初始化完成*/
    void onInitComplete();

    /*释放的监听*/
    void onPageRelease(boolean isNext,int position);

    /*选中的监听以及判断是否滑动到底部*/
    void onPageSelected(int position,boolean isBottom);


}

获取到RecyclerView空闲时选中的Item,重写LinearLayoutManager的onScrollStateChanged方法

 @Override
    public void onScrollStateChanged(int state) {
        switch (state) {
            case RecyclerView.SCROLL_STATE_IDLE:
                View viewIdle = mPagerSnapHelper.findSnapView(this);
                int positionIdle = getPosition(viewIdle);
                if (mOnViewPagerListener != null && getChildCount() == 1) {
                    mOnViewPagerListener.onPageSelected(positionIdle,positionIdle == getItemCount() - 1);
                }
                break;
            case RecyclerView.SCROLL_STATE_DRAGGING:
                View viewDrag = mPagerSnapHelper.findSnapView(this);
                int positionDrag = getPosition(viewDrag);
                break;
            case RecyclerView.SCROLL_STATE_SETTLING:
                View viewSettling = mPagerSnapHelper.findSnapView(this);
                int positionSettling = getPosition(viewSettling);
                break;

        }
    }

3.列表的选中监听好了，我们就看看什么时候释放视频的资源，第二步中的三种状态，去打印getChildCount(）的日志，你会发现getChildCount()在SCROLL_STATE_DRAGGING会为1，SCROLL_STATE_SETTLING为2，SCROLL_STATE_IDLE有时为1，有时为2，还是RecyclerView的缓存机制O(∩∩)O，这里不会去赘述缓存机制，我们要做的是要知道在什么时候去做释放视频的操作，还要分清是释放上一页还是下一页，因为适配器adapter的position在这里不好使嘛，O(∩∩)O，这里有两个方法scrollHorizontallyBy（）和scrollVerticallyBy（）可以拿到滑动偏移量，可以判断滑动方向，好~ 齐活了。O(∩_∩)O，看代码

  /**
     * 监听竖直方向的相对偏移量
     * @param dy
     * @param recycler
     * @param state
     * @return
     */
    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        this.mDrift = dy;
        return super.scrollVerticallyBy(dy, recycler, state);
    }


    /**
     * 监听水平方向的相对偏移量
     * @param dx
     * @param recycler
     * @param state
     * @return
     */
    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        this.mDrift = dx;
        return super.scrollHorizontallyBy(dx, recycler, state);
    }


  private RecyclerView.OnChildAttachStateChangeListener mChildAttachStateChangeListener = new RecyclerView.OnChildAttachStateChangeListener() {
        //第一次进入界面的监听，可以用来实现首次播放的逻辑
        @Override
        public void onChildViewAttachedToWindow(View view) {
           if (mOnViewPagerListener != null && getChildCount() == 1) {
                mOnViewPagerListener.onInitComplete();
            }
        }
          // 可以释放资源的监听，也就是回收Item的时候
        @Override
        public void onChildViewDetachedFromWindow(View view) {
            if (mDrift >= 0){
                if (mOnViewPagerListener != null) mOnViewPagerListener.onPageRelease(true,getPosition(view));
            }else {
                if (mOnViewPagerListener != null) mOnViewPagerListener.onPageRelease(false,getPosition(view));
            }

        }
    };

大功告成。全部源码

/**
 * Created by 钉某人
 * github: https://github.com/DingMouRen
 * email: naildingmouren@gmail.com
 * 用于ViewPagerLayoutManager的监听
 */

public interface OnViewPagerListener {

    /*初始化完成*/
    void onInitComplete();

    /*释放的监听*/
    void onPageRelease(boolean isNext,int position);

    /*选中的监听以及判断是否滑动到底部*/
    void onPageSelected(int position,boolean isBottom);


}

**
 * Created by 钉某人
 * github: https://github.com/DingMouRen
 * email: naildingmouren@gmail.com
 */

public class ViewPagerLayoutManager extends LinearLayoutManager {
    private static final String TAG = "ViewPagerLayoutManager";
    private PagerSnapHelper mPagerSnapHelper;
    private OnViewPagerListener mOnViewPagerListener;
    private RecyclerView mRecyclerView;
    private int mDrift;//位移，用来判断移动方向

    public ViewPagerLayoutManager(Context context, int orientation) {
        super(context, orientation, false);
        init();
    }

    public ViewPagerLayoutManager(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);
        init();
    }

    private void init() {
        mPagerSnapHelper = new PagerSnapHelper();
    }

    @Override
    public void onAttachedToWindow(RecyclerView view) {
        super.onAttachedToWindow(view);
        mPagerSnapHelper.attachToRecyclerView(view);
        this.mRecyclerView = view;
        mRecyclerView.addOnChildAttachStateChangeListener(mChildAttachStateChangeListener);
    }


    /**
     * 滑动状态的改变
     * 缓慢拖拽-> SCROLL_STATE_DRAGGING
     * 快速滚动-> SCROLL_STATE_SETTLING
     * 空闲状态-> SCROLL_STATE_IDLE
     * @param state
     */
    @Override
    public void onScrollStateChanged(int state) {
        switch (state) {
            case RecyclerView.SCROLL_STATE_IDLE:
                View viewIdle = mPagerSnapHelper.findSnapView(this);
                int positionIdle = getPosition(viewIdle);
                if (mOnViewPagerListener != null && getChildCount() == 1) {
                    mOnViewPagerListener.onPageSelected(positionIdle,positionIdle == getItemCount() - 1);
                }
                break;
            case RecyclerView.SCROLL_STATE_DRAGGING:
                View viewDrag = mPagerSnapHelper.findSnapView(this);
                int positionDrag = getPosition(viewDrag);
                break;
            case RecyclerView.SCROLL_STATE_SETTLING:
                View viewSettling = mPagerSnapHelper.findSnapView(this);
                int positionSettling = getPosition(viewSettling);
                break;

        }
    }

    /**
     * 布局完成后调用
     * @param state
     */
    @Override
    public void onLayoutCompleted(RecyclerView.State state) {
        super.onLayoutCompleted(state);
        if (mOnViewPagerListener != null) mOnViewPagerListener.onLayoutComplete();
    }

    /**
     * 监听竖直方向的相对偏移量
     * @param dy
     * @param recycler
     * @param state
     * @return
     */
    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        this.mDrift = dy;
        return super.scrollVerticallyBy(dy, recycler, state);
    }


    /**
     * 监听水平方向的相对偏移量
     * @param dx
     * @param recycler
     * @param state
     * @return
     */
    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        this.mDrift = dx;
        return super.scrollHorizontallyBy(dx, recycler, state);
    }

    /**
     * 设置监听
     * @param listener
     */
    public void setOnViewPagerListener(OnViewPagerListener listener){
        this.mOnViewPagerListener = listener;
    }

    private RecyclerView.OnChildAttachStateChangeListener mChildAttachStateChangeListener = new RecyclerView.OnChildAttachStateChangeListener() {
        @Override
        public void onChildViewAttachedToWindow(View view) {
            if (mOnViewPagerListener != null && getChildCount() == 1) {
                mOnViewPagerListener.onInitComplete();
            }
        }

        @Override
        public void onChildViewDetachedFromWindow(View view) {
            if (mDrift >= 0){
                if (mOnViewPagerListener != null) mOnViewPagerListener.onPageRelease(true,getPosition(view));
            }else {
                if (mOnViewPagerListener != null) mOnViewPagerListener.onPageRelease(false,getPosition(view));
            }

        }
    };
}

更加详细的看源码

Github地址

网友评论

ali_707f:感谢群主的分享不过和抖音的性能相差太远请问有什么解决办法么
andev009:反编译后发现抖音用的ViewPager，并不是用的RecyclerView，FlippableViewPager - > SSViewPager - >ViewPager，这里面并没有处理回收的代码，主要是对事件进行拦截。
最爱那个女孩:@andev009 黑影是因为视频正在初始化，可以在初始化之前加个封面
hackest:抖音那个viewpager 上拉加载更多是怎么实现的？
andev009:跑了Demo，拉快了会有黑影
72a87b282fa7:楼主可以答一下吗，左右滑动的dx为什么总是为0
seraphzxz:demo 效果很好，可是过度绘制怎么破～～～～
21c84aaa11f3:网络加载图片的话，滑动的时候，下方新出现的item是黑屏的，完全显示之后才会去显示出图片，能怎么优化一下
_Sisyphus:ViewPager 记得也会回收的吧？
aad3a0c8a574:有点滑动冲突，左右滑动时也会上下切换
Skypew:厉害
微凉一季:你很棒棒哦