Question

在尝试了Gallery和Horizontal Scroll View之后，我发现View Pager做了我需要的东西，但缺少一件小事。 View Pager每页可以有多个视图吗？

我知道View Pager每次刷卡只显示1个视图/页面。我想知道我是否可以限制我的视图宽度，所以我的第二个视图会显示？

例如：我有3个视图，我希望屏幕显示视图1和视图2的一部分，以便用户知道有更多内容，以便他们可以滑动以查看2.

|view 1|view 2|view 3|
|screen   |

Answer 1

通过为ViewPager指定负边距，我发现了一个更简单的解决方案。我在GitHub上创建了MultiViewPager项目，你可能想看一下：

https://github.com/Pixplicity/MultiViewPager

虽然MultiViewPager需要子视图来指定维度，但原则围绕设置页边距：

ViewPager.setPageMargin(
    getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));

然后我在dimens.xml中指定了这个维度：

<dimen name="viewpager_margin">-64dp</dimen>

为了弥补重叠页面，每个页面的内容视图都有相反的边距：

android:layout_marginLeft="@dimen/viewpager_margin_fix"
android:layout_marginRight="@dimen/viewpager_margin_fix"

再次在dimens.xml：

<dimen name="viewpager_margin_fix">32dp</dimen>

（请注意，viewpager_margin_fix维度是绝对viewpager_margin维度的一半。）

我们实施了此in the Dutch newspaper app De Telegraaf Krant：

Phone example in De Telegraaf Krant Tablet example

Answer 2

Mark Murphy an interesting blog post addressing precisely this problem。虽然我最终使用了my own solution in this thread，但值得看看Dave Smith的代码，Mark在博客文章中引用了该代码：

https://gist.github.com/8cbe094bb7a783e37ad1/

警告！ 在采用此方法之前，请注意此方法的一些非常严重的问题，在本文末尾和下面的评论中都提到过。 < / p>

你最终会得到这个：

Screenshot of Dave Smith's PagerContainer

通过将ViewPager打包到FrameLayout的子类中，将其设置为特定大小并调用setClipChildren(false)，可以有效地发挥作用。这会阻止Android剪切超出ViewPager边界的视图，并在视觉上实现您想要的效果。

在XML中，它非常简单：

<com.example.pagercontainer.PagerContainer
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#CCC">
    <android.support.v4.view.ViewPager
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal" />
</com.example.pagercontainer.PagerContainer>

添加一些代码，用于处理来自ViewPager外部的触摸事件，并在滚动时使显示无效，并且您已完成。

话虽如此，虽然这一般起作用很好，但我确实注意到有一个边缘案例没有通过这个相当简单的结构解决：在setCurrentPage()上调用ViewPager时。我找到解决此问题的唯一方法是通过继承ViewPager本身并使其invalidate()函数也使PagerContainer无效。

Answer 3

可以在同一屏幕上显示多个页面。其中一种方法是覆盖PAgerAdapter中的getPageWidth（）方法。 getPageWidth（）返回一个介于0和1之间的浮点数，表示该页面占用Viewpager的宽度。默认情况下，它设置为1.因此，您可以将其更改为您希望的宽度。您可以阅读有关此here＆amp;的更多信息。 github project。

Answer 4

这就是我得到它的方式：

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:clipToPadding="false"
    android:gravity="center"
    android:paddingLeft="36dp"
    android:paddingRight="36dp"/>

在活动中，我用这个：

markPager.setPageMargin(64);

希望它有所帮助！

Answer 5

我遇到了同样的问题，我需要同时显示3个页面（上一页，当前页和下一页）。经过对最佳解决方案的长期研究，我认为我找到了它。解决方案是这里几个答案的混合：

@Paul Lammertsma的answer指出 - Dave Smith在Mark Murphy博客中的代码是该解决方案的基础。对我来说唯一的问题是ViewPager只是在屏幕的顶部，因为它们在xml文件中给出它的大小：

 android:layout_width="150dp"
 android:layout_height="100dp"

这对我的目的不利，因为我正在寻找能够遍布整个屏幕的东西。所以我改变它来包装内容，你可以在这里看到：

  <com.example.nutrino_assignment.PagerContainer
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CCC">
    <android.support.v4.view.ViewPager
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
  </com.example.nutrino_assignment.PagerContainer>

现在我失去了教程试图做的所有效果。使用@ andro的answer我能够一次显示超过1页：正好是2页！当前和下一个。通过覆盖如下：

        @Override 
    public float getPageWidth(int position) {
        return(0.9f); 
    }

这几乎是我所需要的......（尽管我认为它足以满足你的要求），但对于那些可能需要我所需要的东西的人来说：对于解决方案的最后一部分，我在this answer使用了这个想法，同样是@Paul Lammertsma。在Dave Smith的代码中，您可以在onCreate方法中找到这一行：

   //A little space between pages
    pager.setPageMargin(15);

我替换为：

   //A little space between pages
    pager.setPageMargin(-64);

现在在第一页看起来：

|view 1|view 2|view 3|
|screen   |

虽然在2号看起来像：

|view 1|view 2|view 3|
     |screen    |

希望它会帮助别人！我浪费了2天就可以了...... 祝你好运。

Answer 6

viewPager.setPageMargin(-18);// adjust accordingly ,-means less gap

在imageadapter中

