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. odbc。INI配置

    [ODBC Data Sources] ST = OSCAR ODBC DRIVER [ST] Driver = /opt/ShenTong/odbc/lib/liboscarodbcw.so Ser ...

  2. codeforces 1425E,一万种情况的简单题

    大家好,欢迎阅读codeforces专题. 我们今天选中的是codeforces 1425场比赛的E题,这是一场印尼多校联合的ICPC的练习赛.ACM赛制,难度也比较近似.我们今天选择的是其中的一道M ...

  3. layui系列学习第一天

    新开一个博客系列 记录下layui学习过程及感受 今天受到很大的打击  ...希望 自己能坚持做好  到1.12号可以完成这个博客 一.基础说明 layui css 命名规范:1.layui-模块名- ...

  4. 在Windows进下build 高可用负载均衡与反向代理神器:HAProxy

    前言 HAProxy是一个款基于Linux的开源高可用的负载均衡与反向代理工具,与Nginx大同小异. 搜遍了全网,几乎都是基于Linux平台.Windows平台的要么就是多年前的旧版本,要么就是不兼 ...

  5. tp3.2关闭debug save方法执行失败

    解决该问题需要 清除缓存文件 将retime下的文件删除

  6. 比特魔方原创,用十分钟在Cocos-BCX上发行了自己的NFT

    比特魔方原创 作者 | 第二个区块 出品 |比特魔方 NFT正在积累越来越多的共识.每看到人们讨论NFT,我隐约就能联想到2019年人们谈论DeFi的时候.隐约让我感到欠缺的是,相对2019年的DeF ...

  7. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  8. 邻居子系统 arp 状态图

  9. 1、线性DP 354. 俄罗斯套娃信封问题

    354. 俄罗斯套娃信封问题 https://leetcode-cn.com/problems/russian-doll-envelopes/ 算法分析 首先我们从两种情况来讨论这个问题: w无重复值 ...

  10. Linux上传递文件到另外一个Linux服务器

    现在的项目由于安全的需要,测试服务器被设置不能直接连接,想要连接的话,只能先登录一个服务器,然后以这个服务器为跳板,去登录另外一台真正的 服务器,即使是测试环境也只能这样操作.只能是相对来说安全一些. ...