web-dev-qa-db-ja.com

Android Gmailアプリのようなスタジオナビゲーションドロワー

Androidアプリを作成していますが、追加したいことがあります。これがGmailアプリの効果です。

表示するアカウントを選択できます（アプリの残りの部分はそれに応じて動作します）。

Example

編集：

現在、（動作する）ナビゲーションバーが既にありますが、必要なのはヘッダーの丸いアイコンです。誰かが閲覧しているユーザーを選択できるようにしたいです。

javaandroiddesign-patternsnavigation-drawer
12
Tvde1

com.Android.support:designサポートライブラリの NavigationView を使用すると、目的の効果を得ることができます。

その上で完全なチュートリアルを見つけることができます こちら 。そして、あなたはそのチュートリアルから完全なソースコードをダウンロードできます here 。

そして、 別の素敵なチュートリアルがあります 従うことができます。

しかし、簡単に言えば、そのビューは、ヘッダーとメニューパーツという2つの主要な部分に分かれており、それぞれがXMLで定義する必要があります。

そのチュートリアルから：

ヘッダービュー

このビューは基本的にナビゲーションドロワーの上部であり、プロファイル画像、名前、および電子メールなどを保持します。これを別のレイアウトファイルで定義する必要があります。

メニュー

これはヘッダーの下に表示するメニューです。オーバーフローメニューのメニューを定義するのと同じように、メニューフォルダーでメニューを定義します。基本的に、NavigationViewは、スライドドロワーで使用するヘッダービューとメニューのコンテナーです。 NavigationViewを理解したら、Navigation Drawerの構築を開始できます。

それを念頭に置いて、他のレイアウトと同じようにヘッダーを作成します。また、メニューは、ツールバー/アクションバーメニューのように定義されます。例えば。：

navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <group
        Android:checkableBehavior="single">

        <item
            Android:id="@+id/drawer_home"
            Android:checked="true"
            Android:icon="@drawable/icon_home"
            Android:title="@string/title_home"/>

        <item
            Android:id="@+id/drawer_content"
            Android:icon="@drawable/icon_content"
            Android:title="@string/title_content"/>

        <item
            Android:id="@+id/drawer_about"
            Android:icon="@drawable/icon_about"
            Android:title="@string/title_about"/>

        <item
            Android:id="@+id/drawer_exit"
            Android:icon="@drawable/icon_exit"
            Android:title="@string/title_exit"/>

        </group>
</menu>

次に、Activityで、DrawerLayoutとNavigationViewを使用して、チュートリアルで見られるようなレイアウトを作成する必要があります。

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/drawer"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        Android:layout_height="match_parent"
        Android:layout_width="match_parent"
        Android:orientation="vertical"
        >
        <include
            Android:id="@+id/toolbar"
            layout="@layout/tool_bar"/>
        <FrameLayout
            Android:id="@+id/frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

        </FrameLayout>

    </LinearLayout>

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation_view"
        Android:layout_height="match_parent"
        Android:layout_width="wrap_content"
        Android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/navigation_menu"/>
</Android.support.v4.widget.DrawerLayout>

また、このFragmentsで表示したい画面ごとにいくつかのNavigationViewを作成する必要があります。それが完了したら、Activityで次のようにNavigationView.OnNavigationItemSelectedListenerを実装することで選択イベントを処理できます。

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { 
    // Your Activity
        @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        Fragment fragment = null;

        switch(menuItem.getItemId()) {
            case R.id.drawer_home:
                fragment = new YourFragment();
                break;
            case R.id.drawer_content:
                fragment = new AnotherFragment();
                break;
            case R.id.drawer_about:
                fragment = new AboutFragment();
                break;
            case R.id.drawer_exit:
                // TODO - Prompt to exit.
                finish();
                break;
        }

        if (fragment == null) {
            fragment = new YourFragment();
        }

        drawerLayout.closeDrawers();

        FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.container, fragment)
                    .commit();

        return true;
    }
}

編集に関しては、アイコンは ImageView で表すことができます。そして、複数のプロファイル間を移動するには、アプリにそのロジックをどのように実装したかに依存しますが、「一般的な」答えとして、 Spinner のようなものを使用してそれらのプロファイルを切り替えることができます=。

これらのチュートリアルは、その手順を支援します。

headerで設定したら、アイテムの選択を処理し、それに応じてユーザープロファイルを変更します。 （この最後の部分は、アプリにユーザープロファイルを実装した方法に完全に依存します）。しかし、出発点として、 Androidトレーニングサイト 、より具体的には この部分 を確認できます。

25
Mauker

使用する必要がありますNavigationView （

これは、メニューリソースを介してナビゲーションアイテムを膨らませることで、マテリアルナビゲーションドロワーを簡単に実装するためのフレームワークを提供します。ナビゲーションビューの前に、カスタムアダプターでリストビューまたはlinearlayoutを使用してマテリアルナビゲーションドロワーを作成するのは難しい方法ですが、今はDr​​awerLayoutにナビゲーションビューを追加するだけで、他のすべてはナビゲーションビューで処理されます。

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
     xmlns:app="http://schemas.Android.com/apk/res-auto"
     Android:id="@+id/drawer_layout"
     Android:layout_width="match_parent"
     Android:layout_height="match_parent"
     Android:fitsSystemWindows="true">

     <!-- Your contents -->

     <Android.support.design.widget.NavigationView
         Android:id="@+id/navigation"
         Android:layout_width="wrap_content"
         Android:layout_height="match_parent"
         Android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </Android.support.v4.widget.DrawerLayout>

この要件については、サンプルを確認できます

  1. MaterialDrawer

  2. マテリアルデザインナビゲーションドロワーの作成方法

  3. NavigationViewで遊ぶ

お役に立てれば 。

3
IntelliJ Amiya

これは MaterialDrawer が探しているものだと思います。このライブラリには多くの例があります。このライブラリを直接使用するか、ソースコードを読んで独自の引き出しを実装できます。

1
Zhaolong Zhong

MaterialNavigationライブラリを使用して、このMaterial Navigationドロワーを実装できます。実装に関する記事は こちら です。

そのライブラリをインポートするだけで完了です。以下のサイトのデモコードを参照してください。

https://github.com/PatilShreyas/MaterialNavigationView-Android

0
Shreyas Patil