private class ImagePagerAdapter2 extends PagerAdapter {
    private int[] mImages = new int[] {

            R.drawable.add1,
            R.drawable.add3,
            R.drawable.add4,
            R.drawable.add2,
    };
    @Override
    public float getPageWidth(int position) {
        return .3f;
    }

调整返回值...较小意味着更多图像...... 0.3表示一次至少3个图像。

Answer 7

LayoutParams lp = new LayoutParams(width,height);
viewpager.setLayoutParams(lp);

Answer 8

在使用此代码的xml文件中（主要活动）

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="130dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:orientation="vertical"
                    android:weightSum="1">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp">
                        <com.wonderla.wonderla.muthootpathanamthitta.activity_muthootpathanm.PagerContainer
                            android:id="@+id/pager_container"
                            android:layout_width="match_parent"
                            android:layout_height="fill_parent">
                            <android.support.v4.view.ViewPager
                                android:id="@+id/viewpager"
                                android:layout_width="100dip"
                                android:layout_height="100dip"/>
                      </com.wonderla.wonderla.muthootpathanamthitta.activity_muthootpathanm.PagerContainer>
                    </RelativeLayout>
                </LinearLayout>

Answer 9

主要活动xml文件添加此代码

      <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="130dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:orientation="vertical"
                    android:weightSum="1">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp">
                        <com.wonderla.wonderla.muthootpathanamthitta.activity_muthootpathanm.PagerContainer
                            android:id="@+id/pager_container"
                            android:layout_width="match_parent"
                            android:layout_height="fill_parent">
                            <android.support.v4.view.ViewPager
                                android:id="@+id/viewpager"
                                android:layout_width="100dip"
                                android:layout_height="100dip"/>
                      </com.wonderla.wonderla.muthootpathanamthitta.activity_muthootpathanm.PagerContainer>
                    </RelativeLayout>
                </LinearLayout>

主要活动代码

public class MainActivity extends Activity{
 final Integer[] XMEN2= {R.mipmap.bookticket,R.mipmap.safty,R.mipmap.privacy};
 private ArrayList<Integer> XMENArray2 = new ArrayList<Integer>();
 PagerContainer mContainer;
 int currentPage2 = 0;
 private static int NUM_PAGES2 = 0;
 ViewPager mPager2;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initData2();}
 private void initViews() {
  mPager2 = (ViewPager)findViewById(R.id.viewpager);
  mContainer = (PagerContainer)findViewById(R.id.pager_container);
  mPager2.setOffscreenPageLimit(5);
  mPager2.setPageMargin(15);
  mPager2.setClipChildren(false);
 }

   private void initData2() {

        for(int i=0;i<XMEN2.length;i++)
            XMENArray2.add(XMEN2[i]);
        mPager2.setAdapter(new Sliding_Adaptertwo(getActivity(),XMENArray2));
        NUM_PAGES2 =XMEN2.length;
        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage2 == NUM_PAGES2) {
                    currentPage2= 0;
                }mPager2.setCurrentItem(currentPage2++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);

    }



}

Pager View pagercontainer类


import android.content.Context;

import android.graphics.Point;

import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import android.widget.FrameLayout;


public class PagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener {

    private ViewPager mPager;
    boolean mNeedsRedraw = false;

    public PagerContainer(Context context) {
        super(context);
        init();
    }

    public PagerContainer(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PagerContainer(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        //Disable clipping of children so non-selected pages are visible
        setClipChildren(false);

        //Child clipping doesn't work with hardware acceleration in Android 3.x/4.x
        //You need to set this value here if using hardware acceleration in an
        // application targeted at these releases.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        try {
            mPager = (ViewPager) getChildAt(0);
            mPager.setOnPageChangeListener(this);
        } catch (Exception e) {
            throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
        }
    }

    public ViewPager getViewPager() {
        return mPager;
    }

    private Point mCenter = new Point();
    private Point mInitialTouch = new Point();

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mCenter.x = w / 2;
        mCenter.y = h / 2;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        //We capture any touches not already handled by the ViewPager
        // to implement scrolling from a touch outside the pager bounds.
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mInitialTouch.x = (int)ev.getX();
                mInitialTouch.y = (int)ev.getY();
            default:
                ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
                break;
        }

        return mPager.dispatchTouchEvent(ev);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //Force the container to redraw on scrolling.
        //Without this the outer pages render initially and then stay static
        if (mNeedsRedraw) invalidate();
    }

    @Override
    public void onPageSelected(int position) { }

    @Override
    public void onPageScrollStateChanged(int state) {
        mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
    }
}

及其适配器

public class Sliding_Adaptertwo extends PagerAdapter {


    private ArrayList<Integer> IMAGES;
    private LayoutInflater inflater;
    private Context context;


    public Sliding_Adaptertwo(Context context, ArrayList<Integer> IMAGES) {
        this.context = context;
        this.IMAGES=IMAGES;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    @Override
    public int getCount() {
        return IMAGES.size();
    }

    @Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.sliding_layout, view, false);

        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);


        imageView.setImageResource(IMAGES.get(position));

        view.addView(imageLayout, 0);

        return imageLayout;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }


}

适配器类的XML文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    >

    <ImageView
        android:id="@+id/image"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/ad1"
       />
</FrameLayout>

工作正常

ViewPager可以在每页中有多个视图吗？

9 个答案: