Android 开发之Android Material Design NavigationView侧滑界面自定义

原创 2015年11月18日 11:12:04

Android 开发之Android Material Design NavigationView侧滑界面自定义

一、侧滑界面Menu自定义:

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

<pre name="code" class="java"><?xmlversion="1.0"encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">   
<groupandroid:checkableBehavior="single">
        <itemandroid:id="@+id/nav_forWhy"    android:icon="@drawable/ic_nav_for_why"
            android:title="十万个为什么"/>
        <itemandroid:id="@+id/nav_knowledge"android:icon="@drawable/ic_nav_knowledge"
            android:title="百科知识"/>
        <itemandroid:id="@+id/nav_expo"android:icon="@drawable/ic_nav_expo"
            android:title="科普博览"/>
        <itemandroid:id="@+id/nav_reader"android:icon="@drawable/ic_nav_reader"
            android:title="科普读物"/>
        <itemandroid:id="@+id/nav_favorite"android:icon="@drawable/ic_nav_favorite"
            android:title="我的私藏"/>
    </group>

    <itemandroid:title="其他">
        <menu>
            <itemandroid:id="@+id/nav_author"android:icon="@drawable/ic_nav_author"
                android:title="作者"/>
            <itemandroid: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
声明NavigationView:
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

对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;
}

 
五、最终效果图:



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

 

MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)

DrawerLayout可以实现左滑和右滑功能,只要在layout文件中配置好左右两个抽屉就可以了,左右两个抽屉可以是任意的view,结合NavigationView可以很好实现侧滑菜单的功能 要使用...
  • LAMP_zy
  • LAMP_zy
  • 2015年12月01日 14:39
  • 3719

Material Design之NavigationView和DrawerLayout实现侧滑菜单栏

本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果,NavigationView是android-support-design...
  • u010687392
  • u010687392
  • 2015年07月11日 18:20
  • 5814

Material Design之NavigationView的用法(抽屉式侧边栏)

Android自带抽屉布局及NavigationView的使用 导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的N...
  • Imshuyuan
  • Imshuyuan
  • 2017年06月06日 14:27
  • 519

一步步走进Android MaterialDesign 之 NavigationView

接上一篇文章,我们将左边留给NavigationView。虽然这玩意我觉得没什么意义,但是还是看下...
  • r17171709
  • r17171709
  • 2015年06月19日 17:44
  • 977

Material Design之Material Menu侧滑菜单

在ToolBar上写Material Menu需要编辑到的文件如下图 首先先写values\styles.xml和values-v21\styles.xml文件还有color文件 values\s...
  • wu_wxc
  • wu_wxc
  • 2015年08月02日 21:24
  • 1563

Material Design 侧滑菜单栏

NavigationView和DrawerLayout结合实现侧滑菜单栏效果,NavigationView是android-support-design包下的一个控件.如果要在XML使用Navigat...
  • xiexuan2007
  • xiexuan2007
  • 2016年07月12日 11:18
  • 1013

Android Material Design: NavigationView抽屉导航菜单

Android Material Design: NavigationView抽屉导航菜单 之前我写了一篇关于实现Android抽屉导航菜单栏的文章《基于Android官方DrawerLayout实...
  • zhangphil
  • zhangphil
  • 2015年10月06日 14:11
  • 2082

安卓日记——玩转Material Design(NavigationView篇)

最近突然对Material Design感兴趣,然后想看看怎么玩。 首先要说的是NavigationView,就是我们经常要用到的侧边导航栏 在没有NavigationView之前我们用的是普通的...
  • qq_32198277
  • qq_32198277
  • 2016年06月17日 19:04
  • 1171

MaterialDesign学习笔记1:DrawerLayout+NavigationView实现抽屉效果

DrawerLayout+NavigationView实现抽屉效果 Google I/O 2015 给大家带来了Android Design Support Library,一直对Material D...
  • TangVim
  • TangVim
  • 2016年09月24日 16:24
  • 1009

Android Material Design详解

Android L: Google已经确认Android L就是Android Lollipop(5.0)。 Google之前就已经提前推出了Android...
  • yangxi_001
  • yangxi_001
  • 2016年01月30日 12:15
  • 4340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 开发之Android Material Design NavigationView侧滑界面自定义
举报原因:
原因补充:

(最多只允许输入30个字)