ActionBar从Android 3.0开始出现,主要是用于代替传统的标题栏,提供更加丰富的导航效果。
一、ActionBar的添加和隐藏
在Android 3.0及更高的版本中,ActionBar已经默认包含在Activity中,以下代码用于获取ActionBar及控制ActionBar的显示和隐藏:
// 获取actionbar实例ActionBar actionBar = getActionBar(); // 通过hilde()和show()方法可以控制actionbar的隐藏和显示 actionBar.hide();actionBar.show();
也可以在清单文件中使用下列代码隐藏
或者
本文的代码基于android19的工程,截图取自模拟器
当我们新建一个工程时,ActionBar默认的样式如下:
为方便分析,本文将ActionBar分为三个部分来讲解,分别是:
ActionBar最左侧的图标区域、ActionBar最右侧的 overflow按钮 、ActionBar中部的导航区域
可以在清单文件中的application节点下使用如下代码设置ActionBar三个部分进行分栏显示:
可以在清单文件中的Activity节点下使用如下代码设置ActionBar的主题:
或者
二、ActionBar最左侧的图标区域
在本文中,我们定义ActionBar左侧的图标区域包含下列类容:
1、图片左边的返回图标
2、图片
3、图片右边的title
可以使用如下代码设置ActionBar图标区域上三个部分的显示和隐藏:
actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_HOME);
也可以使用下边几个方法去单独设置:
actionBar.setDisplayHomeAsUpEnabled(false); // 用于设置ActionBar最左边返回图标的显示和隐藏actionBar.setDisplayShowHomeEnabled(false); // 用于设置ActionBar左边图标的显示和隐藏actionBar.setDisplayShowTitleEnabled(false); // 用于设置ActionBar图标右边的title的显示和隐藏//... ... //用于设置ActionBar右边的三个小点的显示和隐藏 (暂放)
可以在清单文件中Activity节点内改变ActionBar的图标
如果想要ActionBar上图标区域左侧返回图标能够响应点击,则需要先调用
actionBar.setDisplayHomeAsUpEnabled(true); // 设置ActionBar最左边返回图标的显示
之后,在点击图标时,Activity的onOptionsItemSelected(MenuItem item)方法将被触发,并且,此时接收的参数item的ID为android.R.id.home,示例:
public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { Toast.makeText(this, "cao,点我干嘛?", Toast.LENGTH_SHORT).show(); return false; } return super.onOptionsItemSelected(item);}
三、ActionBar最右侧的 overflow按钮
右边的三个点图标,相当于手机上的menu键,点击可以显示隐藏的optionMenu,关于optionMenu的使用,参考 一文。在ActionBar中,我们可以通过 MenuItem的setShowAsAction()方法设置每一个选项菜单的显示状态,如:
public boolean onCreateOptionsMenu(Menu menu) { // 和添加选项菜单一样 MenuItem menuItem1 = menu.add(1, 1, 1, "菜单1").setOnMenuItemClickListener(this); // 可选参数一共有5个,SHOW_AS_ACTION_ALWAYS表示总是将对应的MenuItem以Button的形式显示在ActionBar上, // SHOW_AS_ACTION_NEVER代表从不显示,SHOW_AS_ACTION_IF_ROOM表示如果有空间的话就显示, // SHOW_AS_ACTION_WITH_TEXT 表示当这个item在ActionBar上时,仅仅只显示它的文本 // SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW 待验证 ... ... menuItem1.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS); MenuItem menuItem2 = menu.add(1, 2, 2, "菜单2").setOnMenuItemClickListener(this); menuItem2.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS); // 菜单3在点击三个点的图标时才出现 MenuItem menuItem3 = menu.add(1, 3, 3, "菜单3").setOnMenuItemClickListener(this); menuItem3.setShowAsAction(MenuItem.SHOW_AS_ACTION_NEVER);
对应的效果如图一,如果只有两个菜单,并且都设置为SHOW_AS_ACTION_ALWAYS,则显示效果如图二:
同样,我们也可以在xml文件中定义,然后用下列代码添加ActionBar上的选项菜单:
getMenuInflater().inflate(R.menu.main, menu);
ActionBar上的选项菜单的点击事件同样参考一文。
四、ActionBar中部的导航区域
中部的导航区域,可以使用如下方式设置:
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
可选的参数有: NAVIGATION_MODE_STANDARD、 NAVIGATION_MODE_TABS、NAVIGATION_MODE_LIST, 重点看后两种
1、 NAVIGATION_MODE_TABS
使用方法为:
// 首先设置actionBar的导航模式为tab模式actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);// 然后为actionBar添加tab,需要注意的是,被添加的tab需要先设置监听器actionBar.addTab(actionBar.newTab().setText("Tab1").setTabListener(myTabListener));actionBar.addTab(actionBar.newTab().setText("Tab2").setTabListener(myTabListener));// myTabListener实现TabListener接口,复写onTabSelected()等方法,可以在这些方法里处理tab的点击事件
效果见图三,也可利用上文提到的方法将ActionBar的部分内容隐藏,效果见图四
2、NAVIGATION_MODE_LIST
使用方法为:
// 首先设置actionBar的导航模式actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);// 然后为actionBar添加tab,需要注意的是,被添加的tab需要先设置监听器actionBar.addTab(actionBar.newTab().setText("Tab1").setTabListener(myTabListener));actionBar.addTab(actionBar.newTab().setText("Tab2").setTabListener(myTabListener));// myTabListener实现TabListener接口,复写onTabSelected()等方法,可以在这些方法里处理tab的点击事件