2015-06-01 6 views
20

Я хочу показать просмотрщик следующий и перед просмотром страницы на экране. На следующей и предыдущей странице вы увидите глубокий экран и слайд на следующей странице с глубокой анимацией.ViewPager показать следующее и перед просмотром элемента на экране

Вы можете посмотреть этот файл

Как я могу это сделать?

enter image description here

+1

https://github.com/mrleolink/SimpleInfiniteCarousel попробовать это – Hasnain

+0

ли вы решить эту проблему совершенно. Я мой телефон с низким уровнем регулирования работает отлично, но телефон регулировки высоты не работает. – Tariqul

ответ

16

Наконец, я сделал это :) Я изменяю этот ответ 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 (масштаб); Это метод создан в CampaignPagerFragment и масштабировать фрагмент rootView ..

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

например
+0

Привет, когда я использую этот код, когда я нахожусь на первом элементе, левый элемент не отображается. Левый элемент должен быть последним элементом в списке, чтобы сделать его круговым. Можно ли это реализовать с помощью этого кода? – Tooroop

+0

Есть ли способ сделать следующий элемент и элемент предварительного просмотра размытым, а затем, когда на фокусе удалить размытие? – MrG

+0

в "onPageSelected (int position)" вы можете удалить blurr @MrG – mustafasevgi

9

Вы можете использовать PagerTransformer для ViewPager: -

mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() { 
    @Override 
    public void transformPage(View page, float position) { 
      // do transformation here 
     } 
    }); 

Используйте эту ссылку для полного учебника: -

http://andraskindler.com/blog/2013/create-viewpager-transitions-a-pagertransformer-example/

Надеется, что это поможет вам :)

4

there is the image of my first solution

viewPager.setPageMargin(100); 
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() 
{ 
    @Override 
    public void transformPage(View page, float position) 
    { 
     int pageWidth = viewPager.getMeasuredWidth() - 
      viewPager.getPaddingLeft() - viewPager.getPaddingRight(); 
     int pageHeight = viewPager.getHeight(); 
     int paddingLeft = viewPager.getPaddingLeft(); 
     float transformPos = (float) (page.getLeft() - 
      (viewPager.getScrollX() + paddingLeft))/pageWidth; 
     int max = pageHeight/10; 
     if (transformPos < -1) 
     { 
      // [-Infinity,-1) 
      // This page is way off-screen to the left. 
      page.setAlpha(0.5f);// to make left transparent 
      page.setScaleY(0.7f); 
     } 
     else if (transformPos <= 1) 
     { 
      // [-1,1] 
      page.setScaleY(1f); 
     } 
     else 
     { 
      // (1,+Infinity] 
      // This page is way off-screen to the right. 
      page.setAlpha(0.5f);// to make right transparent 
      page.setScaleY(0.7f); 
     } 
    } 
}); 
+0

это не работает –

+0

@KaveeshKanwal его работает в моем приложении? в чем проблема с тобой –

+0

в моем случае он не работал с фрагментами, а с динамическими представлениями. –

0

Я сделал это путем изменения отступов моего ViewPager, основываясь на положении.

carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, 12), 0, Utils.dpToPixels(context, paddingRequired - 12), 0); // initial padding for position 0 
carouselViewHolder.carouselViewPager.setPageMargin(Utils.dpToPixels(context, 12)); // margin between pages 
carouselViewHolder.carouselViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    } 
    @Override 
    public void onPageSelected(int position) { 
     if (position != 0) { 
      if (position == playCardData.getPlayCards().size() - 1) { 
       carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, finalPaddingRequired - 12), 0, Utils.dpToPixels(context, 12), 0); 
      } else 
       carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, finalPaddingRequired/2), 0, Utils.dpToPixels(context, finalPaddingRequired/2), 0); 
     } else { 
      carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, 12), 0, Utils.dpToPixels(context, finalPaddingRequired - 12), 0); 
     } 
    } 
    @Override 
    public void onPageScrollStateChanged(int state) { 
    } 
});