Viewpager with indicator + horizontal scrolling

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

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

Есть приложение: 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

Начало разметки.
            <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

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

<?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 элемент и так далее).

Новые блоги и статьи
Как клонировать определенную ветку в Git bytestream 24.01.2025 Одной из ключевых функций Git является возможность клонирования веток, что позволяет создавать локальные копии удаленных репозиториев и работать с определенными версиями проекта. Этот механизм. . .	Как в цикле обойти строки DataFrame в Pandas Python bytestream 24.01.2025 DataFrame представляет собой одну из основных структур данных в библиотеке Python Pandas, которая организует информацию в виде двумерной таблицы с строками и столбцами. Эта структура данных особенно. . .	Как получить имя текущей ветки в Git bytestream 24.01.2025 При работе с Git часто возникает необходимость определить имя текущей ветки, в которой ведется разработка. Знание текущей ветки является критически важным аспектом для эффективного управления. . .	Как отсортировать массив объектов по значению поля объекта в JavaScript bytestream 24.01.2025 При разработке веб-приложений на JavaScript разработчики часто сталкиваются с необходимостью работать с массивами объектов. Эти структуры данных представляют собой упорядоченные наборы элементов, где. . .	Ошибка "src refspec master does not match any" при пуше коммита в Git bytestream 24.01.2025 При работе с системой контроля версий Git разработчики нередко сталкиваются с различными ошибками, одной из которых является сообщение "src refspec master does not match any". Эта ошибка возникает. . .	Как округлить не более двух цифр после запятой в JavaScript bytestream 24.01.2025 При работе с числами в JavaScript разработчики часто сталкиваются с необходимостью округления десятичных значений до определенного количества знаков после запятой. Это особенно важно при работе с. . .
Как сделать UPDATE из SELECT в SQL Server hw_wired 24.01.2025 В современных системах управления базами данных операции обновления и выборки данных являются фундаментальными инструментами для работы с информацией. SQL Server предоставляет мощные команды UPDATE и. . .	Как вставить элемент в массив на указанный индекс в JavaScript hw_wired 24.01.2025 Массивы являются одной из фундаментальных структур данных в JavaScript, предоставляющей разработчикам мощный инструмент для хранения и управления упорядоченными наборами данных. Они позволяют хранить. . .	Чем отличаются HashMap и Hashtable в Java hw_wired 24.01.2025 В мире разработки на Java существует множество инструментов для работы с коллекциями данных, и среди них особое место занимают структуры данных для хранения пар ключ-значение. HashMap и Hashtable. . .	Как конвертировать видео в GIF hw_wired 24.01.2025 В современном мире анимированные изображения стали неотъемлемой частью цифровой коммуникации. Формат GIF (Graphics Interchange Format) представляет собой особый тип файлов, который позволяет. . .	Как скопировать текст в буфер обмена на JavaScript во всех браузерах hw_wired 24.01.2025 Копирование текста в буфер обмена стало неотъемлемой частью современных веб-приложений, значительно улучшающей пользовательский опыт и упрощающей работу с контентом. В эпоху активного обмена. . .	Как скрыть клавиатуру на Android hw_wired 24.01.2025 При разработке Android-приложений часто возникает необходимость управлять видимостью экранной клавиатуры для улучшения пользовательского опыта. Одним из наиболее эффективных способов контроля. . .

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
		1
	Viewpager with indicator + horizontal scrolling 19.08.2016, 07:58. Показов 1991. Ответов 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	2
	PhantomR, хоть бы картинку нарисовали, что ли. Для таблиц есть два варианта: TableLayout, LinearLayout. 0

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

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

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

@CoolMind 426 / 406 / 68 Регистрация: 06.10.2012 Сообщений: 1,748
	22.08.2016, 10:19	8
	Сообщение от PhantomR А элементы списка 2х3 с помощью Fragment делать как-то? Фрагмент сам по себе служит для хранения внутри себя какого-то содержимого. Т.е. достаточно создать с помощью "мастера" фрагмент, а уже в разметке прописать, например, TableLayout. Если содержимое меняется динамически, то можно заморочиться чем-то вроде GridView с адаптером. RecyclerView тут ни при чём. 0

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

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

@CoolMind 426 / 406 / 68 Регистрация: 06.10.2012 Сообщений: 1,748
	22.08.2016, 14:38	11
	Сообщение от PhantomR есть чёткий рисунок и понимание Оба раза ха-ха. Сообщение от PhantomR Склоняюсь к gridview с адаптером для отображения 2х3 Начните уже делать. 0

@Mikalai 266 / 242 / 96 Регистрация: 11.01.2015 Сообщений: 673
	25.08.2016, 02:01	12
	Сообщение от CoolMind RecyclerView тут ни при чём. А как же тогда это получается? Или это не RecyclerView? )) зы: гиф поплыл )) Миниатюры 0

	25.08.2016, 13:13

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

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