Viewpager with indicator + horizontal scrolling

@PhantomR · Регистрация: 04.02.2016

Студворк — интернет-сервис помощи студентам

Есть приложение: https://github.com/PhantomRec/JSON

В нём реализован список в виде RecyclerView с данным взятыми из JSON формата.

Необходимо сделать горизонтально прокручивающийся список в 2 ряда и 3 столбика (6 элементов) с индикацией отображения количества страниц и на какой странице находимся. Я так понимаю необходим viewpager with indicator ? Как же сделать 3х2? С помощью framelayout или как ещё, подскажите?

@CoolMind · 19.08.2016, 12:06

PhantomR, хоть бы картинку нарисовали, что ли.
Для таблиц есть два варианта: TableLayout, LinearLayout.

@PhantomR · 19.08.2016, 12:35 **[ТС]**

Вот картинка приложения.

@CoolMind · 19.08.2016, 15:51

PhantomR, ха-ха

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

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Начало разметки.
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
 
                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"/>
 
                <LinearLayout
                    android:id="@+id/number_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ffffff"
                    android:gravity="center"
                    android:orientation="horizontal"/>
 
            </FrameLayout>
 
Здесь остальная часть разметки.

Примерно так выглядит разметка для ViewPager, у которого вверху есть прямоугольник с номерами страниц, точками и чем угодно.
Сам ViewPager и индикатор страниц заполняются программно. На этот счёт есть множество руководств. Вам можно, например, использовать стандарт - создание фрагментов. У меня это были изображения, поэтому я фрагменты не использовал.
Также надо создать класс-адаптер, в котором прописать логику создания страниц (или фрагментов). Назначить слушатель для ViewPager, в котором описать события пролистывания. Установить текущую страницу (setCurrentItem(0)). Обозначить первый номер страницы (это будет, скорее всего, какой-то специальный рисунок).
При повороте устройства не забыть запомнить номер страницы и потом её восстановить. Там много всего под все случаи жизни.

@Mikalai · 20.08.2016, 13:02

PhantomR, для индикаторов - viewpager indicator

Не по теме:

Вчера решил попробовать выложить в общий доступ какую-нибудь библиотеку. Под руку попался самописный индикатор. Вот только закончил оформлять. Но из jcenter пока не видно её. Запрос отправил. Молчат партизаны.

@PhantomR · 20.08.2016, 13:04 **[ТС]**

Спасибо.

А элементы списка 2х3 с помощью Fragment делать как-то?

@Mikalai · 20.08.2016, 18:05

PhantomR, можно по разному делать. Как вариант на вскидку:
Делаем свой квадратный view-элемент. Например переопределим RelativeLayout и в него потом напихаем что хотим.

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class MyOwnRelativeLayout extends RelativeLayout {
    public MyOwnRelativeLayout(Context context) {
        super(context);
    }
 
    public MyOwnRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyOwnRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public MyOwnRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
 
    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

Для примера положим в него ImageView. Получится следующая разметка для Fragment'а:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
        <package.MyOwnRelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/pic1" />
        </package.MyOwnRelativeLayout>
 
    </LinearLayout>
</LinearLayout>

Ну а потом такие фрагменты вставлять во ViewPager нужно будет. Хотя для отображения списка это коряво всё получается. Геморойно будет данные вставлять в эти вью. Нужно смотреть в сторону RecyclerView однозначно.

@CoolMind · 22.08.2016, 10:19

Сообщение от PhantomR

А элементы списка 2х3 с помощью Fragment делать как-то?

Фрагмент сам по себе служит для хранения внутри себя какого-то содержимого. Т.е. достаточно создать с помощью "мастера" фрагмент, а уже в разметке прописать, например, TableLayout. Если содержимое меняется динамически, то можно заморочиться чем-то вроде GridView с адаптером. RecyclerView тут ни при чём.

Pablito · 22.08.2016, 10:43

Не по теме:

по сути, задача на 1-2 дня максимум, но при условии что есть четкое понимание что и как должно выглядеть, я говорю именно про внешний вид
делать какое-то общее решение - занятие неблагодарное

@PhantomR · 22.08.2016, 11:25 **[ТС]**

Касательно внешнего вида, есть чёткий рисунок и понимание. А вот какие технологии использовать. Для этого эту тему и создал.

Склоняюсь к gridview с адаптером для отображения 2х3

@CoolMind · 22.08.2016, 14:38

Сообщение от PhantomR

есть чёткий рисунок и понимание

Оба раза ха-ха.

Сообщение от PhantomR

Склоняюсь к gridview с адаптером для отображения 2х3

Начните уже делать.

@Mikalai · 25.08.2016, 02:01

Сообщение от CoolMind

RecyclerView тут ни при чём.

А как же тогда это получается? Или это не RecyclerView? ))
зы: гиф поплыл ))

