介绍

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件

android.support.v4.widget.DrawerLayout

NavigationView是一个导航菜单框架,使用menu资源填充数据

常用来配合DrawerLayout使用


基本使用

DrawerLayout

布局文件

<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">
……
</android.support.v4.widget.DrawerLayout>

使用DrawerLayout的时候需要将该布局作为根布局,然后在DrawerLayout中添加其他布局作为显示界面。

代码

drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);获取DrawerLayout对象

//设置监听事件,监听DrawerLayout的状态,打开,关闭,滑动距离,状态改变,可以实现自己的定制
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
Log.e(TAG , " onDrawerSlide slideOffset = " + slideOffset);
} @Override
public void onDrawerOpened(View drawerView) {
Log.e(TAG , " onDrawerOpened ");
} @Override
public void onDrawerClosed(View drawerView) {
Log.e(TAG , " onDrawerClosed ");
} @Override
public void onDrawerStateChanged(int newState) {
Log.e(TAG , " onDrawerStateChanged ");
}
});

DrawerLayout的状态监听,listener的回调提供给开发者使用。

NavigationView

布局

header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="240dp"
android:background="@color/colorPrimaryDark"
android:orientation="vertical"> //引用GitHub上的开源库
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/civ_profile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="20dp"
android:src="@drawable/logo" /> <TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/civ_profile"
android:layout_below="@+id/civ_profile"
android:layout_marginTop="10dp"
android:text="Askmak Sharon"
android:textColor="#FFFFFF"
android:textSize="8pt"
android:textStyle="bold" /> <TextView
android:id="@+id/tv_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/civ_profile"
android:layout_below="@+id/tv_name"
android:layout_marginTop="10dp"
android:text="onlyloveyd@gmail.com"
android:textColor="#FFFFFF"
android:textSize="8pt"
android:textStyle="italic" />
</RelativeLayout>

这里使用了Github上的开关库de.hdodenhof.circleimageview.CircleImageView,其中可以设置一些属性,这里没有设置,可能是因为我使用的图片风格的原因,将头像的边框加上去后看上去不是那么协调

属性 意义
app:civ_border_color=”“ 边框颜色
app:civ_border_width=”“ 边框宽度
app:civ_fill_color=”“ 填充颜色

second_menu.xml

这里只是名字叫做second_menu而已,没有其他的意思,只是一个普通的menu资源文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:id="@+id/nv_profile"
android:icon="@drawable/profile"
android:orderInCategory="80"
android:title="Profile" /> <item
android:id="@+id/nv_video"
android:icon="@drawable/video"
android:orderInCategory="90"
android:title="Video" /> <item
android:id="@+id/nv_help"
android:icon="@drawable/help"
android:orderInCategory="100"
android:title="Help" />
</menu>

这个menu资源是用来在NavigationView中使用的导航菜单


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <include layout="@layout/toolbar"></include> <FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/content_iv"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/ic_launcher"/>
</FrameLayout> </LinearLayout> <android.support.design.widget.NavigationView
android:id="@+id/nv_left"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header"
app:menu="@menu/second_menu">
</android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>

比较关键的几个点



android:layout_gravity=”start”

app:headerLayout=”@layout/header”//头布局

app:menu=”@menu/second_menu”//菜单资源


代码

MainActivity.java

package mraz.com.actionbardemo;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView; public class MainActivity extends AppCompatActivity { public static String TAG = "yidong";
DrawerLayout drawerLayout;
NavigationView navigationView;
Toolbar toolbar;
ImageView imageView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
toolbar = (Toolbar) findViewById(R.id.toolbar);
navigationView = (NavigationView) findViewById(R.id.nv_left);
imageView = (ImageView) findViewById(R.id.content_iv); setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp); drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
Log.e(TAG , " onDrawerSlide slideOffset = " + slideOffset);
} @Override
public void onDrawerOpened(View drawerView) {
Log.e(TAG , " onDrawerOpened ");
} @Override
public void onDrawerClosed(View drawerView) {
Log.e(TAG , " onDrawerClosed ");
} @Override
public void onDrawerStateChanged(int newState) {
Log.e(TAG , " onDrawerStateChanged ");
}
}); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
if(drawerLayout.isDrawerOpen(Gravity.LEFT))
drawerLayout.closeDrawer(Gravity.LEFT); switch(item.getItemId()) {
case R.id.nv_profile:
imageView.setImageResource(R.drawable.profile);
break;
case R.id.nv_video:
imageView.setImageResource(R.drawable.video);
break;
case R.id.nv_help:
imageView.setImageResource(R.drawable.help);
break;
} return true;
}
});
}
…… }

针对NavigationView中的Menu设置响应事件,使用的方式和上一篇中ActionBar中的菜单资源使用方式相似,都是用过getItemId获取资源的id,然后以此作为依据进行对应的响应操作


ActionBar和DrawerLayout配合

一般用户的操作就是右滑或者点击ActionBar左上角的Icon出现左侧抽屉菜单

左侧滑动上面的内容已经实现了,点击ActionBar实现抽屉菜单的开关只需要针对左上角的ActionBar的图标做对应的事件处理即可。

setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp);

然后在onOptionsItemSelected中

case android.R.id.home:
if(!drawerLayout.isDrawerOpen(Gravity.LEFT)) {
drawerLayout.openDrawer(Gravity.LEFT, true);
}
break;

