ViewPager 在屏幕上显示项目预览的下一个和之前

问题描述

我想在屏幕中页面预览的下一个和之前显示 viewpager.前页和下一页在屏幕深处显示，并以深层动画滑动下一页.

I want to show viewpager next and before page preview in screen. Before and next page show deep in screen and slide next page with deep animation.

你可以看看这张图片

我该怎么做?

推荐答案

终于，我做到了 :) 我修改了这个答案 Android - 类似轮播的小部件，显示左右元素的一部分

Finally, i did it :) I modify this answer Android - Carousel like widget which displays a portion of the left and right elements

你可以看看这段代码.

//pager settings
          pager.setClipToPadding(false);
          pager.setPageMargin(24);
          pager.setPadding(48, 8, 48, 8);
          pager.setOffscreenPageLimit(3);
          pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

             @Override
             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.i("", "onPageScrolled: " + position);

                CampaignPagerFragment sampleFragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(position);


                float scale = 1 - (positionOffset * RATIO_SCALE);

                // Just a shortcut to findViewById(R.id.image).setScale(scale);
                sampleFragment.scaleImage(scale);


                if (position + 1 < pager.getAdapter().getCount()) {
                   sampleFragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(position + 1);
                   scale = positionOffset * RATIO_SCALE + (1 - RATIO_SCALE);
                   sampleFragment.scaleImage(scale);
                }
             }

             @Override
             public void onPageSelected(int position) {
                Log.i("", "onPageSelected: " + position);
             }

             @Override
             public void onPageScrollStateChanged(int state) {
                Log.i("", "onPageScrollStateChanged: " + state);
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                   CampaignPagerFragment fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem());
                   fragment.scaleImage(1);
                   if (pager.getCurrentItem() > 0) {
                      fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem() - 1);
                      fragment.scaleImage(1 - RATIO_SCALE);
                   }

                   if (pager.getCurrentItem() + 1 < pager.getAdapter().getCount()) {
                      fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem() + 1);
                      fragment.scaleImage(1 - RATIO_SCALE);
                   }
                }

             }
          });

//PagerAdapter

public class CampaignPagerAdapter extends FragmentStatePagerAdapter {
   SparseArray<Fragment> registeredFragments = new SparseArray<Fragment>();

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

   @Override
   public int getCount() {
      return 5;
   }

   @Override
   public Fragment getItem(int position) {
      return new CampaignPagerFragment();
   }

   @Override
   public Object instantiateItem(ViewGroup container, int position) {
      Fragment fragment = (Fragment) super.instantiateItem(container, position);
      registeredFragments.put(position, fragment);
      return fragment;
   }

   @Override
   public void destroyItem(ViewGroup container, int position, Object object) {
      registeredFragments.remove(position);
      super.destroyItem(container, position, object);
   }

   public Fragment getRegisteredFragment(int position) {
      return registeredFragments.get(position);
   }
}

例如:https://github.com/mrleolink/SimpleInfiniteCarousel..

你好，缺少一件事sampleFragment.scaleImage(scale);它是在 CampaignPagerFragment 中创建的一种方法，它可以缩放片段 roo​​tView..

Hello, One thing that is missing sampleFragment.scaleImage(scale); It is a method created in CampaignPagerFragment and it scale the fragment rootView..

例如 public void scaleImage(float scaleX){rootView.setScaleY(scaleX);rootView.invalidate();}

这篇关于ViewPager 在屏幕上显示项目预览的下一个和之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！