Одной из наиболее важных парадигм пользовательского интерфейса для современных мобильных телефонов является их сенсорный интерфейс с возможностью касания. Наиболее очевидным примером этого является представление пейджера, которое позволяет пользователю интуитивно пролистывать страницы информации. Наиболее известным примером этого является домашний экран iOS, который размещает приложения в сетке на нескольких страницах. Это оказалось настолько успешным, что оно использовалось во многих других местах и было напрямую скопировано другими производителями телефонов.
Когда я начал программировать для Android, я предполагал, что будет готовый компонент, или, по крайней мере, один, который можно легко настроить для выполнения постраничного представления. Оказалось, что это не так, поэтому мне пришлось погрузиться в исходный код Android, чтобы найти способ его реализации (и, кроме того, это встроенная функция iOS). Я думал, что поделюсь с вами плодами своего труда.
Исследуя
Сначала я начал играть с ViewFlipper, используя жесты, чтобы обеспечить ввод данных для смены страниц. Это работало, но не давало правильной обратной связи пользователю во время прокрутки. Когда пейджер прокручивает, пользователь ожидает, что страница будет перемещаться с помощью прокрутки. При таком подходе страница не анимируется, пока жест смахивания не будет завершен.
Затем я поиграл с идеей написать свой собственный компонент прокрутки с нуля. Это дало бы мне большую гибкость, но потребовало бы много усилий. Как правило, гораздо лучше строить на существующих компонентах, чем писать свои, поэтому у меня был последний трал через API, чтобы посмотреть, что я мог бы использовать. Именно тогда я нашел HorizontalScrollView .
Это действует как традиционный вид прокрутки, за исключением того, что он работает горизонтально, что именно то, что я хочу. Он также предоставляет привязки клавиш бесплатно, что является бонусом. Единственными недостающими частями являются метод, позволяющий привязать его к границе страницы, когда пользователь отпускает палец, простой в использовании API для добавления и удаления страниц и индикатор страницы для отображения текущей страницы. Я создал подкласс и начал настраивать его так, чтобы получить желаемый эффект.
Простое управление страницами
HorizontalScrollView принимает только один дочерний вид по умолчанию, и программист должен убедиться, что он имеет правильный размер. Я хотел иметь несколько дочерних представлений или страниц, и каждая страница должна была занимать весь видовой экран. Для этого я добавил метод addPage() , который будет принимать вид, изменяя его размер до размера области просмотра, и добавляя его в LinearLayout который служил в качестве дочернего представления ScrollView .
public class Pager extends HorizontalScrollView { private LinearLayout contents; ... public void addPage(View child) { int width = getWidth(); child.setLayoutParams(new LayoutParams(width, LayoutParams.FILL_PARENT)); contents.addView(child); contents.requestLayout(); firePageCountChanged(); } ... }
Привязка к границе страницы
Для этого мы просто слушаем события smoothScrollTo() , а затем выполняем последний smoothScrollTo() чтобы прокрутить назад до ближайшей границы страницы.
public boolean onTouchEvent(MotionEvent evt) { boolean result = super.onTouchEvent(evt); int width = getWidth(); if (evt.getAction() == MotionEvent.ACTION_UP) { int pg = (getScrollX() + width / 2) / width; smoothScrollTo(pg * width, 0); } return result; }
Дополнительный код требуется для обработки событий на основе клавиатуры аналогичным образом, и я оставляю это упражнение для читателя.
Пейджер на GitHub содержит полный исходный код в PagingScrollerExample .
Индикатор страницы
По умолчанию на горизонтальной панели прокрутки отображается полоса прокрутки стандартного стиля, когда прокручивается панель прокрутки, которая исчезает через несколько секунд. Это нормально в большинстве случаев, и это именно то, что я использовал на NodeDroid , моем приложении для проверки использования. Но я подумал, что было бы неплохо иметь индикатор страницы в стиле iOS в нижней части экрана.
Это было реализовано путем создания отдельного компонента пользовательского представления для отображения страниц, который я назвал PageIndicator . Этот компонент существует независимо от пейджера, так что вы можете разместить представление там, где вы хотите. В начале своей деятельности вы просто указываете индикатору страницы, какой пейджер слушать, и он автоматически обновляется с этого момента.
Чтобы пейджер обновлялся правильно, он должен знать, когда страница изменяется, и когда страницы добавляются или удаляются из пейджера. Необъяснимо, что в Android нет прослушивателя по умолчанию для ScrollView, поэтому единственный способ получить уведомление — перехватить его в подклассе с onScrollChanged метода onScrollChanged . В своем коде я создал второй набор классов Listener / Event с именем OnPageChangeListener , с двумя событиями с именами onPageChange() и onPageCountChange() .
PageIndicator на GitHub содержит полный исходный код в PagingScrollerExample .
Попробуйте сами
Я создал пример приложения, которое демонстрирует использование представления, и код доступен на GitHub. Проверьте PagingScrollerExample . Если вы хотите попробовать его, клонируйте репозиторий, загрузите проект в Eclipse (с установленным плагином ADT для Eclipse ), и вы должны уйти.