因为ActionBar的NavigationIcon对应的资源ID就是

android.R.id.home

根据这个资源ID定制对应的事件响应,上面就是简单的打开左侧的抽屉菜单

效果图

NavigationView菜单响应


ActionBar左上角图标响应


源代码

###点击下载源代码###

<Android 基础(七)> DrawerLayout and NavigationView的更多相关文章

  1. <Android基础> (七)内容提供器

    第七章 内容提供器 7.1 内容提供器(Content Provider) 主要应用于在不同的应用程序之间实现数据共享功能.允许一个程序访问另一个程序中的数据,同时还能保证被访数据的安全性. 7.2 ...

  2. Android CoordinatorLayout、AppBarLayout、DrawerLayout、NavigationView 的使用及问题小结

    这里只对Material Design中这几种组件使用的重要部分以及容易出现问题的地方进行汇总(遇坑请直接看最后常见问题部分),详细用法请自行查阅官方文档 一.CoordinatorLayout 介绍 ...

  3. Android基础总结(8)——服务

    服务(Service)是Android中实现程序后台运行的解决方案,它非常适合用于去执行哪些不需要和用户交互而且还要长期运行的任务.服务的运行不依赖任何用户界面,即使当程序被切换到后台,或者用户打开了 ...

  4. Android逆向-Android基础逆向(5)

    本文作者:i春秋作家——HAI_ 0×00 前言 不知所以然,请看 Android逆向-Android基础逆向(1)Android逆向-Android基础逆向(2)Android逆向-Android基 ...

  5. android基础---->DiskLruCache的使用及原理

    DiskLruCache是谷歌推荐的用来实现硬盘缓存的类,今天我们开始对于DiskLruCache的学习.DiskLruCache的测试代码:DiskLruCache的测试代码下载.关于FidkLru ...

  6. Android基础夯实--重温动画(一)之Tween Animation

    心灵鸡汤:真正成功的人生,不在于成就的大小,而在于你是否努力地去实现自我,喊出自己的声音,走出属于自己的道路. 摘要 不积跬步,无以至千里:不积小流,无以成江海.学习任何东西我们都离不开扎实的基础知识 ...

  7. (转载) 使用DrawerLayout和NavigationView从右侧出现

    使用DrawerLayout和NavigationView从右侧出现 2016-07-21 17:53 957人阅读 评论(0) 收藏 举报  分类: android(9)  版权声明:本文为博主原创 ...

  8. Android基础测试题(四)

    看了前两道题大家有没有发现,测试题少了(一),大家猜猜测试题(一)是什么? Android基础测试题(四): 需求: 建一个方法,格式化输出2016-11-14 10:15:26格式的当前时间,然后截 ...

  9. Android基础测试题(二)

    今天给大家带来的是Android基础测试题(二) 题目要求: 定义一个5位长度的整型数组并初始化,然后构建方法根据用户传入的数字判断是否存在数组中,如果存在,返回所在位置,如果不存在,返回-1 首先第 ...

随机推荐

  1. Spring IOC机制使用SpEL

    一.SpEL 1.1       简介 Spring Expression Language,Spring表达式语言,简称SpEL.支持运行时查询并可以操作对象图. 和JSP页面上的EL表达式.Str ...

  2. 基于XML的类的属性的装配

    基于XML的属性装配 1.手动装配 <!-- 属性的装配:手动装配 --> <bean id="userService" class="com.neue ...

  3. Leetcode 283. Move Zeroes 移动数组中的零 (数组,模拟)

    题目描述 已知数组nums,写一个函数将nums中的0移动到数组后面,同时保持非零元素的相对位置不变.比如已知nums=[0,1,0,3,12],调用你写的函数后nums应该是[1,3,12,0,0] ...

  4. Python-6-字典-函数dict,字典的基本操作及将字符串设置功能用于字典

    phonebook = {'Alice': '2341', 'Beth': '9102', 'Cecil': '3258'} 字典由键及其相应的值组成,这种键-值对称为项. 键必须为独一无二,值不必如 ...

  5. vue项目中禁止移动端双击放大,双手拉大放大的方法

    在vue打包后生成的dist目录文件下下面有index.html 打开里面 把原来的这个 <meta name=viewport content="width=device-width ...

  6. 6 GPath

    1       GPath GPath是Groovy的表达式语言,类似xml的XPath.而二者的不同在于,GPath表达式可以应用于处理POJOs或者处理xml. 例如:a.b.c语句等同于a.ge ...

  7. ls -ilh 查看文件属性

    属性信息[H0f@localhost ~]$ ls -hiltotal 12K139323 -rw-rw-r--. 1 H0f H0f    7 Mar 14 00:49 1.txt139318 -r ...

  8. GO 日志追加记录

    以追加的方式将程序输出到不同的日志文件,当日志文件超过10M大小时,自动清空文件. package tools import ( "fmt" "log" &qu ...

  9. 1.3 guessing game

    创建项目 [root@itoracle test]# cargo new guessing_game Created binary (application) `guessing_game` pack ...

  10. 使用Dockerfile docker tomcat部署

    在百度上试很多文章都不行,只有这篇可以. 宿主机为:centos64位 //安装docker 1:yum install docker //启动docker 2:systemctl start  do ...