Навигационный ящик (Google+ против YouTube)


403

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

У других вопросов переполнения стека не было ответов о том, как это сделать, поэтому я пытаюсь собрать как можно больше информации, чтобы помочь другим. Все приложения, о которых я упоминаю ниже, отлично справляются с реализацией слайд-меню.

1. Google Plus (по состоянию на 7/7/12)

Скриншот выдвигающегося меню Google+

Вы можете перейти только с первого экрана на второй, нажав логотип G + в верхнем левом углу. Обратите внимание, что весь экран перемещается из своего положения и подталкивается к правой стороне экрана (включая панель действий). Чтобы вернуться к первому экрану, вы можете либо снова сфокусировать правую сторону, либо снова щелкнуть значок G +.

2. YouTube (по состоянию на 7/7/12)

Скриншот выдвигающегося меню YouTube

Вы можете перейти с первого экрана на второй, используя два метода. Либо нажмите на логотип YouTube в верхнем левом углу, либо вы можете использовать жест смахивания, чтобы переместить его вправо. Это уже отличается от приложения G +. Во-вторых, вы можете видеть, что панель действий остается на месте (в отличие от G +). Наконец, чтобы вернуть оригинальный экран, он работает так же, как G +.


1
Судя по всему, не многие люди имели опыт работы над чем-то вроде этого. Я предлагаю попробовать реализовать что-то самостоятельно и обратиться в SO с конкретными проблемами, с которыми вы можете столкнуться.
Дэвид Титаренко

7
Да, именно поэтому я разместил SO вопрос в другом, который, я считаю, заслуживает немного большего внимания. Мне просто интересно, есть ли кто-нибудь, кто успешно достиг этого и хотел бы поделиться своей мудростью.
EGHDK

1
@EGHDK Ознакомьтесь с этой серией статей: android.cyrilmottier.com/?p=658
Алекс Локвуд

2
Я ответил на этот вопрос некоторое время назад, но я вернулся, чтобы еще раз подчеркнуть, что у Prixing есть лучшее всплывающее меню там ... безусловно. Это абсолютно красиво, идеально гладко, и это позорит Facebook, Google+ и YouTube. EverNote тоже довольно хорош ... но все же не так совершенен, как Prixing. Ознакомьтесь с этой серией постов о том, как было реализовано всплывающее меню (от самого главного разработчика в Prixing!).
Алекс Локвуд

2
С версией 13 пакета поддержки Android (май 2013 г.) есть DrawerLayout для создания Навигационного Ящика, который можно вытянуть из края окна. И навигационный ящик - теперь образец дизайна. developer.android.com/tools/extras/support-library.html
Вубао Ли,

Ответы:


152

Редактировать № 3:

Шаблон Navigation Drawer официально описан в документации Android!

введите описание изображения здесь Проверьте следующие ссылки:

  • Дизайнерские документы можно найти здесь .
  • Документы для разработчиков можно найти здесь .

Изменить № 2:

Роман Нурик (инженер-разработчик Android в Google) подтвердил, что рекомендуется не перемещать панель действий при открытии ящика (как в приложении YouTube). Смотрите этот пост в Google+ .


Редактировать № 1:

Я ответил на этот вопрос некоторое время назад, но я вернулся, чтобы еще раз подчеркнуть, что у Prixing есть лучшее всплывающее меню там ... безусловно . Это абсолютно красиво, идеально гладко, и это позорит Facebook, Google+ и YouTube. EverNote тоже довольно хорош ... но все же не так совершенен, как Prixing. Ознакомьтесь с этой серией постов о том, как было реализовано всплывающее меню (от самого главного разработчика в Prixing!).


Оригинальный ответ:

Об этом Адам Пауэлл и Ричард Фулчер говорят в 49:47 - 52:50 в лекции Google I / O под названием «Навигация в Android».

Подводя итог их ответу, по состоянию на дату этой публикации, выдвигающееся меню навигации официально не является частью стандарта разработки приложений Android. Как вы, вероятно, обнаружили, в настоящее время нет встроенной поддержки этой функции, но говорилось о том, чтобы сделать ее дополнением к предстоящей редакции пакета поддержки.