@CoolMind · 25.08.2016, 11:41

Mikalai, наверное, можно и RecyclerView с соответствующими настройками, но проще всего подходит GridView, он как раз для этого и предназначен. Если сделали с первым, то молодец.

@PhantomR · 25.08.2016, 13:13 **[ТС]**

Тут прикол, что нужно считывать каждую страницу с 6 элементами и снизу показывать точками сколько этих страниц. И показывать на какой находимся (1-ая страница с 1 по 6 элемент, 2-ая страница с 7 по 12 элемент и так далее).

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78

	Viewpager with indicator + horizontal scrolling 19.08.2016, 07:58. Показов 2278. Ответов 13 Метки нет (Все метки) Есть приложение: https://github.com/PhantomRec/JSON В нём реализован список в виде RecyclerView с данным взятыми из JSON формата. Необходимо сделать горизонтально прокручивающийся список в 2 ряда и 3 столбика (6 элементов) с индикацией отображения количества страниц и на какой странице находимся. Я так понимаю необходим viewpager with indicator ? Как же сделать 3х2? С помощью framelayout или как ещё, подскажите? 0

@CoolMind 426 / 406 / 68 Регистрация: 06.10.2012 Сообщений: 1,748
	19.08.2016, 12:06
	PhantomR, хоть бы картинку нарисовали, что ли. Для таблиц есть два варианта: TableLayout, LinearLayout. 0

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
	19.08.2016, 12:35 [ТС]
	Вот картинка приложения. Миниатюры 0

@Mikalai 266 / 242 / 96 Регистрация: 11.01.2015 Сообщений: 673
	20.08.2016, 13:02
	PhantomR, для индикаторов - viewpager indicator Не по теме: Вчера решил попробовать выложить в общий доступ какую-нибудь библиотеку. Под руку попался самописный индикатор. Вот только закончил оформлять. Но из jcenter пока не видно её. Запрос отправил. Молчат партизаны. 0

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
	20.08.2016, 13:04 [ТС]
	Спасибо. А элементы списка 2х3 с помощью Fragment делать как-то? 0

Pablito
	22.08.2016, 10:43
	Не по теме: по сути, задача на 1-2 дня максимум, но при условии что есть четкое понимание что и как должно выглядеть, я говорю именно про внешний вид делать какое-то общее решение - занятие неблагодарное 0

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
	22.08.2016, 11:25 [ТС]
	Касательно внешнего вида, есть чёткий рисунок и понимание. А вот какие технологии использовать. Для этого эту тему и создал. Склоняюсь к gridview с адаптером для отображения 2х3 0

@CoolMind 426 / 406 / 68 Регистрация: 06.10.2012 Сообщений: 1,748
	25.08.2016, 11:41
	Mikalai, наверное, можно и RecyclerView с соответствующими настройками, но проще всего подходит GridView, он как раз для этого и предназначен. Если сделали с первым, то молодец. 0

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
	25.08.2016, 13:13 [ТС]
	Тут прикол, что нужно считывать каждую страницу с 6 элементами и снизу показывать точками сколько этих страниц. И показывать на какой находимся (1-ая страница с 1 по 6 элемент, 2-ая страница с 7 по 12 элемент и так далее). 0