Can ViewPager display multiple views per page?

Question

After polling the gallery and viewing the horizontal scroll, I found that viewing the pager does what I need, but with one minor flaw. Can a pager view have multiple page views?

I know that View Pager only shows 1 view / page per swipe. I was wondering if I can limit the width of the views so that my second view is shown after it?

For example: I have 3 views, and I want the screen to display view 1 and part of view 2, so that the user knows that there is more content so they can scroll to view 2.

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

Answer 1

I found that an even simpler solution is possible by specifying a negative margin for the ViewPager. I created a MultiViewPager project on GitHub, which you can look at:

https://github.com/Pixplicity/MultiViewPager

Although the MultiViewPager expects a child view for sizing, the principle revolves around setting the page margin:

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

Then I specified this dimension in my dimens.xml :

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

To compensate for overlapping pages, each page view has the opposite edge:

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

Again in the dimens.xml :

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

(Note that the size of viewpager_margin_fix is half the size of the absolute viewpager_margin .)

We implemented this in the application for the Dutch newspaper De Telegraaf Krant :

Answer 2

Mark Murphy is an interesting blog post that addresses this particular issue . Although I ended up using my own solution in this thread , it's worth looking at the Dave Smith code that Mark refers to in a blog post:

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

Warning! Before you take this approach, beware of some very serious problems with this approach, mentioned both at the end of this post and in the comments below.

The result is the following:

It works efficiently by wrapping the ViewPager in a subclass of FrameLayout , setting it to a specific size and calling setClipChildren(false) . This prevents Android from clipping views that exceed the bounds of the ViewPager , and visually does what you want.

In XML, this is very simple:

 <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> 

Add a little code to handle touch events from outside the ViewPager and to invalidate the display when scrolling, and you ViewPager done.

Speaking of which, and while this works fine overall, I noticed that there is an extreme case that cannot be solved with this rather simple construction: when calling setCurrentPage() on the ViewPager . The only way I could find to solve this is to subclass ViewPager itself and its invalidate() function is also not valid PagerContainer .

Answer 3

You can display more than one page on one screen. One way is to override the getPageWidth () method in PAgerAdapter. getPageWidth () returns a floating-point number between 0 and 1, indicating how much width the Viewpager should occupy the page. The default value is 1. Thus, you can change this value to the desired width. You can read about it here and the github project .

Answer 4

Here is how I understood it:

 <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"/> 

and in action I use this:

 markPager.setPageMargin(64); 

hope this helps!

Answer 5

I had the same problem with the only difference that I had to show 3 pages at once (previous, current and next pages). After a very long study for a better solution, I think I found it. The solution is a combination of several answers here:

As @Paul Lammertsma's answer noted, Dave Smith's code on Mark Murphy's blog is the basis for the solution. The only problem for me was that the ViewPager was only at the top of the screen due to the size that they give in the XML file:

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

This was bad for my purpose, as I was looking for something that would spread all over the screen. So I changed it to wrap the contents, as you can see here:

  <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> 

Now I have lost all the effect of what the textbook was trying to do. Using @andro answer , I was able to show more than 1 page at a time: exactly 2! Current and next. Did this by overriding it as follows:

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

It was almost what I needed ... (although I think that it is enough for what you asked for), but for others who might need something like what I need: For the last part of the solution, I used idea in this answer , again @Paul Lammertsma. In the Dave Smith code, you will find this line in the onCreate method:

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

which I replaced with:

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

now on the first page it looks:

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

and on the second it looks like this:

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

Hope this helps someone! I wasted like 2 days on it ... Good luck.

Answer 6

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

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

adjust the return value ... lesser means more image ...... 0.3 means at least 3 images at a time.

Answer 7

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