ViewPager可以在每个页面有多个视图吗?

在尝试了图库和水平滚动视图后,我发现View Pager可以完成我所需要的function,但是还有一个小小的缺失。 查看传呼机可以每页有多个视图吗?

我知道View Pager每次只能显示1个视图/页面。 我想知道如果我可以限制我的意见宽度,所以我的第二个视图后面会显示?

例如:我有3个视图,我希望屏幕显示视图1和视图2的一部分,所以用户知道有更多的内容,所以他们可以刷卡查看2。

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

通过为ViewPager指定负边距,我发现了一个更简单的解决scheme。 我已经在GitHub上创build了MultiViewPager项目,你可能想看看:

https://github.com/Pixplicity/MultiViewPager

尽pipeMultiViewPager需要一个用于指定尺寸的子视图,但是原则还是围绕设置页面边距进行的:

 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尺寸的一半。)

我们在荷兰的报纸应用De Telegraaf Krant中实现了这个function

Te Telegraaf Krant的电话例子Tablet示例

马克墨菲有一个有趣的博客文章解决这个问题 。 尽pipe我最终在这个主题中使用了自己的解决scheme ,但是值得一提的是Dave Smith的代码,Mark在博客文章中引用了这个代码:

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

警告! 在采取这种方法之前,请注意这个方法中的一些非常严重的问题,在本文末尾和下面的评论中提到。

你会最终这样做:

Dave Smith的PagerContainer的屏幕截图

它通过将ViewPager包装到FrameLayout的子类中,将其设置为特定的大小并调用setClipChildren(false) 。 这会阻止Android剪切超出ViewPager边界的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外部的触摸事件,并在滚动时使显示无效,从而完成。

这就是说,虽然这一般工作很好,但我注意到有一个边缘情况下,这个相当简单的结构没有解决:在ViewPager上调用setCurrentPage() 。 我能find解决这个问题的唯一方法是通过ViewPager本身,并使其invalidate()函数也使PagerContainer无效。

可以在同一个屏幕上显示多个页面。 其中一种方法是通过覆盖PAgerAdapter中的getPageWidth()方法。 getPageWidth()返回一个介于0和1之间的浮点数,表示页面占用多lessViewpager的宽度。 默认情况下,它被设置为1.所以,你可以把它改成你想要的宽度。 你可以阅读更多关于这里 & github项目 。

这是我如何得到它:

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

希望它有帮助!

我有同样的问题,唯一的区别,我需要一次显示3页(前,现在和下一页)。 在经过了很长时间的研究之后,我觉得我find了最好的解决scheme。 解决scheme是这里几个答案的组合:

正如@Paul Lammertsma的回答所指出的 – Dave Smith在Mark Murphy博客中的代码是解决scheme的基础。 对我来说唯一的问题是,由于ViewPager在xml文件中的大小, ViewPager只能在屏幕的顶部显示:

  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的答案,我能够一次显示多于1页:正好2! 目前和未来。 是否按如下重写:

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

这几乎是我所需要的…(尽pipe我认为它足以满足你所要求的),但是对于其他需要类似我所需要的东西的人来说:对于解决scheme的最后部分,我在这个答案中使用了这个想法,再次由@Paul Lammertsma。 在Dave Smith的代码中,你可以在onCreate方法中find这一行:

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

我replace为:

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

现在在第一页看起来:

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

而在2日看起来像:

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

希望它会帮助别人! 我浪费了2天的时间…祝你好运。

 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意味着一次至less3个图像。

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