ToolBar和DrawerLayout的使用实现侧拉栏抽屉的开闭
2016-02-22 21:08
351 查看
1.如图可以看到textColorPrimary,colorPrimary,colorPrimaryDark,navigationBarColor等颜色属性代表的相应位置,如下图
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221224614858-354713669.jpg)
2.具体属性在res的style.xml中更改,如下图,另外在Android.Manifest的里面需要将theme改成对应的AppTheme,如图中所示(注意需要选择NoActionBar的主题作为父类,因为我们不用到ActionBar,而是用ToolBar替代)
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211450317-1223698353.png)
3.接下来需要在主xml文件即activity_main.xml里面声明ToolBar,使用v7库中的toolBar,android.support.v7.widget.ToolBar
并且在mainActivity中需要进行toolBar的绑定
setSupportActionBar(toolbar);
4.ToolBar的里面菜单项的添加,需要用到menu.xml,即在layout里面创建menu文件,作为ToolBar控件的xml文件,
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211649832-1774316976.png)
并且需要将menu利用重载函数OnCreateOptionsMenu(Menu menu)函数来将自定义的menu xml文件来绑定
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211858973-2112823996.png)
图中的item项对应一个ToolBar中的一个标签,这里注意showAsAction需要在app空间下才能调用(故在menu开头添加了app="http://schemas.android.com/apk/res-auto"),该属性设置为always则为显示图标,never则为不显示图标只显示More,如下图
中右边两个白色图标分别为前两个图标,第三个图标由于属性为showAsAction:never,故藏在最右边的三点菜单中,点击则弹出
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221232245373-346989464.jpg)
如何构建左边的菜单即DrawerLayout,抽屉效果如下custom_drawerlayout.xml的内容,DrawerLayout必须至少有两个布局,第一个布局为主布局,就是ToolBar以下的所有位置
第二个布局为隐藏的侧边栏,主要是以ListView为主,此时的gravity="start"相当于left,代表从左边拉开
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221233634983-1705326858.jpg)
为了实现左边菜单的箭头的三条杠的转换,需要调用ActionBarToggle开关,它作为控制左上角的开关来实现抽屉的开合
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222213054801-1510631229.png)
----------------------------------------这里是Cc的悲伤分割线--------------------------------------------------------------------------------------[/code]
下述函数是来捕获ToolBar中的item点击事件
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221224614858-354713669.jpg)
2.具体属性在res的style.xml中更改,如下图,另外在Android.Manifest的里面需要将theme改成对应的AppTheme,如图中所示(注意需要选择NoActionBar的主题作为父类,因为我们不用到ActionBar,而是用ToolBar替代)
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211450317-1223698353.png)
3.接下来需要在主xml文件即activity_main.xml里面声明ToolBar,使用v7库中的toolBar,android.support.v7.widget.ToolBar
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" />
并且在mainActivity中需要进行toolBar的绑定
setSupportActionBar(toolbar);
4.ToolBar的里面菜单项的添加,需要用到menu.xml,即在layout里面创建menu文件,作为ToolBar控件的xml文件,
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211649832-1774316976.png)
并且需要将menu利用重载函数OnCreateOptionsMenu(Menu menu)函数来将自定义的menu xml文件来绑定
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222211858973-2112823996.png)
图中的item项对应一个ToolBar中的一个标签,这里注意showAsAction需要在app空间下才能调用(故在menu开头添加了app="http://schemas.android.com/apk/res-auto"),该属性设置为always则为显示图标,never则为不显示图标只显示More,如下图
中右边两个白色图标分别为前两个图标,第三个图标由于属性为showAsAction:never,故藏在最右边的三点菜单中,点击则弹出
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221232245373-346989464.jpg)
如何构建左边的菜单即DrawerLayout,抽屉效果如下custom_drawerlayout.xml的内容,DrawerLayout必须至少有两个布局,第一个布局为主布局,就是ToolBar以下的所有位置
第二个布局为隐藏的侧边栏,主要是以ListView为主,此时的gravity="start"相当于left,代表从左边拉开
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dl_left" android:layout_width="match_parent" android:layout_height="match_parent"> <!--主界面剩余的布局将在以下进行--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World"/> </LinearLayout> <!--抽屉拉开后的布局,即ListView所在的布局--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:layout_gravity="start"> <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/lv_left_menu" android:divider="@null"> </ListView> </LinearLayout> </android.support.v4.widget.DrawerLayout> ------------------------------------------------------------------------------------------------------------------------------------------ 最后需要把custom_drawerlayout作为组件放在activity_main.xml文件中
<include layout="@layout/custom_drawerlayout"/>
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160221233634983-1705326858.jpg)
为了实现左边菜单的箭头的三条杠的转换,需要调用ActionBarToggle开关,它作为控制左上角的开关来实现抽屉的开合
![](http://images2015.cnblogs.com/blog/786372/201602/786372-20160222213054801-1510631229.png)
以下四步必不可少(ActionBarDrawerToggle可以监听抽屉开合事件,可以认为是DrawerListener的子类) getSupportActionBar().setDisplayHomeAsUpEnabled(true);// 给左上角图标的左边加上一个返回的图标
mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close); //声明mDrawerToggle对象,其中R.string.open和R.string.close简单可以用"open"和"close"替代 mDrawerToggle.syncState();//实现箭头和三条杠图案切换和抽屉拉合的同步 mDrawerLayout.setDrawerListener(mDrawerToggle);监听实现侧边栏的拉开和闭合,即抽屉drawer的闭合和打开 另外两个函数需要注意(分别是抽屉拉开和闭合的触发函数): 这两个函数在这里没有用,如果需要在抽屉打开闭合时改变ToolBar的Title,那么可以通过这两个函数来改变
mDrawerToggle = new ActionBarDrawerToggle(this, // mDrawerLayout,// R.drawable.ic_drawer,// R.string.drawer_open,// R.string.drawer_close) { // 被打开的时候 @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); getActionBar().setTitle(请选择); // 设置actionBar的文字 invalidateOptionsMenu(); // Call onPrepareOptionsMenu() } // 被关闭的时候 @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); getActionBar().setTitle(mTitle); invalidateOptionsMenu();// 重新绘制actionBar上边的菜单项 }};
----------------------------------------这里是Cc的悲伤分割线--------------------------------------------------------------------------------------[/code]
下述函数是来捕获ToolBar中的item点击事件
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.item_search: Toast.makeText(this,"Search item has been selected",Toast.LENGTH_SHORT).show(); break; case R.id.item_share: Toast.makeText(this,"Share item has been selected",Toast.LENGTH_SHORT).show(); break; case R.id.item_more: Toast.makeText(this,"More item has been selected",Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); }
相关文章推荐
- 同步与异步
- 机器学习10大经典算法
- Java c++通过des加解密
- Eclipse配置外部Maven
- poj 2349 Arctic Network
- 图解Nginx-Nginx上下文总结
- HDU - 4417 Super Mario
- 项目中遇到的 linq datatable select
- STL 源代码剖析 算法 stl_algo.h -- merge sort
- ListView和Adapter的配合使用以及Adapter的重写
- WC2016总结
- 学习Linux计划书
- scikit-learn Tutorials (3)
- 【操作系统】 进程与线程
- 利用 diskpart 隐藏显示分区
- 【SDOI2013 necklace】项链
- 《第一本docker书》—— 读后总结
- Android获取Context(任意位置任意地方,全局上下文)
- 程序员面试题精选100题(20)-最长公共子串[算法]
- JAVA_面向对象_笔记_01