Может ли ViewPager отображать несколько просмотров на странице?
После опроса галереи и просмотра горизонтальной прокрутки я обнаружил, что просмотр пейджера делает то, что мне нужно, но с одним незначительным недостатком. Может ли просмотр пейджера иметь несколько просмотров на страницу?
Я знаю, что View Pager показывает только 1 просмотр/страницу за салфетки. Мне было интересно, могу ли я ограничить ширину просмотров, чтобы мой второй просмотр после него показывался?
Например: у меня есть 3 представления, и я хочу, чтобы на экране отображалось представление 1 и часть представления 2, чтобы пользователь знал, что есть больше контента, чтобы они могли прокручивать, чтобы просмотреть 2.
|view 1|view 2|view 3|
|screen |
Ответы
Ответ 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 Krant]()
![Tablet 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);