Gaveta de navegação (Google+ x YouTube)


403

Alguém sabe como implementar um menu deslizante como alguns dos principais aplicativos de hoje?

Outras perguntas sobre estouro de pilha não tiveram respostas sobre como fazer isso, então estou tentando reunir o máximo de informações para ajudar outras pessoas. Todos os aplicativos mencionados abaixo fazem um ótimo trabalho na implementação do menu de slides.

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

Captura de tela do menu deslizante do Google+

Você só pode ir da primeira para a segunda tela clicando no logotipo do G + no canto superior esquerdo. Observe que a tela inteira se move da posição e é empurrada para o lado direito da tela (incluindo a barra de ação). Para voltar à primeira tela, você pode deslizar o lado direito novamente para o foco ou clicar no ícone G + novamente.

2. YouTube (em 7/7/12)

Captura de tela do menu deslizante do YouTube

Você pode ir da primeira para a segunda tela usando dois métodos. Clique no logotipo do YouTube no canto superior esquerdo ou use um gesto de furto para movê-lo para a direita. Isso já é diferente do aplicativo G +. Em segundo lugar, você pode ver que a barra de ação permanece em posição (ao contrário do G +). Por fim, para recuperar a tela original, ela funciona exatamente como o G +.


11
Pelo que parece, poucas pessoas tiveram experiência em trabalhar em algo assim. Sugiro tentar implementar algo você mesmo e chegar ao SO com problemas específicos que você pode encontrar.
David Titarenco 07/07/2012

7
Sim, é por isso que eu postei uma pergunta SO em outra que acredito que merece um pouco mais de atenção. Eu me pergunto se existe alguém por aí que conseguiu isso com sucesso e gostaria de compartilhar sua sabedoria.
EGHDK 07/07

11
@EGHDK Confira esta série de artigos: android.cyrilmottier.com/?p=658
Alex Lockwood

2
Respondi a essa pergunta há um tempo, mas volto a enfatizar que o Prixing tem o melhor menu suspenso do mercado ... de longe. É absolutamente lindo, perfeitamente suave e deixa o Facebook, o Google+ e o YouTube envergonhados. O EverNote também é muito bom ... mas ainda não é tão perfeito quanto a Prix. Confira esta série de posts sobre como o menu flyout foi implementado (de ninguém menos que o desenvolvedor principal do próprio Prixing!).
Alex Lockwood

2
Com a revisão 13 do pacote de suporte do Android (maio de 2013), existe o DrawerLayout para criar uma gaveta de navegação que pode ser puxada da borda de uma janela. E, a gaveta de navegação é um padrão de design agora. developer.android.com/tools/extras/support-library.html
Wubao Li 15/13

Respostas:


152

Edição # 3:

O padrão da gaveta de navegação é oficialmente descrito na documentação do Android!

insira a descrição da imagem aqui Confira os seguintes links:

  • Os documentos de design podem ser encontrados aqui .
  • Documentos do desenvolvedor podem ser encontrados aqui .

Edição # 2:

Roman Nurik (engenheiro de design do Android no Google) confirmou que o comportamento recomendado é não mover a barra de ação ao abrir a gaveta (como o aplicativo do YouTube). Veja esta postagem do Google+ .


Edição nº 1:

Respondi a essa pergunta há um tempo, mas volto a enfatizar que o Prixing tem o melhor menu suspenso do mercado ... de longe . É absolutamente lindo, perfeitamente suave e deixa o Facebook, o Google+ e o YouTube envergonhados. O EverNote também é muito bom ... mas ainda não é tão perfeito quanto a Prix. Confira esta série de posts sobre como o menu flyout foi implementado (de ninguém menos que o desenvolvedor principal do próprio Prixing!).


Resposta original:

Adam Powell e Richard Fulcher conversam sobre isso às 49:47 - 52:50 na palestra do Google I / O intitulada "Navegação no Android".

Para resumir sua resposta, na data desta postagem, o menu de navegação deslizante não faz parte oficialmente do padrão de design do aplicativo Android. Como você provavelmente descobriu, atualmente não há suporte nativo para esse recurso, mas houve uma conversa sobre como tornar isso um acréscimo a uma revisão futura do pacote de suporte.

