Советы по Android Tabs
Вкладки являются одним из наиболее часто используемых и полезных компонент мобильных пользовательских интерфейсов. Вкладки обеспечивают быстрый и легкий доступ к различным частям приложения. В Android приложениях вкладки используются в различных формах. В некоторых случаях дизайн вкладок скопирован с других платформ, а в некоторых случаях используется устаревший дизайн старых версий Android. Это понятно, т.к. существует очень много различных реализаций вкладок в связи с тем, что дизайн Android не был определен в самом начале. Сейчас данная ситуация изменилась, и есть ориентир для дизайна пользовательского интерфейса с вкладками.
В этой статье я хотел бы взглянуть на текущее состояние интерфейсов с вкладками и дать несколько советов, как сохранить единообразный стиль платформы.
Вкладки наверх
Год назад была дискуссия — где должны быть вкладки: сверху или снизу. Я думаю, что эта дискуссия закончилась. Вкладки наверх. Есть несколько причин для этого:
- Природная иерархия вещей идет сверху вниз. Вкладки являются заголовками и выше в иерархии информации, чем контент на экране.
- Более сложным программам нужно больше, чем один уровень навигации. Выступы на нижней вызовут путаницу для пользователей, когда речь заходит о иерархии навигации.
- Пользователи сканируют новый экран сверху вниз. Они лучше поймут вашу иерархию на экране, когда вкладки расположены сверху.
Недавно обновленное приложение Eurosport дает нам прекрасный пример перечисленных выше пунктов. Взгляните на скриншоты ниже. Первый это старое приложение, ниже скриншот новой версии. Навигация по иерархии в старом приложении вызывала большее заблуждение. Во-первых, это выглядело неверно (больше о стиле вкладок ниже), так же очень трудно понять, как две панели вкладок связаны друг с другом. В новой версии нет мест, которые могут вызвать непонимания структуры приложения.
Стиль вкладок
Стиль вкладок в Android очень отличается от других платформ. Этот дизайн был впервые внедрен в платформу в версии 3.0, но даже на поздних версиях ОС стиль вкладок выглядит устаревшим.
Вот несколько мыслей о стилизации Android вкладок:
- Android вкладки редко содержат значки. Они чаще всего представлены в виде текста. Есть хорошая причина для этого. Трудно придумать описательные значки для всех возможных вариантов навигации. Часто текст намного лучше.
- Android вкладки — не квадратные кнопки. Т.к. они в основном содержат текст, можно сэкономить много места на экране, немного сжимая их.
- Визуальный стиль Android вкладок ровный. Он не должен быть глянцевым или отражающим.
Посмотрите эти два примера стилей Android вкладок. На первом один из редких случаев, когда вкладки содержат значки. Это приложения по умолчанию Android телефон на 4.1. В общем, я посоветовал бы избегать использования значков, если вы не уверены, что ваши значки будут без сомнения изображать функционал.
Ниже вы можете увидеть приложение Foursquare, в котором вкладки содержат текст.
Самый простой способ испортить вид вашего приложения — это имитировать глянцевые квадратные вкладки IOS. Следующим приложениям необходимо обновление интерфейса (Spiegel Online и PC-Welt).
Выбор цвета для вкладок на Android безграничен. Ни в коем случае все вкладки не должны иметь черный фон и синюю подсветку. Можно использовать бренд вашего приложения при выборе цвета вкладки!
Вкладки для навигации, не для действий!
Вкладки предназначены для использования при навигации между экранами в вашем приложение. Не используйте их, чтобы вызывать действия. Для действий используйте панели действий. Вот еще один пример плохого дизайна в приложении Spiegel Online. Часть из вкладок, на самом деле действия (например, обмен), которые не используются более в приложении. Это сбивает с толку и является неправильным использованием компонента вкладок.
Вкладка всегда должна быть выбрана
К сожалению, в приложении Spiegel Online в значительной степени сделано неправильно все, что только можно сделать неправильно с вкладками. Мало того, что они выглядят не так, находятся в неправильном месте и содержат одновременно навигацию и действия, они так же не активируются корректно.
Если ваше приложение использует вкладки, то одна из вкладок всегда должна быть выделена когда вкладки видны. Не может быть ситуации, когда вкладки отображаются пользователю, но их использование не приводит к требуемому функционалу! Когда пользователь переходит глубже в приложении, вы должны скрывать панели вкладок. Панель вкладок без выделенной вкладки заставит ваших пользователи почувствуют себя потерянными.
Вкладки и возврат назад
На Android мы всегда должны быть осторожны с работой стэка активити (back stack) и функцией кнопки Назад. Перемещение между вкладками не считается изменением страниц. Большинство приложений, использующих вкладки, не добавляют изменений в стэк.
Существует веская причина, почему смена вкладок не вызывает изменений в стэк. Пользователи не чувствуют, что они закрыли экран, когда они переходят между вкладками.
Для осуществления ощущения, что все вкладки на одном экране, вы не должны использовать анимированные переходы активити по умолчанию между вкладками (пользователи ассоциируют данную анимацию с движением глубже в приложении). Вкладки рядом и любые анимации должны отражать это. Лучшая анимация — слайдинг. Это призывает пользователей использовать жесты для перемещения между вкладками.
Swipe!
Интерфейс с вкладками превосходен, если перемещения между вкладками не требует усилий. Хотя нажатия вкладок работают замечательно, слайдинг между ними смотрится еще лучше. Для слайд жеста пользователям не нужно добраться до верхней части интерфейса. Данный способ также более удобен и естественен для нас. Страница ведет себя так, как мы интуитивно ожидаем. Все интерфейсы вкладок должны всегда поддерживать слайд жест!
Масштабируемость
Вкладки очень приятно масштабируются под интерфейс планшета. Если вы используете вкладки в сочетании с панелью действий (action bar), то API позаботится о масштабировании за вас. Если на панели действий есть достаточно места, то вкладки переезжают туда, чтобы сэкономить место на экране. Приложение Google I//O является отличным примером.
Источник
Полный список
— используем навигацию в ActionBar
На прошлом уроке мы рассмотрели добавление элементов ActionBar. Пользователю эти элементы удобно использовать для совершения каких-либо операций в приложении. Например, в почтовой программе это может быть удаление письма, пересылка, ответ и т.д.
Теперь рассмотрим, как добавить элементы для навигации по приложению. Есть два типа элементов для навигации: табы и выпадающий список. Создадим простое приложение и реализуем в нем сначала один, затем второй способ.
Project name: P1081_ActionBarNavigation
Build Target: Android 4.1
Application name: ActionBarItems
Package name: ru.startandroid.develop.p1081actionbarnavigation
Create Activity: MainActivity
Никакие строки не добавляем, основной layout не трогаем.
Смотрим, что нам нужно, чтобы включить табы.
В onCreate мы получаем доступ к ActionBar и устанавливаем для него режим навигации в NAVIGATION_MODE_TABS. Далее идет добавление табов. Тут все несложно – создаем, пишем текст, присваиваем обработчика, добавляем в ActionBar.
Обработчиком для табов мы сделали MainActivity, оно реализует методы интерфейса ActionBar.TabListener:
onTabReselected – выбран уже выбранный таб
В эти методы поместим запись в лог и посмотрим, как оно все там работает.
Все сохраняем и запускаем приложение.
Сейчас выбран первый таб и лог сразу об этом сообщает:
selected tab: tab1
Нажмем на второй таб,
unselected tab: tab1
selected tab: tab2
Первый таб «развыбран», а второй выбран.
Еще раз нажмем на второй таб:
reselected tab: tab2
Второй таб перевыбран. Все логично и понятно.
Я, чтобы не перегружать урок, не стал реализовывать какие-либо операции по навигации в приложении. А, вообще, подразумевается, что в методах обработчика мы кодим операции с фрагментами. Нам даже любезно предоставляют объект FragmentTransaction для этих целей. При этом хелп предупреждает, что в этих методах нам не надо самим вызывать метод commit, а также мы не можем добавлять транзакцию в BackStack.
Выпадающий список
Теперь посмотрим, как работает навигация с выпадающим списком.
В onCreate получаем ActionBar и включаем ему режим навигации NAVIGATION_MODE_LIST. Для выпадающего списка необходимо создать адаптер, реализующий SpinnerAdapter. Пусть это будет ArrayAdapter. При создании используем массив из трех строк. Далее вызываем метод setListNavigationCallbacks, в который передаем адаптер и обработчик.
Обработчиком у нас снова является Activity, реализует метод onNavigationItemSelected интерфейса ActionBar.OnNavigationListener. Этот метод дает нам позицию и id выбранного из списка элемента. Выводим в лог эту инфу и соответствующий элемент массива.
В манифесте я прописал для MainActivity атрибут темы: android:theme=»@android:style/Theme.Holo.Light». Иначе был темный текст на темном фоне.
Все сохраняем и запускаем.
Первый элемент сразу выбран. В логах видим:
selected: position = 0, one
Выберем какой-нить другой элемент из списка
selected: position = 2, three
Снова все логично и понятно.
Для обоих видов навигации мы всегда можем получить текущий выбранный элемент с помощью метода getSelectedNavigationIndex. А для навигации с табами есть также метод getSelectedTab, возвращающий текущий выбранный таб.
Разумеется, что вместе с навигацией мы можем добавлять в ActionBar и обычные элементы, которые были рассмотрены на прошлом уроке.
При этом, если места будет недостаточно, то ActionBar разделит все свои элементы на две полосы.
Начиная с четвертой версии Андроид, можно использовать атрибут uiOptions для Activity или Application в манифесте. Если присвоить ему значение splitActionBarWhenNarrow, то результат при нехватке места получится такой:
Элементы ушли вниз. Правда, при этом почему-то перестает работать withText в showAsAction.
На следующем уроке:
— работаем с ListFragment
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Источник
Мобильные паттерны навигации
Как делать правильно и удобно
Подумал я о следующем: на чем же больше всего народу ломается в попытке сделать что-то хорошее? Вариантов, конечно же, тонна и маленькая тележка, но один из них самый страшный и ужасный — Навигация.
Начинающие свой путь в гуях и уиксах дизайнеры натыкаются на нее родимую сразу, а читать гайдлайны (где тоже про навигацию отведено где-то около 1/50 всего объема) никогда не было модно. Как и инструкцию от бытовой техники… Ну да Бог с ними, с гайдами, все равно потом прочтете и не один раз.
Какие паттерны бывают?
Как таковых, паттернов навигации не то чтобы вон как много. Давайте их перечислим:
- Drawer — он же гамбургер меню.
- Tab bar
- Modal view
- Wizard
- Breadcrumbs— редчайший представитель навигации в мобилках.
Но прежде чем рассмотреть каждый из них, давайте разберемся с понятием “Погружение”.
Иерархия
Пользователь путешествует по аппу при помощи погружения внутрь (вниз по иерархии). Также этот термин зовут Pushin, drill down. Суть название не меняет ибо в 99.9% случаев в мобильных аппах навигация погружная.
На практике погружение означает следующее: Вася ткнул палец в какую-то ячейку (строчку, кнопку, иконку, картинку), и вдруг он буквально проваливается внутрь этого объекта и оказывается на другой экран. Этот другой экран обычно хранит информацию о верхнем объекте в развернутом виде.
- Открыл, значит, Вася приложеньку и оказался на Главной странице. Далее в верхних табах выбрал он “Контрагентов”. Затем он тапнул на имя контрагента “ООО “Рога и копыта” и “провалился” на →
- → страницу с информацией о компании. Решил он посмотреть кто там работает, ткнул в “Сотрудники компании” и “провалился” на →
- → страницу со “Списоком контактов” этой компании. И тут Вася увидел нужного ему человека, Остапа, и ткнул кривым пальцем прямо в его имя. “Провалился” Василий на →
- → страницу “Профиль” Остапа! Ура, Василий оказался на третьем уровень вложенности приложеньки! 🚀
Схематично выглядит это примерно так:
А теперь обратите внимание: слева на страницах “ООО “Рога и копыта” и “Профиль” есть стрелочка-кнопочка “Назад”! Тапнув по ней наш герой “поднимается” на уровень выше.
И самое главное! Кто заметил, что на главной странице “Контрагенты” нет кнопочки-стрелочки “Назад”?
Молодец, дорогой читатель, ее там просто НЕ МОЖЕТ БЫТЬ потому что подняться на уровень выше мы не сможем ибо некуда уже.
Это было просто. Но не все это понимают, к сожалению. Кстати, уровней иерархии может быть бесконечно много, но все же стоит спроектировать систему так, чтобы пользователь не мог гулять на 20 уровней иерархии вглубь аппа. 5–6 уровней вложенности будет за глаза иначе пользователь в какой-то момент гарантированно потеряется и будет страдать.
Источник
