ViewPager上同时有多个页面

时间:2012-01-12 14:02:47

标签: android android-viewpager

使用ViewPager时,是否有可能同时显示两个页面?我不是在寻找边缘效果,而是在同时寻找两个完整页面。

提前致谢。

8 个答案:

答案 0 :(得分:67)

请查看相应getPageWidth中的PagerAdapter方法。覆盖它并返回例如0.8f让所有子页面仅占ViewPager宽度的80%。

更多信息: http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

答案 1 :(得分:31)

在此处查看我的最新答案:Can ViewPager have multiple views in per page?

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

  

https://github.com/Pixplicity/MultiViewPager

虽然这个问题特别要求一个没有边缘效应的解决方案,但是这里的一些答案提出了CommonsWare的解决方法,例如kaw的建议。

使用该特定解决方案,触摸处理和硬件加速存在各种问题。在我看来,一个更简单,更优雅的解决方案是为ViewPager指定负余量:

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

答案 2 :(得分:12)

您必须覆盖viewpager适配器上的getPageWidth()方法。例如:

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

在您的适配器中尝试该代码,然后您就会理解。

答案 3 :(得分:5)

请参阅that blog entry
PagerContainer技术解决了我的问题。

修改
我找到了同样的答案 How to migrate from Gallery to HorizontalScrollView & ViewPager?

答案 4 :(得分:2)

您可以通过在PagerAdapter类中使用getPageWidth来解决此问题。

确定您的JAR是否是最新的 。因为以前ViewPager不支持同时支持多个页面。

public float getPageWidth(){

返回0.4f;(你可以选择它。对于每页全屏,你应该给1f) }

答案 5 :(得分:2)

创建你的布局文件:my_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    android:clipChildren="false">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="200dp"
        android:clipToPadding="false"
        android:layout_height="200dp"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:layout_gravity="center" />
</FrameLayout>
</layout>

viewpager与你想要的页面一样小。使用android:clipToPadding =“false”,寻呼机外部的页面也是可见的。但是现在在viewpager之外拖动没有任何效果这可以通过从寻呼机容器中选择触摸并将它们传递给寻呼机来解决:

MyLayoutBinding binding = DataBindingUtil.<MyLayoutBinding>inflate(layoutInflater, R.layout.my_layout, parent, false)
binding.pager.setOffscreenPageLimit(3);
binding.pager.setPageMargin(15);
binding.pagerContainer.setOnTouchListener(new View.OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
           return chatCollectionLayoutBinding.pager.onTouchEvent(event);
      }
 });

答案 6 :(得分:0)

可以在Viewpager的项目布局中进行操作。假设您希望一次只有两个页面。

这是项目布局(photo_slider_item.xml):

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/photosSliderItem">
        <ImageView android:id="@id/photoBox1" style="@style/photoBox"/>
        <ImageView android:id="@id/photoBox2" style="@style/photoBox"/>
    </LinearLayout>

在你的PagerAdapter:

@Override
public View instantiateItem(ViewGroup container, int position){
    View sliderItem = LayoutInflater.from(container.getContext()).inflate(photo_slider_item, container, false);
    ImageView photoBox1 = (ImageView) sliderItem.findViewById(R.id.photoBox1);
    ImageView photoBox2 = (ImageView) sliderItem.findViewById(R.id.photoBox2);
    photoBox1.setImageResource(photosIds[position]);
    if(position < photosIds.length-1){
        photoBox2.setImageResource(photosIds[position+1]);
    } else {photoBox2.setImageResource(photosIds[0]);}
    container.addView(sliderItem);
    return sliderItem;
}

两个以上项目的编辑版

如果您需要两件以上的商品,请先将商品添加到 LinearLayout ,然后使用以下算法:

photoBox1.setImageResource(photosIds[position]);
if(position < photosIds.length-i-1){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[position+2]);
   .
   .
   .
   photoBox(i).setImageResource(photosIds[position+i-1]);
} else if(position < photosIds.length-i-2){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[position+2]);
   .
   .
   .
   photoBox(i-1).setImageResource(photosIds[position+i-2]);
   photoBox(i).setImageResource(photosIds[0]);
} . . . else if(position < photosIds.length-1){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[0]);
   photoBox4.setImageResource(photosIds[1]);
   .
   .
   .
   photoBox(i-1).setImageResource(photosIds[i-2-2]);
   photoBox(i).setImageResource(photosIds[i-2-1]);
} else {
    photoBox2.setImageResource(photosIds[0]);
    photoBox3.setImageResource(photosIds[1]);
    .
    .
    .
    photoBox(i-1).setImageResource(photosIds[i-1-2]);
    photoBox(i).setImageResource(photosIds[i-1-1]);
}

:您的商品数量

[i-2-2] :中间的数字2是 viewpager 最后一页中的项目数。

答案 7 :(得分:-2)

我不认为View Viewr的局限性是可能的。它只允许用户一次查看页面1。您可以通过使用片段来解决问题,并且并排放置2个ViewPager片段并使用按钮来计算要实现的页面翻转,但代码可能会变得非常复杂。

您可以尝试使用ViewFlipper之类的东西 - 您可以在其中进行更多自定义(包括动画)。

希望这会有所帮助。