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

@PhantomR 5 / 5 / 1 Регистрация: 04.02.2016 Сообщений: 78
		1
	Viewpager with indicator + horizontal scrolling 19.08.2016, 07:58. Показов 1977. Ответов 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