Android ViewPager - 在左右两侧显示页面预览

Question

Android ViewPager - 在左右两侧显示页面预览

149

我正在使用安卓的ViewPager。我的需求是在左右两边都显示页面的预览。我已经发现可以使用负数的pageMargin来实现右侧预览的效果。

setPageMargin(-100);

有没有办法也显示左侧的预览？我正在寻找类似于相册小部件的东西。

- Brian Boyle

好问题！我最近检查了源代码，如果你不想修改源代码，我觉得没有更好的方式了。setPageMargin（-100）能正常工作吗？ - Macarse

GalleryView会更好地完成这项工作，除非你正在使用带有片段的ViewPger。 - Ali Alnoaimi

我能够使用画廊视图来完成这个。与任何方式中的ViewPager相同。不知道为什么画廊被弃用了。 - WillingLearner

这个问题在这里的帖子中已经被广泛讨论过了。 - Ben Pearson

我正在使用带有片段的Vierpager。那么我可以使用相同的方法吗？ - asliyanage

如果您想使用 ViewPager2 实现，请查看此答案 https://dev59.com/olMH5IYBdhLWcg3w1TuK#58056129 - AskNilesh

17个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ssynhtn · Answer 1

请注意，当为ViewPager设置非零填充时，ViewPager的边缘效果位置会出错，这是ViewPager的一个bug，请参见：viewpager edgeeffect bug 您可以通过将android:overScrollMode="never"设置为ViewPager来禁用边缘效果，或者使用稍微修改过的EdgeEffect类修复该错误：ViewPagerEdgeEffect fix

- Rahul Kamble · Answer 2

已经尝试并测试了ViewPager2。使用以下代码，只需几行代码即可实现您想要的效果。

    val SPACE_BETWEEN_CARD = 40
    account_details_viewpager.setClipToPadding(false)
    account_details_viewpager.setClipChildren(false)
    account_details_viewpager.setOffscreenPageLimit(3)
    account_details_viewpager.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);
    val compositePageTransformer = CompositePageTransformer()
    compositePageTransformer.addTransformer(MarginPageTransformer(SPACE_BETWEEN_CARD))
    compositePageTransformer.addTransformer(ViewPager2.PageTransformer() {
            page: View, position: Float ->
        var r :Float = 1f-Math.abs(position)
        page.setScaleY(0.85f + r * 0.15f)
    })
    account_details_viewpager.setPageTransformer(compositePageTransformer)

这里的 "account_details_viewpager" 是 ViewPager2 的视图

- Taboo · Answer 3

在 XML 文件中，您应该这样设置填充：

在片段中：

int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());

为了使一切都设置好，请使用这个

myViewPager.setPageMargin(-margin);

这应该能解决问题 :)

- Prakash Reddy · Answer 4

 override fun getPageWidth(position: Int): Float {
    return 0.7f
}

在适配器类文件中添加此代码，这对我有用

- Tinh Huynh · Answer 5

根据Jiju的回答，如果您想为VIEWPAGER 2设置页面间距，请使用以下代码：

viewpager.setPageTransformer(new MarginPageTransformer(14));

- Chandela · Answer 6

在经过大量搜索后，我找到了两种可行的方法来使用ViewPager2。
1.

         val pageMargin= 90;
         val pageOffset = 3;
   val transformer = CompositePageTransformer()
        transformer.addTransformer { page, position ->
            val ratio = position * -abs(2 * pageOffset + pageMargin)
            val scaleFactor =
                0.7f.coerceAtLeast(1 - abs(position - 0.14f))
            page.translationX = ratio
            page.scaleY = scaleFactor
        }
        binding.viewPager.setPageTransformer(transformer)

你可以针对每个位置进行操作

         val pageMargin= 70;
         val pageOffset = 3;
         binding.viewPager.setPageTransformer { page, position ->
             val myOffset = (position * -(2 * pageOffset + pageMargin)).toFloat()
             if (position < -1) {
                 page.translationX = -myOffset
             } else if (position <= 1) {
                 val scaleFactor =
                     0.7f.coerceAtLeast(1 - abs(position - 0.14285715f))
                 page.translationX = myOffset
                 page.scaleY = scaleFactor
                 page.alpha = scaleFactor
             } else {
                 page.alpha = 0F
                 page.translationX = myOffset
             }
         }

- Veerababu Medisetti · Answer 7

使用此片段适配器和类来查看左右滚动的视图页面。添加必要的类以滚动查看下一页。

package com.rmn.viewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * The <code>PagerAdapter</code> serves the fragments when paging.
 * @author mwho
 */
public class PagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    /**
     * @param fm
     * @param fragments
     */
    public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }
    /* (non-Javadoc)
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    /* (non-Javadoc)
     * @see android.support.v4.view.PagerAdapter#getCount()
     */
    @Override
    public int getCount() {
        return this.fragments.size();
    }
}



package com.manishkpr.viewpager;


import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;

    public ViewPagerAdapter(Context context, FragmentManager fm) {
        super(fm);  
        _context=context;

        }
    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch(position){
        case 0:
            f=LayoutOne.newInstance(_context);  
            break;
        case 1:
            f=LayoutTwo.newInstance(_context);  
            break;
        }
        return f;
    }
    @Override
    public int getCount() {
        return 2;
    }

}