[英]ViewPager show next and before item preview on screen
我想在屏幕中的頁面預覽之前和之前顯示 viewpager。 前一頁和下一頁顯示在屏幕深處,並以深度動畫滑動下一頁。
你可以看看這張圖片
我該怎么做?
最后,我做到了 :) 我修改了這個答案Android - Carousel like widget 它顯示了左右元素的一部分
你可以看看這個代碼。
//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 中創建的一個方法,它縮放片段 rootView ..
例如public void scaleImage(float scaleX) { rootView.setScaleY(scaleX); rootView.invalidate(); }
public void scaleImage(float scaleX) { rootView.setScaleY(scaleX); rootView.invalidate(); }
您可以使用 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/
希望這對你有幫助:)
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);
}
}
});
我認為這是最簡單和最干凈的解決方案。
float scaleFactor = 0.85f;
viewPager.setPageMargin(-35);
viewPager.setOffscreenPageLimit(2);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(@NonNull View page, float position) {
page.setScaleY((1 - Math.abs(position) * (1 - scaleFactor)));
page.setScaleX(scaleFactor + Math.abs(position) * (1 - scaleFactor));
}
});
我通過根據位置更改我的 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) {
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.