Question

我正在尝试同步两个ViewPager，因为在我之前显然有很多人，而且我已经达到了这个目标：

private ViewPager mNavPager;

private ViewPager mMainPager;

private final OnPageChangeListener mNavPagerListener = new OnPageChangeListener() {

    private boolean mNavDragging;
    private int mScrollPosition;

    @Override
    public void onPageSelected(int position) {
        mScrollPosition = position;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if(mNavDragging)
            mMainPager.scrollTo(positionOffsetPixels, 0);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        switch(state) {
        case ViewPager.SCROLL_STATE_DRAGGING:
        case ViewPager.SCROLL_STATE_SETTLING:
            mNavDragging = true;
            break;
        case ViewPager.SCROLL_STATE_IDLE:
            mNavDragging = false;
            break;
        }
    }
};

private OnPageChangeListener mMainPagerListener = new OnPageChangeListener() {

    private boolean mMainDragging;
    private int mScrollPosition;

    @Override
    public void onPageSelected(int position) {
        mScrollPosition = position;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if(mMainDragging)
            mNavPager.scrollTo(positionOffsetPixels, 0);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        switch(state) {
        case ViewPager.SCROLL_STATE_DRAGGING:
        case ViewPager.SCROLL_STATE_SETTLING:
            mMainDragging = true;
            break;
        case ViewPager.SCROLL_STATE_IDLE:
            mMainDragging = false;
            break;
        }
    }
};

如果其中任何一个手动滚动，则另一个使用滚动状态属性从属于它。它工作得很漂亮，直到物品到达最终位置;此时，从属寻呼机立即轻弹回到之前选择的项目，就像没有进行滚动一样。

我尝试使用各种不同的逻辑约束来调用ViewPager#setCurrentItem(mScrolledPosition)，但这也不起作用，尽管它偶尔会使情况变得更糟。我觉得好像必须有一些可以做的事情，但我不确定是什么。

如何让从属寻呼机保持在正确的位置？

Answer 1

我使用OnPageChangeListener以更简单（更清洁）的方式解决了这个问题：

mViewPager1.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

      private int mScrollState = ViewPager.SCROLL_STATE_IDLE;

      @Override
      public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
          return;
        }
        mViewPager2.scrollTo(mViewPager1.getScrollX(), mViewPager2.getScrollY());
      }

      @Override
      public void onPageSelected(final int position) {

      }

      @Override
      public void onPageScrollStateChanged(final int state) {
        mScrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
          mViewPager2.setCurrentItem(mViewPager1.getCurrentItem(), false);
        }
      }
});

mViewPager2.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

      private int mScrollState = ViewPager.SCROLL_STATE_IDLE;

      @Override
      public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
          return;
        }
        mViewPager1.scrollTo(mViewPager2.getScrollX(), mViewPager1.getScrollY());
      }

      @Override
      public void onPageSelected(final int position) {

      }

      @Override
      public void onPageScrollStateChanged(final int state) {
        mScrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
          mViewPager1.setCurrentItem(mViewPager2.getCurrentItem(), false);
        }
      }
});

Answer 2

我已经解决了问题而没有使用Listener。因此，您可以将侦听器用于其他一些内容，并使代码看起来更清晰。

我知道这是很久以前提出的一个问题。我正在寻找解决方案并自己解决。

这是我的自定义ViewPager代码

的方式

public class CustomPager extends ViewPager {
CustomPager mCustomPager;
private boolean forSuper;

public CustomPager(Context context) {
    super(context);
}

public CustomPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
    if (!forSuper) {

        mCustomPager.forSuper(true);
        mCustomPager.onInterceptTouchEvent(arg0);
        mCustomPager.forSuper(false);
    }
    return super.onInterceptTouchEvent(arg0);
}

@Override
public boolean onTouchEvent(MotionEvent arg0) {
    if (!forSuper) {
        mCustomPager.forSuper(true);
        mCustomPager.onTouchEvent(arg0);
        mCustomPager.forSuper(false);
    }
    return super.onTouchEvent(arg0);
}

public void setViewPager(CustomPager customPager) {
    mCustomPager = customPager;
}

public void forSuper(boolean forSuper) {
    this.forSuper = forSuper;
}

@Override
public void setCurrentItem(int item, boolean smoothScroll) {
    if (!forSuper) {
        mCustomPager.forSuper(true);
        mCustomPager.setCurrentItem(item, smoothScroll);
        mCustomPager.forSuper(false);
    }
    super.setCurrentItem(item, smoothScroll);
}

