android - 两个 Viewpager 和一个选项卡布局的滑动问题

Question

我有两个 viewpager(一个在选项卡下面，另一个在折叠工具栏内)和一个选项卡布局，都在一个 fragment 中，如下图所示。

我的问题是，如果我滑动一个 viewpager，我希望另一个 viewpager 也(自动)与选项卡一起滑动。

我可以通过使用滑动底部的 viewpager 和标签

tabLayout.setupWithViewPager(mBottomViewPager);

但无法在协调器布局内滑动顶部 fragment 。

我试过了

tabLayout.setupWithViewPager(mBottomViewPager);

但它只滑动顶部 View 寻呼机和选项卡。

我只能滑动一个 viewpager 和标签，但不能同时滑动 viewpager 和标签。

我该如何解决这个问题？

我的 fragment 布局:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.ac.srikar.coupon.LocalFragment">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="208dp"
        android:background="@color/colorPrimary"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="20dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/select_location_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                android:onClick="selectLocationButtonHandler"
                android:text="Select Location"
                android:textColor="@color/defaultButtonColor" />

            <android.support.v4.view.ViewPager
                android:id="@+id/local_top_pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:layout_collapseMode="parallax" />
        </LinearLayout>

    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="bottom"
        app:tabGravity="center"
        app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/local_bottom_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fragment_child_local"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 </android.support.design.widget.CoordinatorLayout>

Answer 1

     mViewPager = (ViewPager) findViewById(R.id.container);
     mViewPager2 = (ViewPager) findViewById(R.id.viewpager);
     tabLayout = (TabLayout) findViewById(R.id.tabs);

     mViewPager.setAdapter(mSectionsPagerAdapter);
        tabLayout.setupWithViewPager(mViewPager);
        mViewPager2.setAdapter(mSectionsPagerAdapter1);


  mViewPager.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(mViewPager.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(mViewPager.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;
            }
            mViewPager.scrollTo(mViewPager2.getScrollX(), mViewPager.getScrollY());
            tabLayout.setScrollPosition(mViewPager2.getCurrentItem(), 0f, true);
        }

        @Override
        public void onPageSelected(final int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            mScrollState = state;
            if (state == ViewPager.SCROLL_STATE_IDLE) {

                    mViewPager.setCurrentItem(mViewPager2.getCurrentItem(), false);

            }
        }
    });

   public class SectionsPagerAdapter extends FragmentStatePagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment (defined as a static inner class below).
        return PlaceholderFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        // Show 7 total pages.
        return 7;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "SECTION 1";
            case 1:
                return "SECTION 2";
            case 2:
                return "SECTION 3";
            case 3:
                return "SECTION 4";
            case 4:
                return "SECTION 5";
            case 5:
                return "SECTION 6";
            case 6:
                return "SECTION 7";
        }
        return null;
    }
}


    public class SectionsPagerAdapter1 extends FragmentStatePagerAdapter {

    ArrayList<String> productList;

    public SectionsPagerAdapter1(FragmentManager fm, ArrayList<String> productList) {
        super(fm);
        this.productList = productList;
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment (defined as a static inner class below).
        return PlaceholderFragment1.newInstance(position, productList);
    }

    @Override
    public int getCount() {
        // Show 7 total pages.
        return productList.size();
    }
}