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

Question

在尝试了Gallery和Horizo​​ntal 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尺寸的一半.)

我们在荷兰报纸应用程序De Telegraaf Krant中实现了这一点:

Answer 2

Mark Murphy有一篇有趣的博客文章正好解决了这个问题.虽然我最终在这个帖子中使用了我自己的解决方案,但是看看Dave Smith的代码是值得的,Mark在博客文章中引用了这个代码:

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

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

你最终会得到这个:

它通过将a包装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.因此,您可以将其更改为您希望的宽度.你可以在这里阅读更多关于这个 &github项目的信息.

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的回答所指出的那样--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的答案我能够一次显示超过1页:正好是2!当前和下一个.通过覆盖如下:

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

这几乎就是我所需要的......(尽管我认为它足以满足你的要求),但对于那些可能需要我所需要的东西的人来说:对于解决方案的最后一部分,我在这个答案中使用了这个想法,再次由@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天就好了...祝你好运.