http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html(转载)

Toolbar介绍

ActionBar由于其设计的原因,被限定只能位于活动的顶部。从而不能实现一些Material Design的效果,因此官方现在已经不再建议使用Actionbar了。Toolbar的强大之处在于,它不仅继承了Actionbar的所有功能,而且灵活性很高,可以配合其他控件来完成一些MaterialDesign的效果。

DrawerLayout介绍

DrawerLayout是在Slidingmenu出现之后的产物。

NavigationView介绍

NavigationView是Design Support库中提供的一个控件,因此使用时需要把这个库引入到项目中才行。

打开app/build.gradle文件,在dependencies闭包中添加如下内容

compile 'com.android.support:design:24.2.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

第一行是Design Support库,第二行是一个开源项目CircleImageView,该项目可用来轻松实现图片原型化的功能,它的项目地址是https://github.com/hdodenhof/CircleImageView

1.toolbar.xml

 1 <?xml version="1.0" encoding="utf-8"?>
2 <android.support.v7.widget.Toolbar
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 android:id="@+id/toolbar_custom"
6 android:layout_width="match_parent"
7 android:layout_height="?attr/actionBarSize"
8 android:background="?attr/colorPrimary"
9 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
10 app:popupTheme="@style/Theme.AppCompat.Light"
11 >
12 </android.support.v7.widget.Toolbar>

menu文件夹下的toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/other"
android:icon="@drawable/other"
android:title="Other"
app:showAsAction="always"
>
<!-- item包含menu表示该menu是item下的子菜单 -->
<menu>
<!-- 将group中的菜单项放于一个组里面 -->
<group>
<item android:id="@+id/toolbar_r_1"
android:title="吃饭"
android:icon="@drawable/eat"
app:showAsAction="ifRoom"
/>
<item android:id="@+id/toolbar_r_2"
android:title="睡觉"
android:icon="@drawable/sleep"
app:showAsAction="ifRoom"
/>
<item android:id="@+id/toolbar_r_3"
android:title="打豆豆"
android:icon="@drawable/dadoudou"
app:showAsAction="ifRoom"
/>
</group>
</menu>
</item>
</menu>

2.开始使用NavigationView之前需要准备menu和headerLayout

menu文件夹下新建Menu resource file,nav_menu.xml

<?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_peach"
android:icon="@drawable/peach"
android:title="桃子"/>
<item
android:id="@+id/nav_banana"
android:icon="@drawable/banana"
android:title="香蕉"/>
<item
android:id="@+id/nav_apple"
android:icon="@drawable/apple"
android:title="苹果"/>
<item
android:id="@+id/nav_pear"
android:icon="@drawable/pear"
android:title="梨子"/>
</group>
</menu>

注:checkableBehavior指定为single表示组中的所有菜单项只能单选

需要准备headerLayout,layout下新建资源文件nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/username"
android:layout_centerInParent="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="小李飞刀"
android:textColor="#FFF"
android:layout_centerInParent="true"
android:layout_below="@id/icon_image"
android:paddingTop="20dp"
android:textSize="14sp"/>
</RelativeLayout>

3.drawerlayout.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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!--主布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/peach"
android:layout_gravity="center"
/> <android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab"
android:layout_marginTop="400dp"
android:layout_marginRight="15dp"
app:elevation="5dp"
android:src="@drawable/icon_done"
/>
</LinearLayout> <!--侧滑菜单-->
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_gravity="left">
<ListView
android:id="@+id/lv_left_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null"
android:text="DrawerLayout" />
</LinearLayout>--> <!--侧滑菜单-->
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_gravity="right">
<ListView
android:id="@+id/lv_right_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null"
android:text="DrawerLayout" />
</LinearLayout>-->
<android.support.design.widget.NavigationView
android:id="@+id/design_navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

注:app:menu设定自己写好的menu文件(nav_menu.xml)

  app:headerLayout设定写好的headerLayout文件(nav_header.xml)

4.实现的activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:tools="http://schemas.android.com/tools"
4 android:id="@+id/activity_main"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent"
7 android:orientation="vertical"
8 tools:context="com.example.rgd.mysuperapp.MainActivity">
9 <!--toolbar-->
10 <include layout="@layout/custom_toolbar"/>
11 <!--DrawerLayout-->
12 <include layout="@layout/custom_drawerlayout"/>
13 </LinearLayout>

5.如果对Toolbar添加多个Action,则new menu-->toolbar.xml

 1 <?xml version="1.0" encoding="utf-8"?>
2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto">
4 <item
5 android:id="@+id/logout"
6 android:icon="@drawable/ic_logout"
7 android:title="Logout"
8 app:showAsAction="always"
9 />
10 </menu>

6.完善的Java代码MainActivity

