在ViewPager滚动时,一次显示多个页面

时间:2018-04-13 06:46:09

标签: android android-viewpager

我正在使用ViewPager控件。我有一张图片,每页都有textviews张。在显示所选页面时,我使用了左右填充和page margin来部分显示下一页和上一页。

我想在ViewPagerscrolling时一次显示多个网页。滚动停止后,只想在中心显示所选页面,并部分显示上一页和下一页(就像滚动开始前一样)。

我尝试通过在ViewPagerscrolling时增加“左”和“右”填充来实现此目的,并在滚动停止时重置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);
                            }

                        }
                    }
                }
            });

这就是我需要的,

enter image description here

1 个答案:

答案 0 :(得分:0)

你这个代码片段&amp;使用以下方法解决问题:)

        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);
                }
            }
        });