ViewPager hiển thị tiếp theo và trước khi xem trước mục trên màn hình

Question

Tôi muốn hiển thị chế độ xem tiếp theo và trước khi xem trước trang trong màn hình. Trước và trang tiếp theo hiển thị sâu trong màn hình và trượt trang tiếp theo bằng hoạt ảnh sâu.

Bạn có thể xem hình ảnh này

Tôi có thể làm như thế nào?

Answer 1

Cuối cùng, tôi đã làm nó :) Tôi sửa đổi câu trả lời này Android - Carousel like widget which displays a portion of the left and right elements

Bạn có thể xem mã này.

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

cho ví dụ: https://github.com/mrleolink/SimpleInfiniteCarousel ..

Xin chào, Một điều đó là mất tích sampleFragment.scaleImage (quy mô); Nó là một phương pháp tạo ra trong CampaignPagerFragment và nó mở rộng các rootView đoạn ..

ví dụ public void scaleImage(float scaleX) { rootView.setScaleY(scaleX); rootView.invalidate(); }

Answer 2

Bạn có thể sử dụng PagerTransformer để ViewPager: -

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

Sử dụng liên kết này để hoàn thành hướng dẫn: -

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

Hope điều này giúp bạn :)

Answer 3

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

Answer 4

Tôi đã làm điều này bằng cách thay đổi đệm ViewPager tôi dựa trên vị trí này.

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