Подтвердить что ты не робот

Может ли ViewPager отображать несколько просмотров на странице?

После опроса галереи и просмотра горизонтальной прокрутки я обнаружил, что просмотр пейджера делает то, что мне нужно, но с одним незначительным недостатком. Может ли просмотр пейджера иметь несколько просмотров на страницу?

Я знаю, что View Pager показывает только 1 просмотр/страницу за салфетки. Мне было интересно, могу ли я ограничить ширину просмотров, чтобы мой второй просмотр после него показывался?

Например: у меня есть 3 представления, и я хочу, чтобы на экране отображалось представление 1 и часть представления 2, чтобы пользователь знал, что есть больше контента, чтобы они могли прокручивать, чтобы просмотреть 2.

|view 1|view 2|view 3|
|screen   |
4b9b3361

Ответ 1

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

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:

Phone example in De Telegraaf KrantTablet example

Ответ 2

Марк Мерфи интересное сообщение в блоге, адресованное именно этой проблеме. Хотя я в конечном итоге использовал мое собственное решение в этом потоке, стоит посмотреть на код Дейва Смита, который Марк ссылается в сообщении в блоге:

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

Предупреждение! Прежде чем вы примете этот подход, остерегайтесь некоторых очень серьезных проблем с этим подходом, упомянутых как в конце этого сообщения, так и в комментариях ниже.

В итоге получится следующее:

Screenshot of Dave Smith's PagerContainer

Он эффективно работает, обертывая 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.

Ответ 3

На одном экране можно отобразить более одной страницы. Одним из способов является переопределение метода getPageWidth() в PAgerAdapter. getPageWidth() возвращает число с плавающей запятой между 0 и 1, указывающее, сколько ширины Viewpager должно занимать страница. По умолчанию установлено значение 1. Таким образом, вы можете изменить это значение по желаемой ширине. Вы можете прочитать об этом здесь и проект github.

Ответ 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);

надеюсь, что это поможет!

Ответ 5

У меня была та же проблема с той единственной разницей, что мне нужно было показывать сразу 3 страницы (предыдущие, текущие и следующие страницы). После очень долгого исследования для лучшего решения я думаю, что нашел его. Решение представляет собой сочетание нескольких ответов здесь:

Как отметил @Paul Lammertsma answer - код Дэйва Смита в блоге Марка Мерфи является основой для решения. Единственная проблема для меня заключалась в том, что 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 answer, я смог показать более 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   |

а на втором он выглядит следующим образом:

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

Надеюсь, это поможет кому-то! Я потратил впустую, как 2 дня на это... Удачи.

Ответ 6

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

отрегулировать возвращаемое значение... lesser означает больше изображения...... 0.3 означает как минимум 3 изображения за раз.

Ответ 7

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