参考:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
http://blog.csdn.net/guolin_blog/article/details/18234477
可结合:Menu的使用一起食用
一、ToolBar的简介
Goole用来替代原来的ActionBar的控件。为了向下兼容,Google没有将Toolbar作为默认ActionBar类使用,而需要自己放入布局中。
完整Toolbar图:
二、设置ToolBar为Activity的默认ActionBar
①、在Layout中添加ToolBar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" >
</android.support.v7.widget.Toolbar>
跟平常添加View在layout中是一样的,唯一不一样的地方是layout_height="?attr/actionBarSize"
表示:高度遵循Android默认提供的ActionBar的高度。(这是style的一种使用方式)
②、将Activity的ActionBar隐藏。
②、将Activity的ActionBar隐藏。
在values/styles.xml中
<resources>
<!--parent设置为NoActionBar-->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
③、将Activity的ActionBar设置为ToolBar
原因:Activity的默认的ActionBar为自带的ActionBar,所以代码中使用的Actionbar的引用还是指向原始的ActionBar,现在需要切换成我们定义的Toolbar
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
}
}
然后运行,我们发现,ToolBar上自带了title(为App的名字),如果想要修改的话可以调用
<span style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;">mToolBar.setTitle("your name"); </span>
<span style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;">mToolBar.setTitle("your name"); </span>
或者可以在AndroidManifest.xml中修改
<span style="font-weight: normal;"><activity android:name=".MainActivity"
<!--设置Activity的ActionBar的图片-->
android:icon="@mipmap/ic_launcher"
<!--设置Activity的标题-->
android:label="测试"></span><pre name="code" class="html"><span style="font-weight: normal;"></activity></span>
三、设置Toolbar的背景颜色
首先了解Android的颜色构成:
1、colorPrimaryDark(状态栏底色):在风格 (styles) 或是主题 (themes) 里进行设定。App bar 底色2、这个设定分为二,若你的 android app 仍是使用 actionbar ,则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可;可若是采用 toolbar 的话,则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。3、navigationBarColor(导航栏底色):
仅能在 API v21 也就是 Android 5 以后的版本中使用, 因此要将之设定在 res/values-v21/styles.xml 里面。
所以,我们需要设置ToolBar的background,为与theme相同,我选择这么设置
android:background:?attr/colorPrimary
四、在Toolbar中添加控件
能够添加的控件:
1、setNavigationIcon()即设定 up button 的图标。
android提供默认的NavigationIcon(),使用getSupportActionBar().setDisplayHomeAsUpEnabled(true);设置默认的NavigationIcon,默认为返回箭头。
setNavigationOnClickListener():设定up button的监听。默认的NavigationIcon的id为R.id.home。
注:setNavigationIcon需要放在 setSupportActionBar之后才会生效。2、setLogo()APP 的图标。3、setTitle()主标题。4、setSubtitle()副标题。5、setOnMenuItemClickListener设定菜单各按鈕的动作。
代码:
//Up_Button
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
//Logo
mToolbar.setLogo(R.mipmap.ic_launcher);
//主标题
mToolbar.setTitle("It is main title");
//副标题
mToolbar.setSubtitle("It is sub title");
设置Menu的视图与点击事件
Menu的视图:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_add"
android:icon="@android:drawable/ic_menu_add"
android:title="添加"
android:orderInCategory="80"
app:showAsAction="ifRoom"/>
<!--orderInCategory表示图片展现的次序-->
<item
android:id="@+id/menu_delete"
android:icon="@android:drawable/ic_menu_delete"
android:title="删除"
android:orderInCategory="90"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/menu_search"
android:icon="@android:drawable/ic_menu_search"
android:title="搜索"
android:orderInCategory="100"
app:showAsAction="ifRoom"/>
</menu>
添加菜单按钮(跟设置ActionBar的Menu是一样的)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return super.onCreateOptionsMenu(menu);
}
设置菜单的点击事件(同样跟默认的ActionBar方法一样)
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.menu_add:
Toast.makeText(this,"add",Toast.LENGTH_SHORT).show();
break;
case R.id.menu_delete:
Toast.makeText(this,"delete",Toast.LENGTH_SHORT).show();
break;
case R.id.menu_search:
Toast.makeText(this,"search",Toast.LENGTH_SHORT).show();
break;
}
return super.onOptionsItemSelected(item);
}
第二种设定菜单的点击事件:
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.menu_add:
Toast.makeText(MainActivity.this,"add",Toast.LENGTH_SHORT).show();
break;
case R.id.menu_delete:
Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
break;
case R.id.menu_search:
Toast.makeText(MainActivity.this,"search",Toast.LENGTH_SHORT).show();
break;
}return true;
}
});
四、使用ToolBar进行Activity之间的跳转
第一步:调用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示默认的图标,默认的图标为返回键
第二步:设置Activity之间的关系栈(表示Activity是按照这个关系栈,退出的)
(为实现我们需要先创建两个Activity,名叫FirstActivity,SecondActivity)
<!--设置parentActivity属性,设置Activity的父Activity-->
<activity android:name=".FirstActivity"
android:parentActivityName=".MainActivity">
<!--保证向下兼容-->
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity"/>
</activity>
<activity android:name=".SecondActivity"
android:parentActivityName=".FirstActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".FirstActivity"/>
</activity>
效果:
五、在Toolbar上添加ActionView(就是将一个View弄到Toolbar上去)
添加搜索功能到Toolbar
1、在menu/布局下添加SearchView
<pre name="code" class="html"><pre name="code" class="html">xmlns:app="http://schemas.android.com/apk/res-auto"
<item android:id="@+id/menu_search" android:icon="@android:drawable/ic_menu_search" android:title="搜索" app:actionViewClass="android.widget.SearchView" app:showAsAction="ifRoom|collapseActionView"/>
①、必须使用app="http://schemas.android.com/apk/res-auto"
然后通过app来设置actionViewClass和showAsAction否则无效。
②、app:showAsAction="collapseActionView"表示icon与actionViewClass合并。(当点击icon时候出现actionViewClass)
效果:
2、在代码中获取SearchView,并监听View是打开还是关闭着的
第一种方法:(MenuItemCompat是用于向下兼容的,高版本的控件向低版本兼容)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
//获取MenuItem
MenuItem item = menu.findItem(R.id.menu_search);
//获取SearchView
SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
//检查SearchView是否打开OnActionExpandListener监听接口
MenuItemCompat.setOnActionExpandListener(item,new MenuItemCompat.OnActionExpandListener(){
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
return false;
}
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return false;
}
});
return super.onCreateOptionsMenu(menu);
}
第二种方法:(这种比较好理解)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
//获取MenuItem
MenuItem item = menu.findItem(R.id.menu_search);
//获取SearchView
SearchView searchView = (SearchView)item.getActionView();
//设置打开还是关闭
item.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
return false;
}
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return false;
}
});
return super.onCreateOptionsMenu(menu);
}
六、让Overflow中的选项显示图标
原理:MenuBuilder这个类的setOptionalIconsVisible方法来决定的是否允许在Overflow中显示图片,我们只需要当Overflow展开的时候将其设为true就可以了。(利用反射机制)
/**
* Overflow展开的时候调用该方法
*/
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
try {
if (menu != null){
if (menu.getClass().
getSimpleName().equals("MenuBuilder")){
Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
//获取所有的method(包括private default)
method.setAccessible(true);
method.invoke(menu,true);
}
}
}
catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
return super.onMenuOpened(featureId, menu);
}