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): 今天 ...
随机推荐
- C++在C的基础上改进了哪些细节
C++ 是在C语言的基础上改进的,C语言的很多语法在 C++ 中依然广泛使用,例如: C++ 仍然使用 char.short.int.long.float.double 等基本数据类型: ...
- 多服务器使用Docker设置一主一从三哨兵redis(完整)
本来应该续之前那篇博客Docker配置redis哨兵模式--多服务器·上写一个下篇的,但是忽然意识到应该将必要的环境打包为一个基础镜像,在此基础上建立与redis有关的镜像,这样既能够快速打包,又能够 ...
- CC模型加载太慢?一招破解!
伴随无人机性能的提升,单个项目涉及到的倾斜摄影数据范围不断扩大,模型的数据量越来越大,在同配置机器上的显示速度也相应的越来越慢,那么如何在不升级配置的情况下提升模型的加载速度呢? 01 百GB倾斜摄影 ...
- 经典c程序100例==41--50
[程序41] 题目:学习static定义静态变量的用法 1.程序分析: 2.程序源代码: #include "stdio.h" varfunc() { int var=0; sta ...
- absolute与relative 的超越
relative 超越了自身而已,所有位置的变化是相对于正常流下自身的表现而言 absolute 超越了父容器,位置信息是基于父容器的位置而言
- 为什么关不掉所有的OSD
前言 碰到一个cepher问了一个问题: 为什么我的OSD关闭到最后有92个OSD无法关闭,总共的OSD有300个左右 想起来在很久以前帮人处理过一次问题,当时环境是遇上了一个BUG,需要升级到新版本 ...
- Java POI 导出带有图片的word
1. 引入maven ,具体可以上github看一下,这里做简单的说明,是一个大神封装了一下 官方提供的语法 文本语法是 {{Text}} 图片语法是{{@Image}} 其他的自己去看官方文档 &l ...
- 解决 Mac webstrom Mac bigsur 中 Can‘t use Subversion command line client:svn
解决 Mac webstrom Can't use Subversion command line client: svn The path to the Subversion executable ...
- Javac编译器详解
学习<深入了解Java虚拟机>有一段时间了,大概理解了Java从源代码编译到执行出结果的过程,也能明确的知道Java是半解释性语言.在执行源代码时,先通过Javac编译器对源代码进行词法分 ...
- ClickHouse 研讨会学习笔记(clickhouse tips and tricks)
一.显示执行日志 clickhouse-client --send_logs_level=trace 或者进入client session 后输入 set send_logs_level = 'tra ...