@Override
public void setCurrentItem(int item) {
    if (!forSuper) {
        mCustomPager.forSuper(true);
        mCustomPager.setCurrentItem(item);
        mCustomPager.forSuper(false);
    }
    super.setCurrentItem(item);

}

}

你必须在设置适配器之前和使用ID获取引用之后设置这样的寻呼机。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    backPager=(CustomPager) findViewById(R.id.BackPager);
    frontPager = (CustomPager) findViewById(R.id.frontPager);
    frontPager.setViewPager(backPager);
    backPager.setViewPager(frontPager);
    backPager.setAdapter(your Adapter);
    frontPager.setAdapter(your Adapter);
}

必须在分配适配器之前设置ViewPagers。

Answer 3

这样做的一切都正确除了它有时会错过奴隶视图上的快速动作。出于某些原因，在结算阶段包括假拖拽事件会导致真正的问题。

private ViewPager mNavPager;

private ViewPager mMainPager;

private final OnPageChangeListener mNavPagerListener = new OnPageChangeListener() {

    private int mLastScrollPosition;
    private int mLastPagePosition;

    @Override
    public void onPageSelected(int position) {
        mLastPagePosition = position;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if(mMainPager.isFakeDragging()) {
            int absoluteOffsetPixels = positionOffsetPixels;
            if(mLastPagePosition!=position) {
                absoluteOffsetPixels += (position - mLastPagePosition) * mMainPager.getWidth();
                mLastPagePosition = position;
            }
            Log.d(TAG, "fake nav drag by " + (mLastScrollPosition - absoluteOffsetPixels));
            mMainPager.fakeDragBy(mLastScrollPosition - absoluteOffsetPixels);
            mLastScrollPosition = positionOffsetPixels;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if(!mNavPager.isFakeDragging()) {
            switch(state) {
            case ViewPager.SCROLL_STATE_DRAGGING:
                if(!mMainPager.isFakeDragging())
                    mMainPager.beginFakeDrag();
                break;
            case ViewPager.SCROLL_STATE_SETTLING:
            case ViewPager.SCROLL_STATE_IDLE:
                if(mMainPager.isFakeDragging()) {
                    mMainPager.endFakeDrag();
                    mLastScrollPosition = 0;
                }
                break;
            }
        }
    }
};

private OnPageChangeListener mMainPagerListener = new OnPageChangeListener() {

    private int mLastScrollPosition;
    private int mLastPagePosition;

    @Override
    public void onPageSelected(int position) {
        mLastPagePosition = position;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if(mNavPager.isFakeDragging()) {
            int absoluteOffsetPixels = positionOffsetPixels;
            if(mLastPagePosition!=position) {
                absoluteOffsetPixels += (position - mLastPagePosition) * mMainPager.getWidth();
                mLastPagePosition = position;
            }
            Log.d(TAG, "fake nav drag by " + (mLastScrollPosition - absoluteOffsetPixels));
            mNavPager.fakeDragBy(mLastScrollPosition - absoluteOffsetPixels);
            mLastScrollPosition = positionOffsetPixels;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if(!mMainPager.isFakeDragging()) {
            switch(state) {
            case ViewPager.SCROLL_STATE_DRAGGING:
                if(!mNavPager.isFakeDragging())
                    mNavPager.beginFakeDrag();
                break;
            case ViewPager.SCROLL_STATE_SETTLING:
            case ViewPager.SCROLL_STATE_IDLE:
                if(mNavPager.isFakeDragging()) {
                    mNavPager.endFakeDrag();
                    mLastScrollPosition = 0;
                }
                break;
            }
        }
    }
};

修改

我现在相信如果没有一些相当实质的自定义代码，这是不可能的。原因基本上是ViewPager内部都有VelocityTracker，它控制滚动。由于传入的MotionEvent可能无法在每个寻呼机的相同相对时间传递到VelocityTracker，因此跟踪器偶尔会得出关于如何做出反应的不同结论。

但是，可以使用修改后的PagerTitleStrip来精确跟踪ViewPager，并将条带捕获的触摸事件直接传输到{{ 1}}。

The source for PagerTitleStrip is here.

从广义上讲，要完成这项工作需要做的事情如下：将ViewPager，mPrevText和mCurrText替换为您要使用的类型的视图;删除mNextText和onAttachedToWindow()函数;删除对处理数据集观察者的onDetachedFromWindow()的调用，并将PagerAdapter添加到修改的条带中，假冒拖动主分页器。您还需要将修改后的标题条作为OnTouchListener添加到OnPageChangeListener，因为内部侦听器在包外不可见。

这是一个巨大的痛苦吗？是。但它的确有效。我很快就会详细写出来。

Answer 4

我遇到了类似的问题，还需要将我的同步与PageTransformer中的动画结合起来。

最初在此发布此答案：https://stackoverflow.com/a/43638796/2867886

但为方便起见，我会将其粘贴在此处。

对我来说最有效的解决方案是在MotionEvent实例之间的OnTouchListener中传递ViewPager。尝试假拖动，但它总是滞后和马车 - 我需要一个平滑，视差效果。

所以，我的建议是实施View.OnTouchListener。必须缩放MotionEvent以补偿宽度的差异。

public class SyncScrollOnTouchListener implements View.OnTouchListener {

private final View syncedView;

public SyncScrollOnTouchListener(@NonNull View syncedView) {
    this.syncedView = syncedView;
}

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    MotionEvent syncEvent = MotionEvent.obtain(motionEvent);
    float width1 = view.getWidth();
    float width2 = syncedView.getWidth();

    //sync motion of two view pagers by simulating a touch event
    //offset by its X position, and scaled by width ratio
    syncEvent.setLocation(syncedView.getX() + motionEvent.getX() * width2 / width1,
            motionEvent.getY());
    syncedView.onTouchEvent(syncEvent);
    return false;
}
}

然后将其设置为ViewPager

    sourcePager.setOnTouchListener(new SyncScrollOnTouchListener(targetPager));

请注意，此解决方案仅在两个寻呼机具有相同方向时才有效。如果您需要它可以用于不同的方向 - 调整syncEvent Y坐标而不是X。

还有一个问题需要考虑 - 最小投掷速度和距离只会导致一个寻呼机更改页面。

可以通过向我们的寻呼机添加OnPageChangeListener轻松修复

sourcePager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels) {
            //no-op
        }

        @Override
        public void onPageSelected(int position) {
            targetPager.setCurrentItem(position, true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            //no-op
        }
    });