package com.example.rgd.mysuperapp;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast; import static com.example.rgd.mysuperapp.R.menu.toolbar; public class MainActivity extends AppCompatActivity { private DrawerLayout drawer_layout;
private ImageView iv_main;
private ListView lv_left_menu;
private String[] lvs={"List1","List2","List3"};
private NavigationView design_navigation_view; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv_main = (ImageView) findViewById(R.id.iv_main);
design_navigation_view = (NavigationView) findViewById(R.id.design_navigation_view);
drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_custom);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键点击
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//是否隐藏返回键。
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
//修改默认的Toolbar图标,Menu
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
} //menu的点击事件
design_navigation_view.setCheckedItem(R.id.nav_apple);
design_navigation_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
drawer_layout.closeDrawers();
return true;
}
});
} public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(toolbar,menu);
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){
case R.id.logout:
Toast.makeText(this, "你点了注销", Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
drawer_layout.openDrawer(GravityCompat.START);
break;
default:
break;
}
return true;
}
}

注:1.menu下的toolbar.xml是在Activity中代码加载的。

  2.toolbar要有效果,需在manifests中指定一个不带ActionBar的主题,如Theme.AppCompat.NoActionBar。

  3.NavigationView的setCheckedItem()设置第一个为默认选中,

  4.NavigationView的setNavigationItemSelectedListener()方法是来设置菜单项选中事件的监听器。

  5.onCreateOptionsMenu方法是用来设置menu下的toolbar.xml

Toolbar+DrawerLayout+NavigationView的使用的更多相关文章

  1. Android使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果

    学会使用DrawerLayout 学会使用NavigationView 学会使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果 学会实现Toolbar在顶部以及 ...

  2. ToolBar+DrawerLayout + NavigationView

    http://www.jianshu.com/p/9471b87f2c61 很好的博客可以瞅瞅 <android.support.design.widget.NavigationView and ...

  3. android 5.X Toolbar+DrawerLayout实现抽屉菜单

    前言  android5.X新增的一个控件Toolbar,这个控件比ActionBar更加自由,可控,因为曾经的ActionBar的灵活性比較差,所以google逐渐使用Toolbar替代Action ...

  4. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...

  5. Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

    通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一 ...

  6. Android——使用Toolbar + DrawerLayout快速实现高大上菜单侧滑(转)

    今天就来使用官方支持库来快速实现这类效果,需要使用到Toolbar和DrawerLayout,详细步骤如下:(如果你还不知道这两个Widget,先自己Google吧~) 1.首先需要添加appcomp ...

  7. Material Design控件使用学习 toolbar+drawerlayout+ Snackbar

    效果 1.,导包design包和appcompat-v7 ,设置Theme主题Style为NoActionbar 2.custom_toolbar.xml <?xml version=" ...

  8. 仿oschina 主界面的实现(二) -------Toolbar + DrawerLayout

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  9. 使用Toolbar + DrawerLayout快速实现高大上菜单侧滑

    如果你有在关注一些遵循最新的Material Design设计规范的应用的话(如果没有,假设你有!),也许会发现有很多使用了看起来很舒服.很高大上的侧滑菜单动画效果,示例如下(via 参考2): 今天 ...

随机推荐

  1. 排序算法—快速排序(Quick Sort)

    快速排序(Quick Sort) 快速排序的基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序. ...

  2. Dreamweaver是怎么把图片转换成代码 简单五步骤即可解决

    Dreamweaver图片转换代码图文介绍 1.打开需要转换的Photoshop作品: 2.保存为web格式,得到一个文件夹和一个html格式文件: 3.在html格式文件上单击右键,选择打开方式为D ...

  3. java实现一个简单的单链表反转

    自定义一个单链表,实现链表反转: 1.普通方法实现 2.递归方式实现 package listNode; public class ReverseNode { public static void m ...

  4. C语言I博课作业04

    这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2020-1/homework/11489 我在这个作业课程 ...

  5. UNP——第三章,套接字编程介绍

    1.套接字结构 多数套接字函数都有套接字结构参数,每个协议族都定义了自己的套接字结构,以 sockaddr_ 开始,并对应协议族的唯一后缀. struct sockaddr_in { uint8_t ...

  6. Loadrunner学习(一)

    一个优秀的软件系统不单单具有良好的功能,还需要有过硬的性能,一个只通过功能测试的系统,只能称之为"可用",而不能算是"好用".当然,性能测试需要基于功能测试,只 ...

  7. 测试:OGG初始化同步表,源端抽取进程scn<源端事务的start_scn时,这个变化是否会同步到目标库中?

    一.测试目标 疑问,OGG初始化同步表,源端抽取进程开始抽取的scn<源端事务的start_scn时,这个变化是否会同步到目标库中? 二.实验测试 如下进行测试! session 1 SQL&g ...

  8. Innodb之(临时)表空间、段、区、块

    引用连接:https://www.cnblogs.com/duanxz/p/3724120.html 对于innodb存储引擎而言,其数据文件最小的存储单位为页.默认为16KB大小.在页的基础上又分为 ...

  9. ntpd配置时间同步服务器

    修改同步服务器的配置文件/etc/ntp.conf ,删除所有的内容,添加 restrict default nomodify server 127.127.1.0 # local clock fud ...

  10. Vue 计算属性与方法

    computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...