且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Android Material Design: NavigationView抽屉导航菜单

更新时间:2022-06-15 03:28:17

Android Material Design: NavigationView抽屉导航菜单

之前我写了一篇关于实现Android抽屉导航菜单栏的文章《基于Android官方DrawerLayout实现抽屉导航菜单》,文章链接地址:http://blog.csdn.net/zhangphil/article/details/48710453
在最新的Android Material Design中引入了NavigationView增强DrawerLayout。也可以认为是谷歌官方Android SDK对抽屉导航菜单栏进一步代码规范化。
效果如图所示:

Android Material Design: NavigationView抽屉导航菜单


测试的主Activity MainActivity.java :

package zhangphil.materialdesign;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

	private DrawerLayout drawerLayout;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView);
		drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
		navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
			@Override
			public boolean onNavigationItemSelected(MenuItem menuItem) {
				menuItem.setChecked(true);

				// 关闭
				drawerLayout.closeDrawers();

				String t = menuItem.getTitle() + "";
				Toast.makeText(getApplicationContext(), t, Toast.LENGTH_SHORT).show();

				return true;
			}
		});

		TextView text1 = (TextView) findViewById(android.R.id.text1);
		text1.setText("头部1");
		text1.setTextColor(Color.RED);
		TextView text2 = (TextView) findViewById(android.R.id.text2);
		text2.setText("头部2");
		text2.setTextColor(Color.BLUE);

		Button button = (Button) findViewById(R.id.button);
		button.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// 由Button也可以打开
				// 从左边打开
				drawerLayout.openDrawer(GravityCompat.START);
			}
		});
	}

	// @Override
	// public boolean onOptionsItemSelected(MenuItem item) {
	// if (item.getItemId() == android.R.id.home){
	//
	// //打开
	// drawerLayout.openDrawer(GravityCompat.START);
	// }
	//
	// return super.onOptionsItemSelected(item);
	// }
}

MainActivity.java需要的布局文件:activity_main.xml文件:

<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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="打开 " />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="主界面"
            android:textSize="50sp" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@android:layout/simple_list_item_2"
        app:itemIconTint="#ff5252"
        app:itemTextColor="#42a5f5"
        app:menu="@menu/main" >
    </android.support.design.widget.NavigationView>

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


activity_main.xml用到的的菜单布局文件main.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <item
        android:checkableBehavior="single"
        android:title="第一组菜单">
        <item
            android:id="@+id/open"
            android:icon="@drawable/ic_launcher"
            android:title="打开"/>
        <item
            android:id="@+id/close"
            android:icon="@drawable/ic_launcher"
            android:title="关闭"/>
        <item
            android:id="@+id/create"
            android:icon="@drawable/ic_launcher"
            android:title="新建"/>
    </item>
    <item android:title="第二组菜单">
        <menu>
            <item
                android:id="@+id/exit"
                android:icon="@drawable/ic_launcher"
                android:title="退出"/>
            <item
                android:id="@+id/about"
                android:icon="@drawable/ic_launcher"
                android:title="关于"/>
        </menu>
    </item>

</menu>


(1)app:headerLayout表示要在弹出的抽屉导航菜单的顶部(头部)加载的布局。
(2)app:itemIconTint设置抽屉导航菜单中图标icon的颜色。
(3)app:itemTextColor设置抽屉导航菜单中的字体颜色。
(4)app:menu设置加载的菜单布局文件。