请选择 进入手机版 | 继续访问电脑版
JAVEN

Android的ActionBar基本使用

所在版块: 课堂笔记 2016-05-14 21:57   [复制链接] 查看: 1038|回复: 4
本帖最后由 yangjw 于 2016-5-14 21:57 编辑

  • 前言
ActionBar就是App的标题所在的那一栏,此篇主要介绍ActionBar的基本使用。虽然现在有Toolbar来替换Actionbar,但是在某些情况下直接使用ActionBar要更简单一些。

  • ActionBar简介
ActionBar可以被分为4个区域,如下图:
20130502103745486.png
说明:
1、Up Button:应用图标区域。
2、视图控制区域(View Control)
3、Action Button
4、Action Overflow。
接下来,我们分别介绍怎么显示和使用这4块区域。

  • 开始使用
如果要更好的使用ActionBar。创建Activity的使用必须继承AppCompatActivity类,主题(Theme)使用Theme.appcompat.light.*的主题。原因,在AppCompatActivity中有如下描述:
Base class for activities that use the
* <a href="{@docRoot}tools/extras/support-library.html">support library</a> action bar features.
*
* <p>You can add an {@link android.support.v7.app.ActionBar} to your activity when running on API level 7 or higher
* by extending this class for your activity and setting the activity theme to
* {@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} or a similar theme.

也就是说,为了更好的使用V7包下的ActionBar,需要继承AppCompatActivity类。并且主题(Theme)设置成Theme.AppCompat下的子类。
示例如下:
activity:
  1. public class BaseActivity extends AppCompatActivity {...}
复制代码
theme:
  1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
复制代码
  • Up Button的基本使用
  1. //获得actionBar,使用getSupportActionBar获出错得,是为了向下兼容
  2. supportActionBar = getSupportActionBar();
  3. //显示Up Button。也就是一个向左的箭头
  4. supportActionBar.setDisplayHomeAsUpEnabled(true);
  5. //显示Logo
  6. supportActionBar.setDisplayShowHomeEnabled(true);//设置是否显示Logo
  7. supportActionBar.setDisplayUseLogoEnabled(true);//设置logo图标
  8. supportActionBar.setLogo(R.drawable.logo);
复制代码
以上的语句很简单,都写有注释,只要复制粘贴就可以完成。完成之后的示例图如下:
large.png


  • 视图控制区(View Control)
视图控制区有2中样式:
1、Tab类型,示例图如下:
QQ截图20160514203005.png
示例代码:
  1. //设置模式,Tab模式
  2.         supportActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  3.         //添加Tab按钮
  4.         //创建Tab对象
  5.         ActionBar.Tab tab1 = supportActionBar.newTab()
  6.                 .setText("TITLE1") //设置标题
  7.                 .setIcon(R.drawable.checkout_idcard_fail) //设置图标
  8.                 .setTabListener(this);//点击监听事件
  9.         ActionBar.Tab tab2 = supportActionBar.newTab()
  10.                 .setText("TITLE2")
  11.                 .setIcon(R.drawable.checkout_idcard_success)
  12.                 .setTabListener(this);
  13.         ActionBar.Tab tab3 = ...
  14.         ActionBar.Tab tab4 = ...
  15.         ActionBar.Tab tab5 = ...
  16.         ActionBar.Tab tab6 = ...
  17.         //将Tab添加到ActionBar中
  18.         supportActionBar.addTab(tab1);
  19.         supportActionBar.addTab(tab2);
  20.         supportActionBar.addTab(tab3);
  21.         supportActionBar.addTab(tab4);
  22.         supportActionBar.addTab(tab5);
  23.         supportActionBar.addTab(tab6);
复制代码

2、下拉列表样式,示例图如下:
QQ截图20160514211351.png

点击三角图标,显示如下:
QQ截图20160514211403.png
示例代码如下:
  1. String[] array = {"电脑耗材","服装衣帽","电子产品"};
  2.         supportActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
  3.         ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,array);
  4.         supportActionBar.setListNavigationCallbacks(arrayAdapter, new ActionBar.OnNavigationListener() {
  5.             @Override
  6.             public boolean onNavigationItemSelected(int itemPosition, long itemId) {
  7.                 //点击事件
  8.                 return true;
  9.             }
  10.         });
复制代码

  • Action Overflow
    就是在标题栏最右边显示的3个点的按钮。要显示这个按钮,需要创建一个选项菜单。创建一个选项菜单的步骤:
1、创建一个菜单资源文件menu/action_bar_menu.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 android:id="@+id/home_menu_one" android:title="详情"
  5.         android:icon="@drawable/checkout_idcard_success"/>
  6.     <item android:id="@+id/home_menu_two" android:title="删除"
  7.         android:icon="@drawable/checkout_idcard_success"
  8.         app:actionViewClass="android.widget.SearchView"/>
  9.     <item android:id="@+id/home_menu_three" android:title="首页"
  10.         android:icon="@drawable/checkout_idcard_success"/>
  11. </menu>
复制代码
2、在activity中重写onCreateOptionsMenu方法和onOptionsItemSelected方法。
以下是用来创建菜单的onCreateOptionsMenu方法代码:
  1. //创建一个选项菜单
  2.     @Override
  3.     public boolean onCreateOptionsMenu(Menu menu) {
  4.         //动态获取菜单资源
  5.         MenuInflater menuInflater = getMenuInflater();
  6.         //将home_menu资源加载到Menu对象中
  7.         menuInflater.inflate(R.menu.home_menu,menu);
  8. return true;
  9.     }
