Форум программистов, компьютерный форум CyberForum.ru

Программирование Android

Войти
Регистрация
Восстановить пароль
 
PhantomR
5 / 5 / 0
Регистрация: 04.02.2016
Сообщений: 74
#1

Viewpager with indicator + horizontal scrolling - Android

19.08.2016, 07:58. Просмотров 362. Ответов 13
Метки нет (Все метки)

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

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

Необходимо сделать горизонтально прокручивающийся список в 2 ряда и 3 столбика (6 элементов) с индикацией отображения количества страниц и на какой странице находимся. Я так понимаю необходим viewpager with indicator ? Как же сделать 3х2? С помощью framelayout или как ещё, подскажите?
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.08.2016, 07:58     Viewpager with indicator + horizontal scrolling
Посмотрите здесь:

создание ViewPager Android
ViewPager Android
Android ViewPager
ViewPager Indicator Android
ViewPager Android
Отмена scrolling-a одной страницы Android
Android Правильный ViewPager
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
CoolMind
418 / 401 / 65
Регистрация: 06.10.2012
Сообщений: 1,723
19.08.2016, 12:06     Viewpager with indicator + horizontal scrolling #2
PhantomR, хоть бы картинку нарисовали, что ли.
Для таблиц есть два варианта: TableLayout, LinearLayout.
PhantomR
5 / 5 / 0
Регистрация: 04.02.2016
Сообщений: 74
19.08.2016, 12:35  [ТС]     Viewpager with indicator + horizontal scrolling #3
Вот картинка приложения.
Миниатюры
Viewpager with indicator + horizontal scrolling  
CoolMind
418 / 401 / 65
Регистрация: 06.10.2012
Сообщений: 1,723
19.08.2016, 15:51     Viewpager with indicator + horizontal scrolling #4
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
256 / 232 / 93
Регистрация: 11.01.2015
Сообщений: 651
20.08.2016, 13:02     Viewpager with indicator + horizontal scrolling #5
PhantomR, для индикаторов - viewpager indicator

Не по теме:

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

PhantomR
5 / 5 / 0
Регистрация: 04.02.2016
Сообщений: 74
20.08.2016, 13:04  [ТС]     Viewpager with indicator + horizontal scrolling #6
Спасибо.

А элементы списка 2х3 с помощью Fragment делать как-то?
Mikalai
256 / 232 / 93
Регистрация: 11.01.2015
Сообщений: 651
20.08.2016, 18:05     Viewpager with indicator + horizontal scrolling #7
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
418 / 401 / 65
Регистрация: 06.10.2012
Сообщений: 1,723
22.08.2016, 10:19     Viewpager with indicator + horizontal scrolling #8
Цитата Сообщение от PhantomR Посмотреть сообщение
А элементы списка 2х3 с помощью Fragment делать как-то?
Фрагмент сам по себе служит для хранения внутри себя какого-то содержимого. Т.е. достаточно создать с помощью "мастера" фрагмент, а уже в разметке прописать, например, TableLayout. Если содержимое меняется динамически, то можно заморочиться чем-то вроде GridView с адаптером. RecyclerView тут ни при чём.
Паблито
22.08.2016, 10:43
  #9

Не по теме:

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

PhantomR
5 / 5 / 0
Регистрация: 04.02.2016
Сообщений: 74
22.08.2016, 11:25  [ТС]     Viewpager with indicator + horizontal scrolling #10
Касательно внешнего вида, есть чёткий рисунок и понимание. А вот какие технологии использовать. Для этого эту тему и создал.

Склоняюсь к gridview с адаптером для отображения 2х3
CoolMind
418 / 401 / 65
Регистрация: 06.10.2012
Сообщений: 1,723
22.08.2016, 14:38     Viewpager with indicator + horizontal scrolling #11
Цитата Сообщение от PhantomR Посмотреть сообщение
есть чёткий рисунок и понимание
Оба раза ха-ха.
Цитата Сообщение от PhantomR Посмотреть сообщение
Склоняюсь к gridview с адаптером для отображения 2х3
Начните уже делать.
Mikalai
256 / 232 / 93
Регистрация: 11.01.2015
Сообщений: 651
25.08.2016, 02:01     Viewpager with indicator + horizontal scrolling #12
Цитата Сообщение от CoolMind Посмотреть сообщение
RecyclerView тут ни при чём.
А как же тогда это получается? Или это не RecyclerView? ))
зы: гиф поплыл ))
Миниатюры
Viewpager with indicator + horizontal scrolling  
CoolMind
418 / 401 / 65
Регистрация: 06.10.2012
Сообщений: 1,723
25.08.2016, 11:41     Viewpager with indicator + horizontal scrolling #13
Mikalai, наверное, можно и RecyclerView с соответствующими настройками, но проще всего подходит GridView, он как раз для этого и предназначен. Если сделали с первым, то молодец.
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.08.2016, 13:13     Viewpager with indicator + horizontal scrolling
Еще ссылки по теме:

Android Как в TabWidget убрать Tab indicator?
Android ViewPager и Tab
Android ViewPager и TextView
Android Как можно сделать scrolling не текста, а картинок?
Изображения в Scrolling Activity Android

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
PhantomR
5 / 5 / 0
Регистрация: 04.02.2016
Сообщений: 74
25.08.2016, 13:13  [ТС]     Viewpager with indicator + horizontal scrolling #14
Тут прикол, что нужно считывать каждую страницу с 6 элементами и снизу показывать точками сколько этих страниц. И показывать на какой находимся (1-ая страница с 1 по 6 элемент, 2-ая страница с 7 по 12 элемент и так далее).
Yandex
Объявления
25.08.2016, 13:13     Viewpager with indicator + horizontal scrolling
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru