Несколько страниц одновременно на ViewPager - PullRequest
45 голосов
/ 12 января 2012

Есть ли возможность отображать две страницы одновременно при использовании ViewPager?Я не ищу краевой эффект, а скорее для двух полных страниц одновременно.

Заранее спасибо.

Ответы [ 8 ]

67 голосов
/ 30 августа 2012

Пожалуйста, посмотрите на метод getPageWidth в соответствующем PagerAdapter.Переопределите его и верните, например, 0.8f, чтобы все дочерние страницы занимали только 80% ширины ViewPager.

Дополнительная информация: http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

31 голосов
/ 20 января 2014

Смотрите мой более актуальный ответ здесь: Может ли ViewPager иметь несколько просмотров на странице?

Я обнаружил, что, возможно, еще более простое решение благодаряуказание отрицательного поля для ViewPager.Я создал проект MultiViewPager на GitHub, на который вы можете взглянуть:

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 измерения.)

Мы реализовали это в приложении к голландской газете De Telegraaf Krant :

Phone example in De Telegraaf KrantTablet example

12 голосов
/ 14 сентября 2014

Вы должны переопределить метод getPageWidth() в адаптере видового пейджера. Например:

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

Попробуйте этот код в своем адаптере, и тогда вы поймете.

5 голосов
/ 19 октября 2012

См. эту запись в блоге .
Техника PagerContainer решила мою проблему.

EDIT:
Я нашел тот же ответ.
Как перейти с Галереи на HorizontalScrollView & ViewPager?

2 голосов
/ 02 февраля 2017

создайте файл макета: 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>

размер окна просмотра настолько мал, насколько вы хотите, чтобы ваши страницы были. С android: clipToPadding = "false" страницы за пределами пейджер также видны. Но теперь перетаскивание за пределы видового пейджера не имеет никакого эффекта. Это можно исправить, выбрав касания из контейнера пейджера и передав их на пейджер:

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);
      }
 });
2 голосов
/ 26 ноября 2012

Вы можете решить эту проблему, используя getPageWidth в классе PagerAdapter.

Убедитесь, что ваш JAR обновлен . Поскольку ранее ViewPager не поддерживал несколько страниц одновременно.

публичный float getPageWidth () {

return 0.4f; (Вы можете выбрать его. Для полного экрана на странице вы должны дать 1f) }

0 голосов
/ 09 марта 2017

Это может быть указано в Элементном макете 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 : количество ваших предметов

[i-2-2] : число 2 в середине - это числоэлементов на последней странице окна просмотра .

0 голосов
/ 03 февраля 2012

Я не думаю, что это возможно с ограничениями View Pager. Это позволяет только пользователю просматривать страницы 1 одновременно. Возможно, вам удастся что-то решить с использованием фрагментов и иметь 2 фрагмента ViewPager рядом и использовать кнопки для обработки перелистывания страниц, которое вы хотите реализовать, но код может стать очень сложным.

Вы можете попробовать что-то вроде ViewFlipper - где вы можете сделать гораздо больше настроек (включая анимацию).

Надеюсь, это поможет.

...