Toolbar+DrawerLayout+NavigationView的使用
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的使用的更多相关文章
- Android使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果
学会使用DrawerLayout 学会使用NavigationView 学会使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果 学会实现Toolbar在顶部以及 ...
- ToolBar+DrawerLayout + NavigationView
http://www.jianshu.com/p/9471b87f2c61 很好的博客可以瞅瞅 <android.support.design.widget.NavigationView and ...
- android 5.X Toolbar+DrawerLayout实现抽屉菜单
前言 android5.X新增的一个控件Toolbar,这个控件比ActionBar更加自由,可控,因为曾经的ActionBar的灵活性比較差,所以google逐渐使用Toolbar替代Action ...
- Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...
- Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)
通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一 ...
- Android——使用Toolbar + DrawerLayout快速实现高大上菜单侧滑(转)
今天就来使用官方支持库来快速实现这类效果,需要使用到Toolbar和DrawerLayout,详细步骤如下:(如果你还不知道这两个Widget,先自己Google吧~) 1.首先需要添加appcomp ...
- Material Design控件使用学习 toolbar+drawerlayout+ Snackbar
效果 1.,导包design包和appcompat-v7 ,设置Theme主题Style为NoActionbar 2.custom_toolbar.xml <?xml version=" ...
- 仿oschina 主界面的实现(二) -------Toolbar + DrawerLayout
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- 使用Toolbar + DrawerLayout快速实现高大上菜单侧滑
如果你有在关注一些遵循最新的Material Design设计规范的应用的话(如果没有,假设你有!),也许会发现有很多使用了看起来很舒服.很高大上的侧滑菜单动画效果,示例如下(via 参考2): 今天 ...
随机推荐
- python机器学习识别手写数字
手写数字识别 关注公众号"轻松学编程"了解更多. 导包 import numpy as np import matplotlib.pyplot as plt %matplotlib ...
- Odoo环境搭建之问题readme
环境及工具 Windows,PyCharm Community Edition,postgresql-13.0-1 启动odoo环境 python odoo-bin 如果你只是还是空壳,启动odoo之 ...
- 别走!这里有个笔记:图文讲解 AQS ,一起看看 AQS 的源码……(图文较长)
前言 AbstractQueuedSynchronizer 抽象队列同步器,简称 AQS .是在 JUC 包下面一个非常重要的基础组件,JUC 包下面的并发锁 ReentrantLock CountD ...
- 手写Koa.js源码
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
- 纯css实现箭头
很久之前收集的,忘记出处了. 1.梯形: 当元素宽.高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形: border: 10px solid #000; border-left-color: ...
- JS基础算法题(二)
1.1 数组去重的五种方法 数组去重:将数组中重复的元素去掉 JS数组没有删除具体元素的删除(只能删掉值,删不掉元素的索引),可以使用另外一个结构来进行存储 新数组 新对象 JS数组虽然本质可以删除第 ...
- MQ-gogogo
1. RocketMQ https://github.com/alibaba/RocketMQ/wiki/quick-start 2. RabbitMQ https://www.rabbitmq.co ...
- 6. Spark SQL和Beeline
*以下内容由<Spark快速大数据分析>整理所得. 读书笔记的第六部分是讲的是Spark SQL和Beeline. Spark SQL是Spark用来操作结构化和半结构化数据的接口. 一. ...
- 机器学习-logistic对数回归求参数,画散点图以及分割线
这个在我初学的时候我也不是很明白,于是在查了很多资料后找到一个很不错的博客给大家分享一下!! 研读一下代码对初学者有很大的帮助 作为一个初学者,一开始都是模仿别人的代码学会后就成为自己的东西了,相信你 ...
- nginx&http 第五章 https non-fd 读写检测
EPOLL的LT/ET 模式下的读写 从一个非阻塞的socket上调用recv/send函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK)从字面上看, ...