Что касается приложений YouTube и G +, кажется странным, что они ведут себя по-разному. Я думаю, что причина, по которой приложение YouTube фиксирует положение панели действий, заключается в том, что

  1. Одним из наиболее важных вариантов навигации для пользователей, использующих приложение YouTube, является поиск, который выполняется SearchViewна панели действий. В этом отношении имеет смысл сделать статическую панель действий, поскольку она позволит пользователю всегда иметь возможность поиска новых видео.

  2. Приложение G + использует a ViewPagerдля отображения своего содержимого, поэтому создание выпадающего меню, специфичного для содержимого макета (т. Е. Всего, что находится под панелью действий), не имеет большого смысла. Считывание должно обеспечить средства навигации между страницами, а не средство глобальной навигации. Возможно, поэтому они решили сделать это в приложении G + иначе, чем в приложении YouTube.

    С другой стороны, проверьте приложение Google Play на наличие другой версии «выпадающего меню» (когда вы находитесь на самой левой странице, проведите пальцем влево и вытащите, появится меню «полстраницы»).

Вы правы в том, что это не очень последовательное поведение, но, похоже, в команде Android нет 100% консенсуса относительно того, как это поведение должно быть реализовано. Я не удивлюсь, если в будущем приложения будут обновлены так, чтобы навигация в обоих приложениях была идентична (они, казалось, очень стремились сделать навигацию согласованной во всех приложениях, созданных Google в разговоре).


73
У Prixing, Evernote и Spotify есть довольно большие команды, которые пишут свои приложения. Я являюсь генеральным директором Prixing, и я хотел бы уточнить, что у нас есть только один настоящий разработчик для Android (но очень талантливый, Кирилл Мотье)
EricLarch

С версией 13 пакета поддержки Android (май 2013 г.) есть DrawerLayout для создания Навигационного Ящика, который можно вытянуть из края окна. И навигационный ящик - теперь образец дизайна. developer.android.com/tools/extras/support-library.html
Вубао Ли,

хотя NavigationDrawer присутствует в V4, ему необходим ActionBar, который еще не представлен в V4, поэтому он не может использоваться в приложениях с уровнем API ниже 11.
Nayanesh Gupte

1
@NayAneshGupte, вы всегда можете использовать ActionBarSherlock, чтобы использовать ActionBar ниже уровня API 11.
tasomaniac

Кажется, что нет способа обойти искусственную задержку, если вы хотите, чтобы анимация закрытия была плавной?
theblang

15

Совсем недавно я разработал текущий проект Github под названием «RibbonMenu» и отредактировал его под свои нужды:

https://github.com/jaredsburrows/RibbonMenu

Какова цель

  • Удобство доступа: легкий доступ к меню, которое скользит и выходит
  • Простота реализации: обновить тот же экран, используя минимальное количество кода
  • Независимость: не требует поддержки библиотек, таких как ActionBarSherlock
  • Настройка: легко изменить цвета и меню

Что нового

  • Изменена скользящая анимация, чтобы соответствовать приложениям Facebook и Google+
  • Добавлен стандартный ActionBar (вы можете использовать ActionBarSherlock)
  • Используется пункт меню, чтобы открыть меню
  • Добавлена ​​возможность обновлять ListView в основной активности
  • Добавлено 2 ListViews в меню, аналогично приложениям Facebook и Google+
  • Добавлены AutoCompleteTextView и кнопка, чтобы показать примеры реализации
  • Добавлен метод, позволяющий пользователям нажимать кнопку «назад», чтобы скрыть меню, когда оно открыто
  • Позволяет пользователям взаимодействовать с фоном (основным ListView) и меню одновременно, в отличие от приложений Facebook и Google+!

ActionBar с меню вне

ActionBar с меню вне

Панель действий с выключенным меню и поиском

Панель действий с выключенным меню и поиском


5

Существует отличная реализация, NavigationDrawerкоторая следует Руководству по проектированию материалов Google (и совместимо с API 10) - Библиотека MaterialDrawer (ссылка на GitHub) . На момент написания статьи, май 2017 года, он активно поддерживается.

Он доступен в репозитории Maven Central . Настройка зависимости Gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

Настройка зависимости Maven:

<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>

введите описание изображения здесь введите описание изображения здесь


@lmiguelvargasf, как ты представляешь себе, как вписать проект GitHub в ответ ?! Пожалуйста, поделитесь своими идеями.
naXa


2

Лично мне нравится navigationDrawerв официальном приложении Google Drive. Это просто работает и прекрасно работает. Я согласен, что панель навигации не должна перемещать панель действий, потому что это ключевая точка, чтобы открывать и закрывать панель навигации.

Если вы все еще пытаетесь добиться такого поведения, я недавно создал проект Called, SherlockNavigationDrawerи, как вы можете ожидать, это реализация Навигационного Ящика с ActionBarSherlockи работающая для устройств до Сота. Проверь это:

SherlockNavigationDrawer github

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.