Answer 5

在所有其他答案的帮助下，我创建了一个类，因此很容易实现。

    public class OnPageChangeListernerSync implements ViewPager.OnPageChangeListener {

    private ViewPager master;
    private ViewPager slave;
    private int mScrollState = ViewPager.SCROLL_STATE_IDLE;

    public OnPageChangeListernerSync(ViewPager master, ViewPager slave){
        this.master = master;
        this.slave = slave;
    }

    @Override
    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            return;
        }
        this.slave.scrollTo(this.master.getScrollX()*
                this.slave.getWidth()/
                this.master.getWidth(), 0);
    }

    @Override
    public void onPageSelected(final int position) {

    }

    @Override
    public void onPageScrollStateChanged(final int state) {
        mScrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            this.slave.setCurrentItem(this.master
                    .getCurrentItem(), false);
        }
    }
}

...

// In your activity
this.upperPager.addOnPageChangeListener(new OnPageChangeListernerSync(this.upperPager, this.lowerPager));

this.lowerPager.addOnPageChangeListener(new OnPageChangeListernerSync(this.lowerPager, this.upperPager));

Answer 6

在某些情况下，所有答案都是近似的。在这里，我再给出一个答案，用于同时滑动ViewPagers是否大小相同：

viewPagerBanner.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    private int scrollState = ViewPager.SCROLL_STATE_IDLE;
    // Indicates that the pager is in an idle, settled state. 
    // The current page is fully in view and no animation is in progress.

    @Override
    public void onPageScrolled(int position, float positionOffset, 
                               int positionOffsetPixels) {
        if (scrollState == ViewPager.SCROLL_STATE_IDLE) {
            return;
        }
        viewPagerTitle.scrollTo(viewPagerBanner.getScrollX()*
                                viewPagerTitle.getWidth()/
                                viewPagerBanner.getWidth(), 0);
        // We are not interested in Y axis position
    }

    @Override
    public void onPageSelected(int position) {}

    @Override
    public void onPageScrollStateChanged(int state) {
        scrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            viewPagerTitle.setCurrentItem(viewPagerBanner.getCurrentItem(), false);
        }
    }
});

使用OnPageChangeListener同步两个ViewPagers

6 个答案: