ナビゲーションドロワー(Google+とYouTube)


403

今日のトップアプリのようなスライドメニューを実装する方法を知っている人はいますか?

他のStack Overflowの質問には、これを行う方法に関する答えがなかったため、他の人を助けるためにできるだけ多くの情報を収集しようとしています。以下で言及するすべてのアプリケーションは、スライドメニューを実装するのに非常に役立ちます。

1. Google Plus(12/7/7現在)

Google+スライドアウトメニューのスクリーンショット

最初の画面から2番目の画面に移動するには、左上隅にあるG +ロゴをクリックする必要があります。画面全体がその位置から移動し、画面の右側(アクションバーを含む)に移動することに注意してください。最初の画面に戻るには、右側をスライドしてフォーカスを戻すか、G +アイコンをもう一度クリックします。

2. YouTube(12/7/7現在)

YouTubeスライドアウトメニューのスクリーンショット

2つの方法を使用して、最初の画面から2番目の画面に移動できます。左上にあるYouTubeロゴをクリックするか、スワイプジェスチャーを使用して右に移動できます。これはすでにG +アプリとは異なります。2番目に、アクションバーが(G +とは異なり)配置されたままであることがわかります。最後に、元の画面に戻すには、G +と同じように機能します。


1
その見た目から、このようなものに取り組んだ経験はあまりありません。自分で何かを実装してみて、発生する可能性のある特定の問題でSOに参加することをお勧めします。
David Titarenco

7
ええ、だから私は他の人にSOの質問を投稿したので、もう少し注目に値すると思います。これを成し遂げ、彼らの知恵を共有したいと思う誰かがそこにいるのだろうか。
EGHDK

1
@EGHDKこの一連の記事をチェックしてください:android.cyrilmottier.com/
Alex Lockwood

2
私は少し前にこの質問に答えましたが、私はPrix​​ingがそこに最高のフライアウトメニューがあることを再び強調し直しました...はるかに。それは絶対に美しく、完璧に滑らかで、Facebook、Google +、YouTubeを恥ずべきものにします。EverNoteもかなり良いですが、それでもPrixingほど完璧ではありません。フライアウトメニューがどのように実装されたかについては、このシリーズの投稿をチェックしてください(Prixingのヘッドデベロッパーに他なりません!)。
Alex Lockwood 2012年

2
Androidサポートパッケージリビジョン13(2013年5月)では、ウィンドウの端から引き出すことができるナビゲーションドロワーを作成するためのDrawerLayoutがあります。そして今、ナビゲーションドロワーはデザインパターンです。developer.android.com/tools/extras/support-library.html
Wubao Li

回答:


152

編集#3:

Navigation Drawerパターンは、Androidのドキュメントに正式に記載されています。

ここに画像の説明を入力してください 以下のリンクを確認してください。


#2を編集:

Roman Nurik(GoogleのAndroidデザインエンジニア)は、ドロワーを開くときに(YouTubeアプリのように)アクションバーを動かさないことをお勧めします。このGoogle+の投稿をご覧ください。


編集#1:

私は少し前にこの質問に答えましたが、私はPrix​​ingがそこに最高のフライアウトメニューがあることを再び強調し直しました...はるかに。それは絶対に美しく、完璧に滑らかで、Facebook、Google +、YouTubeを恥ずべきものにします。EverNoteもかなり良いですが、それでもPrixingほど完璧ではありません。フライアウトメニューがどのように実装されたかについては、このシリーズの投稿をチェックしてください(Prixingのヘッドデベロッパー以外の誰もが!)。


元の回答:

Adam PowellとRichard Fulcherがこれについて49:47-52:50に「Androidでのナビゲーション」というタイトルのGoogle I / Oトークで語っています。

彼らの答えを要約すると、この投稿の日付の時点で、スライドアウトナビゲーションメニューは公式にはAndroidアプリケーション設計標準の一部ではありません。おそらくお気づきかもしれませんが、現在この機能に対するネイティブサポートはありませんが、これをサポートパッケージの今後のリビジョンに追加することについての話がありました。

YouTubeアプリとG +アプリに関しては、動作が異なるのは奇妙に思えます。私の推測では、YouTubeアプリがアクションバーの位置を修正するのは、

  1. YouTubeアプリを使用するユーザーにとって最も重要なナビゲーションオプションの1つは検索です。これはSearchViewアクションバーので実行されます。ユーザーが常に新しいビデオを検索するオプションを持つことができるため、この点でアクションバーを静的にすることは理にかなっています。

  2. G +アプリはを使用しViewPagerてコンテンツを表示するため、レイアウトコンテンツに固有のプルアウトメニュー(つまり、アクションバーの下にあるすべてのもの)を作成してもあまり意味がありません。スワイプは、グローバルナビゲーションの手段ではなく、ページ間を移動する手段を提供することになっています。これが、G +アプリとYouTubeアプリで異なる方法で行うことにした理由かもしれません。

    別のメモでは、Google Playアプリで「プルアウトメニュー」の別のバージョンを確認してください(左端のページで左にスワイプすると、プルアウトすると、「ハーフページ」メニューが表示されます)。

これはあまり一貫した動作ではないというのはあなたの言うとおりですが、この動作の実装方法について、Androidチーム内で100%の合意は得られていないようです。将来的に両方のアプリのナビゲーションが同じになるようにアプリが更新されても驚くことはありません(話の中ですべてのGoogle製アプリ全体でナビゲーションを一貫させることに非常に熱心に思われました)。


73
Prix​​ing、Evernote、Spotifyのすべてにかなり大きなチームがアプリ作成しています。私はPrixingのCEOです。本当のAndroid開発者は1人だけです(ただし非常に才能のある人はCyril Mottier)
EricLarch

Androidサポートパッケージリビジョン13(2013年5月)では、ウィンドウの端から引き出すことができるナビゲーションドロワーを作成するためのDrawerLayoutがあります。そして今、ナビゲーションドロワーはデザインパターンです。developer.android.com/tools/extras/support-library.html
Wubao Li

NavigationDrawerはV4に存在しますが、V4内にはまだ提供されていないActionBarが必要なので、APIレベルが11未満のアプリでは使用できません
。– Nayanesh Gupte 2013

1
あなたは常に、APIレベル以下にアクションバーを使用するようにActionBarSherlockを使用することができます@NayAneshGupte 11
tasomaniac

クローズアニメーションをスムーズにしたい場合は、人工的な遅延を導入する方法がないようです。
theblang

15

つい最近、「RibbonMenu」と呼ばれる現在のGithubプロジェクトを分岐し、自分のニーズに合わせて編集しました。

https://github.com/jaredsburrows/RibbonMenu

目的は何ですか

  • アクセスのしやすさ:スライドして出入りするメニューに簡単にアクセスできます
  • 実装の容易さ:最小限のコードを使用して同じ画面を更新する
  • 独立性:ActionBarSherlockなどのサポートライブラリは不要
  • カスタマイズ:色とメニューを簡単に変更

新着情報

  • スライディングアニメーションをFacebookおよびGoogle+アプリに一致するように変更
  • 標準のActionBarを追加(ActionBarSherlockの使用を選択できます)
  • メニューを使用してメニューを開きました
  • メインアクティビティのリストビューを更新する機能を追加しました
  • メニューに2つのリストビューを追加しました。FacebookおよびGoogle+アプリと同様です。
  • AutoCompleteTextViewとボタンも追加して、実装の例を示します
  • メニューが開いているときにユーザーが「戻るボタン」を押してメニューを非表示にする方法を追加
  • FacebookおよびGoogle+アプリとは異なり、ユーザーはバックグラウンド(メインのListView)とメニューを同時に操作できます。

メニュー出力付きのActionBar

メニュー出力付きのActionBar

メニューが出て検索が選択されたActionBar

メニューが出て検索が選択されたActionBar


5

NavigationDrawerGoogleマテリアルデザインガイドライン(およびAPI 10まで互換)に準拠した優れた実装があります。MaterialDrawerライブラリ(GitHubへのリンク)です。執筆時点では、2017年5月に積極的にサポートされています。

Maven Central repoで利用できます。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ドライブの公式アプリがです。それだけでうまくいきます。ナビゲーションドロワーを開閉するための重要なポイントであるため、ナビゲーションドロワーでアクションバーを移動しないことに同意します。

あなたがまだその振る舞いを得ようとしているのなら、私は最近Calledというプロジェクトを作成SherlockNavigationDrawerしました。ActionBarSherlock Honeycomb以前のデバイスで動作します。確認してください:

SherlockNavigationDrawer github

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.