这个案例是利用竖向的RecyclerView和横向的HorizontalScrollView 实现的一个可横向和竖向滑动的view,

优化版本已上传至gitee,使用起来更香

老版本点这里

如果这个demo的思路帮到了你,请不要吝啬你的Star 谢谢!

在模拟器上录了一个效果图,股票APP中常用的效果,下面来分析一下怎么去做这个

gif效果

整体布局如下

布局

其实看似很简单,也有很多种解决办法,但是我经过试验之后发现这种是性能最好的,因为最外层是个RecyclerView,无任何嵌套,ViewHolder可重复回收利用,界面丝滑,就是需要处理好手势以及细节问题
这里面几个比较难的部分,总结一下,3个难点问题

• 1.头布局的HorizontalScrollView如何与下面RecyclerView的Item中HorizontalScrollView实现同步横向滚动
• 2.当触摸下面RecyclerView的单个Item的HorizontalScrollView时,整个右面布局跟随左右滑动
• 3.当RecyclerView的右边部分Item滑动到最左边的时候,下拉刷新,部分item位置会错位

带着上面三个问题,逐个来解决

• 1.HorizontalScrollView的滑动监听,我们可以去看一下,它有一个onScrollChanged方法的回调,

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
    }

首先处理触摸头部时来滚动下面部分的监听,对头部的HorizontalScrollView进行监听,在这个回调的方法里面想办法去滚动item中的每一个HorizontalScrollView就可以了

• 2.第二个问题,就有点小复杂;由于下部分是个RecyclerView,就涉及到ViewHolder的缓存复用机制,RV的缓存笔记
  我的做法是,将每一个ViewHolder保存下来,并在触摸单个Item的HorizontalScrollView时,在其响应的onScrollChanged方法中,滑动除触摸之外的所有ViewHolder中的HorizontalScrollView

RecyclerView的ViewHolder中缓存ViewHolder

if (!mViewHolderList.contains(holder)) {
            mViewHolderList.add(holder);
        }

监听当前触摸的item的viewholder中的HorizontalScrollView滚动,并遍历所有缓存的viewholder,同步滚动其他item的HorizontalScrollView

  holder.horItemScrollview.setOnCustomScrollChangeListener((listener, scrollX, scrollY, oldScrollX, oldScrollY) -> {
            for (int i = 0; i < mViewHolderList.size(); i++) {
                ItemViewHolder touchViewHolder = mViewHolderList.get(i);
                if (touchViewHolder != holder) {
                    touchViewHolder.horItemScrollview.scrollTo(scrollX, 0);
                }
            }
            if (null != onContentScrollListener) onContentScrollListener.onScroll(scrollX);
            offestX = scrollX;//记录滚动的距离(增量)
        });

回到第一个问题,这时候就很好解决了,同样的,遍历viewholder集合,同步移动头部HorizontalScrollView的移动距离
这里还有一个问题需要解决,当RV可见部分被横向滚动之后,再上下滚动外层的RV,新创建的ViewHolder需要做一个同步的左右滚动

监听外层RecyclerView的上下滚动,同步滚动内部Item的横向距离(在Item有横向滚动的时候)

//滑动监听,同步滚动所有item
        refreshRv.setOnSlideListener(new RefreshRecyclerView.OnSlideListener() {
            @Override
            public void onSlide() {

            }

            @Override
            public void slideStop() {

            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                List<StockSelectionResultAdapter.ItemViewHolder> viewHolderList = mStockSelectionResultAdapter.getViewHolderList();
                if (null != viewHolderList) {
                    int size = viewHolderList.size();
                    for (int i = 0; i < size; i++) {
                        viewHolderList.get(i).horItemScrollview.scrollTo(mStockSelectionResultAdapter.getOffestX(), 0);
                    }
                }
            }
        });

• 3.这个问题的最终原因,还是因为ViewHolder的缓存导致,当RV被下拉刷新之后,重置数据,调用了notifyDataSetChanged,结合ViewHolder缓存,对数据进行重新布局,但是当我在viewholder的creat方法中无论怎么更改当前holder持有的HorizontalScrollView的距离都不生效,还是错位,而且会出现5个错位,其他正常,我看了一下正好是那5个缓存的viewholder的HorizontalScrollView滚动距离设置之后没有生效,我猜想可能是viewholder取出之后,还没有进行布局之前我设置了HorizontalScrollView的滚动距离,所以没有生效,那么怎么监听viewholder的布局呢?
  我找了一圈,只找到getViewTreeObserver().addOnGlobalLayoutListener这个,监听view的layout的listener,不知道还有没有其他方法来监听这个viewholder从缓存中拿出来之后,在什么时机被layout完成

下面这段代码在viewholder的creat方法中调用,即可解决下拉刷新之后错位问题(这里我用了个flag记录每个holder是否加载完,加载完之后在这里回调,并设置flag为true,这样可以避免这个listener被调用多次,算得上是个小技巧)

  holder.horItemScrollview.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
            if (!holder.isLayoutFinish()) {
                holder.horItemScrollview.scrollTo(offestX, 0);
                holder.setLayoutFinish(true);
            }
        });

我的github