AndroidにおけるNavigationView

1年 ago
桜, 春樹
13 minutes

このチュートリアルでは、AndroidアプリケーションでNavigationViewを説明し、実装します。ここでは、右から左に開くようにスタイルを設定する方法も学びます。

ナビゲーションビュー

このチュートリアルでは、すでにナビゲーションドロワーを実装しましたが、コードを書くのは疲れました。ナビゲーションビューは、ナビゲーションドロワーに比べて実装がより良く、簡単です。ナビゲーションドロワーでは、カスタムアダプタを使ってListView/RecyclerViewを実装する必要がありました。NavigationViewの導入により、アイテムはメニューリソースを使ってインフレートするだけで済みます。NavigationViewは一般的にDrawerLayoutの内部に配置されます。

NavigationViewの始め方

Android Studioは、標準のナビゲーションメニューを実装した既製のナビゲーションドロワーアクティビティを提供しています。次のダイアログから選択することができます。

NavigationViewの理解

NavigationViewクラスはFrameLayoutを拡張しています。xml内では、次のようにタグ内に定義されています。

<android.support.design.widget.NavigationView/>

NavigationViewには基本的に2つの主要なコンポーネントがあります。

    1. ヘッダービュー: このビューは通常、ナビゲーションドロワーの上部に表示されます。プロフィール写真、名前、メールアドレス、および背景カバー画像が表示されます。このビューは、別のレイアウトファイルで定義されており、後で詳しく見ていきます。NavigationViewにレイアウトを追加するには、app:headerLayoutパラメータを使用します。

メニュー: これはヘッダービューの下に表示され、リスト形式でナビゲーションアイテムがすべて含まれています。このためのレイアウトファイルはmenusフォルダで定義されています。NavigationViewにレイアウトを追加するには、app:menusパラメータを使用します。

ナビゲーションビューをカスタマイズするために使用される他の重要なXML属性は以下の通りです。

    1. app:itemTextColor: テキストの色が変わります

 

    1. app:itemIconTint: アイコンの色が変わります

 

    app:itemBackground: アイテムの背景色が変わります

内蔵されたNavigationViewテンプレートのプロジェクト構造を見てみましょう。activity_main.xmlはMainActivityのレイアウトです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

上記のDrawerLayoutは、ナビゲーションドロワーのコンテンツとアプリのコンテンツを保持するレイアウトです。app_bar_main.xmlレイアウトは、ToolBar、FloatingActionButton、およびcontent_main.xmlレイアウト（基本的な「Hello World」テキストを表示する）を保持するCoordinatorLayoutで構成されています。以下にレイアウトがリストされています。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.scdev.navigationviewstyling.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

以下にcontent_main.xmlのレイアウトが記載されています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.scdev.navigationviewstyling.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

以下に、NavigationView用のデフォルトヘッダーレイアウトとメニューがリストされています: nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />

</LinearLayout>

「activity_main_drawer.xml」ファイルを日本語で言い換えると、以下のようになります。「メインのドロワー活動.xml」

<menu xmlns:android="https://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

android:checkableBehaviorというxml属性は、グループ全体に対して定義されており、以下にリストされた3つの値のいずれかを取ります。

    1. 単一: グループからは1つのアイテムのみチェックできます

 

    1. 全て: 全てのアイテムがチェック可能です（チェックボックス）

 

    なし: 何もチェックできません

以下は、日本語での表現例です：

「android:checkable属性は、個々のアイテムのチェック可能な動作を設定するために使用されます。真偽値を受け取ります。注意: app:menusレイアウト内でネストされたメニューアイテムも可能です。MainActivity.javaのコードは以下に示されています。」

package com.scdev.navigationviewstyling;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        //drawer.setDrawerListener(toggle);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

以下のコードから導かれる重要な推論は以下の通りです：

    1. MainActivityはNavigationView.OnNavigationItemSelectedListenerを実装し、onNavigationItemSelectedメソッドをオーバーライドしています。ここでメニューアイテムのクリックを処理し、左側にあるドロワーを閉じます。以下に示すように、各アイテムごとにToastメッセージを表示します。