No que diz respeito aos aplicativos YouTube e G +, parece estranho que eles se comportem de maneira diferente. Meu melhor palpite é que o motivo pelo qual o aplicativo do YouTube fixa a posição da barra de ação é,

  1. Uma das opções de navegação mais importantes para usuários que usam o aplicativo do YouTube é a pesquisa, realizada na SearchViewbarra de ação. Seria sensato tornar a barra de ação estática nesse sentido, pois permitiria ao usuário sempre ter a opção de procurar novos vídeos.

  2. O aplicativo G + usa a ViewPagerpara exibir seu conteúdo, portanto, fazer o menu pullout específico para o conteúdo do layout (ou seja, tudo sob a barra de ação) não faria muito sentido. Swiping deve fornecer um meio de navegação entre páginas, não um meio de navegação global. Talvez seja por isso que eles decidiram fazer isso de maneira diferente no aplicativo G + do que no aplicativo do YouTube.

    Em outra nota, confira o aplicativo Google Play para obter outra versão do "menu pullout" (quando estiver na página mais à esquerda, deslize para a esquerda e, em seguida, puxe para fora o menu "meia página").

Você está certo quanto a esse comportamento não ser muito consistente, mas não parece haver um consenso de 100% na equipe do Android sobre como esse comportamento ainda deve ser implementado. Eu não ficaria surpreso se, no futuro, os aplicativos forem atualizados para que a navegação nos dois aplicativos seja idêntica (eles pareciam muito interessados ​​em tornar a navegação consistente em todos os aplicativos criados pelo Google).


73
Prixing, Evernote e Spotify têm equipes muito grandes escrevendo seus aplicativos . Sou o CEO da Prixing e gostaria de precisar que tenhamos apenas um desenvolvedor Android de verdade (mas Cyril Mottier, um talentoso)
EricLarch

Com a revisão 13 do pacote de suporte do Android (maio de 2013), existe o DrawerLayout para criar uma gaveta de navegação que pode ser puxada da borda de uma janela. E, a gaveta de navegação é um padrão de design agora. developer.android.com/tools/extras/support-library.html
Wubao Li

embora NavigationDrawer está presente em V4 que necessita ActionBar que ainda não é fornecida dentro do V4 assim não é capaz de utilizá-lo em aplicações tendo nível API inferior a 11.
Nayanesh Gupte

11
@NayAneshGupte você sempre pode usar o ActionBarSherlock para usar o ActionBar abaixo do nível 11. da API
#

Parece que não há como introduzir um atraso artificial se você deseja que a animação próxima seja suave?
theblang

15

Recentemente, criei um projeto atual do Github chamado "RibbonMenu" e editei para atender às minhas necessidades:

https://github.com/jaredsburrows/RibbonMenu

Qual é o objetivo

  • Facilidade de acesso: permita fácil acesso a um menu que desliza para dentro e para fora
  • Facilidade de implementação: atualize a mesma tela usando uma quantidade mínima de código
  • Independência: não requer bibliotecas de suporte, como ActionBarSherlock
  • Personalização: Fácil de alterar cores e menus

O que há de novo

  • A animação deslizante foi alterada para corresponder aos aplicativos do Facebook e do Google+
  • Adicionado ActionBar padrão (você pode optar por usar o ActionBarSherlock)
  • Menuitem usado para abrir o Menu
  • Adicionado capacidade de atualizar o ListView na Atividade principal
  • Adicionado 2 ListViews ao menu, semelhante aos aplicativos do Facebook e do Google+
  • Adicionado um AutoCompleteTextView e um botão para mostrar exemplos de implementação
  • Método adicionado para permitir que os usuários pressionem o botão "voltar" para ocultar o menu quando ele estiver aberto
  • Permite que os usuários interajam com o plano de fundo (ListView principal) e o menu ao mesmo tempo, ao contrário dos aplicativos do Facebook e do Google+!

ActionBar com saída de menu

ActionBar com saída de menu

ActionBar com Menu out e pesquisa selecionada

ActionBar com Menu out e pesquisa selecionada


5

Existe uma ótima implementação NavigationDrawerque segue as Diretrizes de design de materiais do Google (e compatíveis com a API 10) - a biblioteca MaterialDrawer (link para GitHub) . No momento da redação deste artigo, maio de 2017, ele é ativado ativamente.

Está disponível no repositório Maven Central . Configuração de dependência Gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

Configuração de dependência do Maven:

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

insira a descrição da imagem aqui insira a descrição da imagem aqui


@lmiguelvargasf como você imagina ajustando um projeto do GitHub na resposta ?! Por favor, compartilhe suas idéias.
NaXa


2

Pessoalmente, gosto do navigationDraweraplicativo oficial do Google Drive. Apenas funciona e funciona muito bem. Concordo que a gaveta de navegação não deve mover a barra de ação, porque é o ponto principal para abrir e fechar a gaveta de navegação.

Se você ainda está tentando obter esse comportamento, criei recentemente um projeto chamado SherlockNavigationDrawere, como você pode esperar, é a implementação da Gaveta de Navegação ActionBarSherlocke funciona para dispositivos pré-Honeycomb. Confira:

SherlockNavigationDrawer github

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.