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. (模板)graham扫描法、andrew算法求凸包

    凸包算法讲解:Click Here 题目链接:https://vjudge.net/problem/POJ-1113 题意:简化下题意即求凸包的周长+2×PI×r. 思路:用graham求凸包,模板是 ...

  2. ZOJ 1004 Anagrams by Stack

    Anagrams by Stack 题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1004 题意:通过堆栈实现将一 ...

  3. How to using code post packingSlip on Quality Orders Form[AX2009]

    For simple user operation posting packing slip with purchase order. we added a function button on Qu ...

  4. c#导入文件

    string[] lines = System.IO.File.ReadAllLines(@"C:\Users\Administrator\Desktop\2.txt",Encod ...

  5. leetcode72:combinations

    题目描述 给出两个整数n和k,返回从1到n中取k个数字的所有可能的组合 例如: 如果n=4,k=2,结果为 [↵ [2,4],↵ [3,4],↵ [2,3],↵ [1,2],↵ [1,3],↵ [1, ...

  6. 【Mycat】Mycat核心开发者带你看尽Mycat三大核心配置文件

    写在前面 在分布式数据库中间件领域,Mycat和ShardingSphere可以说是在开源界有着相当重要的位置,不少小伙伴也在问我:Mycat和sharding-jdbc哪个好呀!其实,就我本身而言, ...

  7. C#设计模式-建造者模式(Builder Pattern)

    引言 在软件测试中,一个项目的自动化测试包括UI自动化.API自动化.压力自动化等,把这些不同类型的自动化测试组装在一起变构成了一个项目的自动化测试.通过执行项目的自动化测试变能执行他的所有类型的自动 ...

  8. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  9. SQL:获取每个key下最新创建的记录

    今天遇到了一个好玩的问题 问题: 有一个含有key和createdTime字段的表,表里存在很多不同的key值,每个key值下有很多记录. 我想要查出每个key下面cratedTime最大的记录,即每 ...

  10. [MIT6.006] 21. Daynamic Programming III: Parenthesization, Edit Distance, Knapsack 动态规划III:括号问题,编辑距离,背包问题

    这节课主要针对字符串/序列上的问题,了解如果使用动态规划进行求解.上节课我们也讲过使用前缀和后缀的概念,他们如下所示: 接下来,我们通过三个问题来深入了解下动态规划使用前缀.后缀和子串怎么去解决括号问 ...