ViewPager滾動時一次顯示多個頁面

Question

我正在使用ViewPager控件。 我在每頁中都有一張圖片和許多textviews 。 在顯示所選頁面時，我已使用左右填充以及page margin來部分顯示下一頁和上一頁。

我想在ViewPager scrolling時一次顯示多個頁面。 滾動停止后，只想在中間顯示所選頁面，並部分顯示上一頁和下一頁（ 就像開始滾動之前一樣 ）。

我試圖通過在ViewPager scrolling時增加“ left”和“ right”填充並在ViewPager scrolling重置該padding來實現此目的。 增加填充效果很好，我一次可以看到多個頁面。 但是將填充重置為原始值不起作用。 填充重置為原始值后， ViewPager顯示意外對齊 。

我還嘗試通過設置負邊距來實現。 仍然重置利潤率仍無法達到預期效果 。

這是ViewPager定義

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:paddingTop="20dp"
        android:clipToPadding="false"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:layout_width="wrap_content"
        android:layout_height="160dp"/>

viewPager.setPageMargin(CAROUSEL_PAGE_MARGIN);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                        if(getContext() != null) {

                            int paddingLeft = (int) getResources().getDimension(R.dimen.abstract_30dp);
                            int paddingRight = (int) getResources().getDimension(R.dimen.abstract_30dp);

                            int paddingTop = (int) getResources().getDimension(R.dimen.abstract_20dp);
                            int paddingBottom = 0;

                            viewPager.setPaddingRelative(paddingLeft, paddingTop, paddingRight, paddingBottom);
                        }

                }

                @Override
                public void onPageScrollStateChanged(int state) {
                    if (state == ViewPager.SCROLL_STATE_DRAGGING) {
                            if (getContext() != null) {

                                int paddingLeft = (int) getResources().getDimension(R.dimen.abstract_100dp);
                                int paddingRight = (int) getResources().getDimension(R.dimen.abstract_100dp);

                                int paddingTop = (int) getResources().getDimension(R.dimen.abstract_20dp);
                                int paddingBottom = 0;

                                viewPager.setPaddingRelative(paddingLeft, paddingTop, paddingRight, paddingBottom);
                            }

                        }

                        if (state == ViewPager.SCROLL_STATE_IDLE) {
                            if (getContext() != null) {

                                int paddingLeft = (int) getResources().getDimension(R.dimen.abstract_30dp);
                                int paddingRight = (int) getResources().getDimension(R.dimen.abstract_30dp);

                                int paddingTop = (int) getResources().getDimension(R.dimen.abstract_20dp);
                                int paddingBottom = 0;

                                viewPager.setPaddingRelative(paddingLeft, paddingTop, paddingRight, paddingBottom);
                            }

                        }
                    }
                }
            });

這就是我所需要的

Answer 1

當您的問題得到解決時，您可以使用以下代碼片段和支持:)

        mViewPager.setClipChildren(false);
        mViewPager.setClipToPadding(false);
        int margin = (int) getResources().getDimension(R.dimen.d_margin_large);//16dp
        final int padding = (int) getResources().getDimension(R.dimen.d_margin_ex_large);//18dp
        mViewPager.setPageMargin(margin);
        mViewPager.setPadding(padding * 2, 0, padding * 2, 0);
        mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override public void transformPage(View page, float position) {
                if (mViewPager.getCurrentItem() == 0) {
                    page.setTranslationX(-(padding));
                } else if (mViewPager.getCurrentItem() == mViewPagerAdapter.getCount() - 1) {
                    page.setTranslationX(padding);
                } else {
                    page.setTranslationX(0);
                }
            }
        });