web-dev-qa-db-fra.com

Tiroir de navigation (Google+ ou YouTube)

Est-ce que quelqu'un sait comment mettre en place un menu coulissant comme certaines des meilleures applications d'aujourd'hui?

Autre débordement de pile questions n'ont pas encore trouvé de réponse, j'essaie donc de rassembler autant d'informations pour aider les autres. Toutes les applications que je mentionne ci-dessous font un excellent travail pour implémenter le menu de diapositives.

1. Google Plus (au 7/7/12)

Google+ slide out menu screenshot

Vous ne pouvez aller du premier au deuxième écran en cliquant sur le logo G + dans le coin supérieur gauche. Notez que tout l’écran se déplace de sa position et est déplacé du côté droit de l’écran (y compris la barre d’action). Pour revenir au premier écran, vous pouvez soit redimensionner le côté droit, soit cliquer à nouveau sur l'icône G +.

2. YouTube (à partir du 7/7/12)

YouTube slide out menu screenshot

Vous pouvez passer du premier écran au deuxième écran en utilisant deux méthodes. Cliquez sur le logo YouTube en haut à gauche ou utilisez un geste de balayage pour le déplacer vers la droite. C'est déjà différent de l'application G +. Deuxièmement, vous pouvez voir que la barre d’action reste en place (contrairement à G +). Enfin, pour récupérer l'écran d'origine, il fonctionne exactement comme G +.

androidandroid-layoutuser-interfacenavigation-drawer
397
EGHDK

Edit # 3:

Le modèle de tiroir de navigation est officiellement décrit dans la documentation Android!

enter image description here Consultez les liens suivants:

  • Les documents de conception sont disponibles ici.
  • La documentation du développeur est disponible ici.

Edit # 2:

Roman Nurik (ingénieur concepteur Android chez Google) a confirmé que le comportement recommandé est de ne pas déplacer la barre d'action lors de l'ouverture du tiroir (comme dans l'application YouTube). Voir ceci Google+ post .

Edit # 1:

J'ai déjà répondu à cette question il y a quelque temps, mais je tiens à souligner de nouveau que Prixing a le meilleur menu déroulant disponible de loin ... de loin . C'est absolument magnifique, parfaitement lisse et cela fait honte à Facebook, Google+ et YouTube. EverNote est également très bon ... mais pas aussi parfait que le prix. Découvrez cette série de messages == sur la façon dont le menu déroulant a été implémenté (de nul autre que le développeur principal de Prixing lui-même!).

Réponse originale:

Adam Powell et Richard Fulcher en parlent à propos de 49:47 - 52:5 dans la conférence Google I/O intitulée "Navigation in Android".

Pour résumer leur réponse, à la date de cette publication, le menu de navigation par glissement est non officiellement intégré à la norme de conception d’application Android. Comme vous l'avez probablement découvert, il n'y a actuellement aucun support natif pour cette fonctionnalité, mais il a été question d'en faire un ajout à une prochaine révision du package de support.

En ce qui concerne les applications YouTube et G +, il semble étrange qu'elles se comportent différemment. Ma meilleure hypothèse est que la raison pour laquelle l'application YouTube fixe la position de la barre d'action est,

  1. L'une des options de navigation les plus importantes pour les utilisateurs de l'application YouTube est la recherche, qui s'effectue dans la section SearchView de la barre d'actions. Il serait judicieux de rendre la barre d’action statique à cet égard, car elle permettrait à l’utilisateur de toujours d’avoir la possibilité de rechercher de nouvelles vidéos.

  2. L’application G + utilise un ViewPager pour afficher son contenu. Par conséquent, il n’aurait pas de sens de rendre le menu déroulant spécifique au contenu de la présentation (c’est-à-dire tout ce qui se trouve sous la barre d’action). Le balayage est censé fournir un moyen de navigation entre les pages, pas un moyen de navigation globale. C'est peut-être pour cette raison qu'ils ont décidé de le faire différemment dans l'application G + que dans l'application YouTube.

    Sur une autre note, consultez l'application Google Play pour une autre version du "menu déroulant" (lorsque vous êtes sur la page la plus à gauche, balayez vers la gauche et un menu déroulant, le menu "demi-page" apparaît).

Vous avez raison de dire que ce comportement n'est pas très cohérent, mais il ne semble pas qu'il existe un consensus à 100% au sein de l'équipe Android sur la manière dont ce comportement devrait être implémenté. Je ne serais pas surpris si, à l'avenir, les applications sont mises à jour de sorte que la navigation dans les deux applications soit identique (elles semblaient très désireuses de rendre la navigation cohérente dans toutes les applications créées par Google lors de la conversation).

152
Alex Lockwood

Récemment, j'ai créé un projet Github en cours appelé "RibbonMenu" et l'ai modifié pour répondre à mes besoins:

https://github.com/jaredsburrows/RibbonMen

Quel est le but

  • Facilité d'accès: Permet un accès facile à un menu qui glisse vers l'intérieur et l'extérieur
  • Facilité de mise en œuvre: Mettez à jour le même écran en utilisant une quantité minimale de code
  • Indépendance: Ne nécessite pas de bibliothèques de support telles que ActionBarSherlock
  • Personnalisation: facile de changer les couleurs et les menus

Quoi de neuf

  • Modification de l'animation glissante pour correspondre aux applications Facebook et Google+
  • ActionBar standard ajouté (vous pouvez choisir d'utiliser ActionBarSherlock)
  • Menuitem utilisé pour ouvrir le menu
  • Ajout de la possibilité de mettre à jour ListView sur l'activité principale
  • Ajout de 2 ListViews au menu, similaires aux applications Facebook et Google+
  • Ajout d'un AutoCompleteTextView et d'un bouton pour montrer des exemples d'implémentation
  • Ajout de la méthode permettant aux utilisateurs d'appuyer sur le bouton "Précédent" pour masquer le menu lorsqu'il est ouvert
  • Permet aux utilisateurs d'interagir avec l'arrière-plan (ListView principal) et le menu en même temps, contrairement aux applications Facebook et Google+!

Barre d'action avec menu

ActionBar with Menu out

Barre d'action avec menu affiché et recherche sélectionnée

ActionBar with Menu out and search selected

15
Jared Burrows

Il existe une excellente implémentation de NavigationDrawer qui respecte les consignes de Google relatives à la conception de matériaux (et est compatible avec l’API 10) - La bibliothèque MaterialDrawer (lien vers GitHub) . Au moment de la rédaction de cet article, mai 2017, il est activement soutenu.

Il est disponible dans le rapport principal Maven Central . Configuration de dépendance Gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

Configuration de dépendance Maven:

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

enter image description hereenter image description here

5
naXa

Je sais que c’est une vieille question, mais la réponse la plus récente est d’utiliser la bibliothèque de support technique Android qui vous facilitera la vie.

2
Sotti

Personnellement, j'aime bien la navigationDrawer dans l'application officielle Google Drive. Cela fonctionne et fonctionne très bien. Je conviens que le tiroir de navigation ne doit pas déplacer la barre d’action car c’est le point clé pour ouvrir et fermer le tiroir de navigation.

Si vous essayez toujours d'obtenir ce comportement, j'ai récemment créé un projet appelé SherlockNavigationDrawer et, comme vous pouvez vous en douter, l'implémentation du tiroir de navigation avec ActionBarSherlock fonctionne pour les appareils pré-Honeycomb. Vérifie ça:

SherlockNavigationDrawer github

2
Nicolas Jafelle