Android Material Design之 NavigationView侧滑界面自定义 随笔

时间:2023-03-09 17:54:37
Android Material Design之 NavigationView侧滑界面自定义 随笔

一、侧滑界面Menu自定义:

在menu文件夹下新建activity_main_drawer.xml文件,自定义标题和icon:

 <?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/nav_forWhy" android:icon="@drawable/ic_nav_for_why"
android:title="十万个为什么" />
<item android:id="@+id/nav_knowledge" android:icon="@drawable/ic_nav_knowledge"
android:title="百科知识" />
<item android:id="@+id/nav_expo" android:icon="@drawable/ic_nav_expo"
android:title="科普博览" />
<item android:id="@+id/nav_reader" android:icon="@drawable/ic_nav_reader"
android:title="科普读物" />
<item android:id="@+id/nav_favorite" android:icon="@drawable/ic_nav_favorite"
android:title="我的私藏" />
</group> <item android:title="其他">
<menu>
<item android:id="@+id/nav_author" android:icon="@drawable/ic_nav_author"
android:title="作者"/>
<item android:id="@+id/nav_about" android:icon="@drawable/ic_nav_about"
android:title="版权说明" />
</menu>
</item>
</menu>

二、侧滑界面头部布局自定义

在layout下新建nav_header_main.xml文件进行侧滑界面头部自定义布局:

 <?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://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: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"

     android:orientation="vertical"

     android:gravity="bottom">

     <ImageView android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:paddingTop="@dimen/nav_header_vertical_spacing"

         android:src="@mipmap/ic_launcher"

         android:id="@+id/imageView" />

     <TextView android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:paddingTop="@dimen/nav_header_vertical_spacing"

         android:text="@string/app_name"

         android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

     <TextView android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="Encyclopedia World"

         android:id="@+id/textView" />

 </LinearLayout>

三、开始创建activity的布局文件

将自定义menu和头部布局添加到activity_main.xml布局文件的NavigationView控件中:
 <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" />
四、在activity声明并调用NavigationView
1、声明NavigationView:
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
2、对NavigationView每个item的进行监听:
 @Override

 public boolean onNavigationItemSelected(MenuItem item) {

     // Handle navigation view item clicks here.

     int id = item.getItemId();

     switch (id){

         case R.id.nav_forWhy://十万个为什么

                         break;

         case R.id.nav_knowledge://百科知识

                        break;

         case R.id.nav_expo://科普博览
break; case R.id.nav_reader://科普读物 break; case R.id.nav_favorite://我的私藏 break; case R.id.nav_author://作者 break; case R.id.nav_about://版权说明 break; } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START);//关闭侧滑界面 return true; }
五、最终效果图:
 

Android Material Design之 NavigationView侧滑界面自定义 随笔

Demo下载地址:http://zhushou.360.cn/detail/index/soft_id/3145828