@Override
public boolean onNavigationItemSelected(MenuItem item) {
int id = item.getItemId();

if (id == R.id.nav_camera) {
// カメラアクションを処理する
Toast.makeText(getApplicationContext(), “カメラがクリックされました”, Toast.LENGTH_SHORT).show();

} else if (id == R.id.nav_gallery) {
Toast.makeText(getApplicationContext(), “ギャラリーがクリックされました”, Toast.LENGTH_SHORT).show();

} else if (id == R.id.nav_slideshow) {
Toast.makeText(getApplicationContext(), “スライドショーがクリックされました”, Toast.LENGTH_SHORT).show();

} else if (id == R.id.nav_manage) {
Toast.makeText(getApplicationContext(), “ツールがクリックされました”, Toast.LENGTH_SHORT).show();

} else if (id == R.id.nav_share) {
Toast.makeText(getApplicationContext(), “共有がクリックされました”, Toast.LENGTH_SHORT).show();

} else if (id == R.id.nav_send) {
Toast.makeText(getApplicationContext(), “送信がクリックされました”, Toast.LENGTH_SHORT).show();

}

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}

ActionBarDrawerToggleは以下のように初期化されます:
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

ActionBarDrawerToggleはDrawerLayoutと一緒に使用され、ナビゲーションドロワーの推奨機能を実装します。以下のような使い方があります:

ドロワーの開閉をリスナーとして機能します。
ToolBar/ActionBarにハンバーガーアイコンを提供します。
ハンバーガーアイコンと矢印の間のアニメーションを可能にします。

注意：android.support.v4.app.ActionBarDrawerToggleは非推奨です。android.support.v7.app.ActionBarDrawerToggleを常に代わりに使用してください。

DrawerLayoutにリスナーを追加するためには、次のメソッドを使用します。drawer.addDrawerListener(toggle); このリスナーはドロワーイベントの通知を受けるために使用されます。注意：drawer.setDrawerListener(toggle)は現在非推奨です。

toggle.syncState()：アイコンの状態を同期し、ドロワーが閉じているか開いているかに応じてハンバーガーアイコンまたは戻る矢印を表示します。この行のコードを省略すると、ドロワーが閉じているときに戻る矢印がハンバーガーアイコンに変わりません。

drawer.closeDrawer(GravityCompat.START)：ドロワーを閉じるために、gravityをSTART（デフォルトでは左）に設定します。

以下は、アプリケーション内でデフォルトのNavigationViewがどのように表示されるかです。最後にクリックされたアイテムは常に最初のグループでハイライトされたままになることに注意してください。ドロワーが閉じられたらハイライトを削除するには、android:checkableBehaviorを「none」に変更してください。現在のNavigationViewはステータスバーの上に描画されます。ステータスバーの下に配置するには、NavigationViewのandroid:fitsSystemWindowsを「false」に設定してください。上記の属性を設定したら、NavigationViewをToolBar/ActionBarの下に配置してさらにスタイルを付けることができます（ただし、これはマテリアルデザインガイドラインでは推奨されていません）。NavigationViewにandroid:layout_marginTop=”?attr/actionBarSize”を設定し、CoordinatorLayoutとDrawerLayoutにandroid:fitsSystemWindows=”false”を設定してください。上記のカスタマイズが完了すると、出力は以下のようになります：上部に白いステータスバーが表示されていますか？それは、CoordinatorLayoutとDrawerLayoutのandroid:fitsSystemWindowsがfalseに設定されているためです。styles.xmlで@color/colorPrimaryDarkのようにステータスバーをスタイル付けしても変更されません。より良いアプローチが必要です。唯一の代替策は、CoordinatorLayoutを取り除き（アニメーションも使用していません）、DrawerLayoutとToolBarをLinearLayout内に配置することです。以下は更新されたxmlレイアウトです：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- The toolbar -->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="?attr/colorPrimary" />

<android.support.v4.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />


</android.support.v4.widget.DrawerLayout>

</LinearLayout>

app_bar_main.xmlにはandroid:fitSystemWindows=”true”が必要です。これを省略すると、次のようなものになります！注意: xml属性android:theme=”@style/AppTheme.AppBarOverlay”を削除すると、ToolBarのアイテムの色が黒になります。試してみてください！

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.scdev.navigationviewstyling.MainActivity">
    
    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