复制代码
然后,在onOptionsItemSelected方法中监听菜单点击事件:
  1. @Override
  2.     public boolean onOptionsItemSelected(MenuItem item) {
  3.         switch (item.getItemId()) {
  4.             case R.id.home_menu_one:
  5.                 break;
  6.             case R.id.home_menu_two:
  7.                 break;
  8.             case R.id.home_menu_three:
  9.                 break;
  10.         }
  11.         return true;
  12.     }
复制代码
效果示例图:
QQ截图20160514212335.png



  • Action Button
要显示Action Button区域其实很简单,只需要在menu/action_bar_menu.xml文件的<item>标签中加一个属性:
app:showAsAction="ifRoom"
此属性是设置菜单是否以图标的形式显示出来,比如:
  1. <item android:id="@+id/home_menu_three" android:title="首页"
  2.         android:icon="@drawable/checkout_idcard_success"
  3.         app:showAsAction="ifRoom"/>
复制代码
showAsAction的取值有以下几个:
1、ifRoom:当空间足够的时候,显示图标;空间不够的时候,收纳到“3个点”菜单按钮中。
2、always:不管空间是否够显示,都以图标的形式显示
3、never:永远都不以图标的形式显示在actionBar上。
4、withText:图标+标题的形式显示
5、collapseActionView:可以收缩的ActionView的时候,设置此属性。一般在使用SearchView的时候,可以设置此属性,其它情况不适用。

  • 显示一个搜索按钮SearchView:
如下图所示:
QQ截图20160514214022.png
点击搜索按钮之后,出现如下图:
QQ截图20160514214106.png
搜索的执行时通过点击键盘上的搜索按钮触发。
示例代码如下:
1、menu/action_bar_menu.xml
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto">
  3.     <item android:id="@+id/home_menu_two" android:title="删除"
  4.         android:icon="@drawable/checkout_idcard_success"
  5.         app:actionViewClass="android.widget.SearchView"
  6.         app:showAsAction="always"/>
  7. </menu>
复制代码
注意第5行,actionViewClass指向的是SearchView组件。
2、在activity的onCreateOptionsMenu方法中,初始化SearchView组件,并且设置监听:
  1. @Override
  2.     public boolean onCreateOptionsMenu(Menu menu) {
  3.         //动态获取菜单资源
  4.         MenuInflater menuInflater = getMenuInflater();
  5.         //将home_menu资源加载到Menu对象中
  6.         menuInflater.inflate(R.menu.home_menu,menu);
  7.         //findItem通过Id查询到指定的Item对象,getActionView()方法获取actionViewClass所指向的视图
  8.         SearchView searchView = (SearchView) menu.findItem(R.id.home_menu_two).getActionView();
  9.         //设置SearchView的查询监听方法
  10.         searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
  11.             /**
  12.              * 当点击查询按钮的时候执行此方法
  13.              * @param query
  14.              * @return
  15.              */
  16.             @Override
  17.             public boolean onQueryTextSubmit(String query) {
  18.                 Log.d("androidxx","===" + query);
  19.                 return true;
  20.             }

  21.             /**
  22.              * 当输入框中的文本发生变化的时候,执行此方法
  23.              * @param newText
  24.              * @return
  25.              */
  26.             @Override
  27.             public boolean onQueryTextChange(String newText) {
  28.                 Log.d("androidxx",">>>>" + newText);
  29.                 return true;
  30.             }
  31.         });
  32.         return true;
  33.     }
复制代码
  • 自定义ActionBar
自定义的代码如下:
  1. //设置自定义的布局文件
  2.         LayoutInflater layoutInflater = getLayoutInflater();
  3.         View view = layoutInflater.inflate(R.layout.custom_action_layout, null);
  4.         //设置允许自定义视图
  5.         supportActionBar.setDisplayShowCustomEnabled(true);
  6.         ActionBar.LayoutParams layoutParams
  7.                 = new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
  8.         //参数一:自定义的View对象
  9.         //参数二:LayoutParam对象
  10.         supportActionBar.setCustomView(view,layoutParams);
复制代码

以上就是ActionBar的基本用法,能完成一些简单的样式和功能。其实,在android API 21之后,新增了ToolBar用来替换ActionBar。Toolbar更灵活了,使用方便。但是在目前的很多应用中还是使用的ActionBar,actionbar在实现简单的功能的时候,还是很方便的。

回复

使用道具 举报

smlqf7

该用户从未签到

发表于 2018-7-31 18:21:33 | 显示全部楼层
回复 支持 反对

使用道具 举报

smlqf7

该用户从未签到

发表于 2018-10-11 03:00:30 | 显示全部楼层
说的不错!











成語   https://www.2so.tw/   2018年10月11日 排行
中醫感冒    文學百科 https://www.2so.tw/  髮型百科         https://www.2so.tw/  祝福語
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我的博客

QQ|Archiver|手机版|小黑屋|课堂笔记  

GMT+8, 2018-12-12 10:54 , Processed in 0.084949 second(s), 33 queries .

快速回复 返回列表