このアプリケーションの見た目は、現在このようになっています。あ、待って！ステータスバーの色がツールバーと同じになっています。もっと濃い色にする予定だったんです。解決策：v-21/styles.xmlから以下の行を削除するだけです。

<item name="android:statusBarColor">@android:color/transparent</item>

NavigationViewを右から左に開くようにカスタマイズしましょう！

プロジェクトの体制

以下のように、自分たちのハンバーガーアイコンのPNGファイルをdrawableフォルダに追加します。

AndroidのNavigationViewのサンプルコード

activity_main.xmlのレイアウトが現在定義されています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- The toolbar -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay" />

        <FrameLayout
            android:id="@+id/drawer_button"
            android:layout_width="50dp"
            android:layout_height="?attr/actionBarSize"
            android:fitsSystemWindows="true"
            android:layout_alignParentRight="true"
            android:clickable="true">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:src="@drawable/ic_action_not_black" />
        </FrameLayout>


    </RelativeLayout>

    <android.support.v4.widget.DrawerLayout
        xmlns:android="https://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="match_parent"
        tools:openDrawer="end">

        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:fitsSystemWindows="true"
            app:itemTextColor="#1d3f4c"
            app:itemIconTint="#cd4312"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />


    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

ToolBarをRelativeLayoutに内包したFrameLayoutに配置しました。 android:fitSystemWindowsは3つすべてにtrueに設定する必要があります。 DrawerLayoutにはtools:openDrawer=”end”とandroid:layout_gravity=”end”が含まれており、デフォルトのドロワーの位置を右に変更します。 NavigationView内で円形のヘッダー画像を使用すると美しく見えます。以下に示すように、依存関係de.hdodenhof.circleimageview.CircleImageViewをコンパイルし、nav_header_main.xmlファイルで使用します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@drawable/profile" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Anupam Chugh"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="www.JournalDev.com" />

</LinearLayout>

上記で議論されたものと同じく、他のXMLレイアウトは同じです。MainActivity.javaは以下に示します。

package com.scdev.navigationviewtyling;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    DrawerLayout drawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        findViewById(R.id.drawer_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // open right drawer

                if (drawer.isDrawerOpen(GravityCompat.END)) {
                    drawer.closeDrawer(GravityCompat.END);
                }
                else
                drawer.openDrawer(GravityCompat.END);
            }
        });

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        toggle.setDrawerIndicatorEnabled(false);
        drawer.addDrawerListener(toggle);

        toggle.syncState();


        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {

        if (drawer.isDrawerOpen(GravityCompat.END)) {
            drawer.closeDrawer(GravityCompat.END);
        } else {
            super.onBackPressed();
        }
    }
    

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
            Toast.makeText(getApplicationContext(), "Camera is clicked", Toast.LENGTH_SHORT).show();

        } else if (id == R.id.nav_gallery) {
            Toast.makeText(getApplicationContext(), "Gallery is clicked", Toast.LENGTH_SHORT).show();

        } else if (id == R.id.nav_slideshow) {
            Toast.makeText(getApplicationContext(), "Slideshow is clicked", Toast.LENGTH_SHORT).show();

        } else if (id == R.id.nav_manage) {
            Toast.makeText(getApplicationContext(), "Tools is clicked", Toast.LENGTH_SHORT).show();

        } else if (id == R.id.nav_share) {
            Toast.makeText(getApplicationContext(), "Share is clicked", Toast.LENGTH_SHORT).show();

        } else if (id == R.id.nav_send) {
            Toast.makeText(getApplicationContext(), "Send is clicked", Toast.LENGTH_SHORT).show();

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.END);
        return true;
    }
}

上記のコードから導かれる重要な推論は以下の通りです。

    1. toggle.setDrawerIndicatorEnabled(false); : この行は、左側に表示されていたデフォルトのハンバーガーアイコンを非表示にするために使用されます。

 

    GravityCompatのすべての定数は、STARTの代わりにENDに変更されました。

以下は、アプリケーションの実行時の出力結果です。これにより、Android NavigationViewのチュートリアルは終了です。最終的なAndroid NavigationViewスタイリングプロジェクトは、以下のリンクからダウンロードできます。

Android NavigationView のサンプルプロジェクトをダウンロードしてください。

コメントを残す 0

Your email address will not be published. Required fields are marked *