Android 自定义title 之Action Bar

Action Bar是在窗口上指示用户位置的组件,同时给用户提供导航和操作。使用Action Bar可以让你的应用在不同配置的屏幕上看起来比较一致。在开始之前,先了解一些相关的术语:

Action Bar有以下几项关键功能:

1)为你的App提供一个装饰处,同时也可以让用户知道自己的所在位置;

2)让一些重要的操作以一种可预见的方式变得突出并且可访问(比如搜索);

3)支持风格一致的导航和视图切换手段;

ActionBar的API首先在Android3.0(API 11)中被加入,但是可以使用Support Library使得API 2.1以及以上支持。

这篇文章专注于指引开发者如何使用support library的action bar,但是在Android3.0以及以上的版本中,开发者应该使用框架中的ActionBar。绝大部分的API是一样的,只有导入的package名字不一样。

如果你打算支持比API Level 11低的版本,则导入android.support.v7.app.ActionBar,否则应该导入android.app.ActionBar。

 

Adding the Action Bar

注意,这里讲述的是如何使用Support Library中的Action Bar。

1)创建Activity,继承ActionBarActivity;

2)为Activity设置一个主题;

这样,你的Activity就已经有了一个action bar了。

备注:在使用Theme.Holo主题的activity中action bar是默认被包含的,而Theme.Holo主题是当targetSdkVersion或者minSdkVersion属性≥11的时候的默认主题。如果你不想要Activity的action bar,就设置Activity的主题为Theme.Holo.NoActionBar.设置Activity主题的方式如下:

1 <activity android:theme="@style/Theme.AppCompat.Light" ... >

 

Removing the action bar

你可以使用如下代码在运行时隐藏ActionBar:

1 ActionBar actionBar = getSupportActionBar();//在API 11或者更高的API上,使用getActionBar方法
2 actionBar.hide();

当你隐藏了action bar,系统就会调节你的布局到可用的屏幕的空间,开发者可以调用show()方法让action bar出现。

在隐藏和显示action bar的过程中,由于屏幕空间的变化,会导致界面中心布局。如果你的activity经常显示/隐藏action bar,你或许会期望使用叠加模式,叠加模式在activity布局的上层绘制action bar,将其上面的一部分变的模糊起来。这种情况下,action bar的隐藏和出现不会导致布局变化,为了开起叠加模式,需要为你的activity自定义主题,并且将windowActionBarOverlay设置为true。

 

Using a logo instead of an icon

缺省状况下,系统会在ActionBar上使用用你的应用图标,这个图标是在你的<application>或者<activity>属性中指定的,但是如果你写明了<logo>属性,系统就会使用logo属性指定的图片。

 

Adding Action Items

action bar提供了应用当前环境下的重要操作。这些操作排列在action bar上,或者是文字,或者是图片,称作action button。排列不下去或者不够重要的action或被隐藏在actiono verflow中。用户点击action overflow的时候隐藏的操作就会显示出来。

当你的Activity启动的时候,系统会通过onCreateOptionsMemu()方法初始化你的action items。通过使用这个方法可以Inflate一个menu res文件。文件定义了所有的action items。例如:文件位置:res/menu/main_activity_actions.xml

复制代码
1 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
2     <item android:id="@+id/action_search"
3           android:icon="@drawable/ic_action_search"
4           android:title="@string/action_search"/>
5     <item android:id="@+id/action_compose"
6           android:icon="@drawable/ic_action_compose"
7           android:title="@string/action_compose" />
8 </menu>
复制代码

然后你可以在onCreateOptionMenu()中进行如下操作:

复制代码
1 @Override
2 public boolean onCreateOptionsMenu(Menu menu) {
3     // Inflate the menu items for use in the action bar
4     MenuInflater inflater = getMenuInflater();
5     inflater.inflate(R.menu.main_activity_actions, menu);
6     return super.onCreateOptionsMenu(menu);
7 }
复制代码

为了声明一个item apperar作为一个acion button直接显示在action bar中,我们需要添加属性showAsAction="ifRoom",如下:

复制代码
1 <menu xmlns:android="http://schemas.android.com/apk/res/android"
2       xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
3     <item android:id="@+id/action_search"
4           android:icon="@drawable/ic_action_search"
5           android:title="@string/action_search"
6           yourapp:showAsAction="ifRoom"  />
7     ...
8 </menu>
复制代码

这个时候,当空间不够的时候,action item就会显示在action overflow中。

备注:showAsAction属性使用的是自定义的名称空间,当你使用support library定义的任何XML属性的时候这是必须的,因为这些属性不存在于老的Android框架API。所以你必须使用自己定义的名称空间来=作为support library所需属性的前缀。

如果你的menu既提供了title又提供了icon属性,那么默认显示icon,如果你想要显示文字title,就添加"withText"属性,如下:

1 <item yourapp:showAsAction="ifRoom|withText" ... />

备注:“withText”属性是给action bar的一个暗示,告诉它应该显示文字title,如果可以的话,就显示,但是当icon是可用的并且action bar的空间受到限制的时候,就不一定会显示了。

你应该为每一个item声明title属性,即使你不声明title要显示,因为:

1)如果没有足够的空间显示所有的action item,那显示在overflow中的Item就只会显示title;

2)视觉受损者会读取title;

3)如果action item只显示icon,那么当用户长按item的时候,会显示一个小的提示窗口显示action的title;

icon是可选的,但是推荐使用。

开发者可以使用"always"声明一个Item永远作为action button显示,但是开发者不应该用它迫使item用这种方式显示,在空间狭小的设备上,这会引起布局问题。最好的是使用"ifRoom"。这使得系统可以根据空间做出调整。只有当Item非常重要,关系到关键特征的时候,才可以使用"always"。

 

Handling clicks on action items

当用户按下一个action的时候,系统就会调用activity的onOptionsItemSelected()方法,传递进去MenuItem参数,然后可以使用如下代码进行相应的处理:

复制代码
 1 @Override
 2 public boolean onOptionsItemSelected(MenuItem item) {
 3     // Handle presses on the action bar items
 4     switch (item.getItemId()) {
 5         case R.id.action_search:
 6             openSearch();
 7             return true;
 8         case R.id.action_compose:
 9             composeMessage();
10             return true;
11         default:
12             return super.onOptionsItemSelected(item);
13     }
14 }
复制代码

备注:最后之所以返回super.onOptionsItemSelected(item);是因为当action bar是由Fragment创建的时候,按下action bar上的action item就会先调用activity的onOptionsItemSelected(),再去调用Fragment的onOptionsItemSelected()方法,为了让任何一个fragment的onOptionsItemSelected()始终有机会处理该事件,如果方法不处理该事件,就返回默认行为,而不要返回false;

 

Using split action bar

当屏幕空间狭窄的时候,Split action bar在屏幕底部也提供了一条bar来展示action items。这样分开action bar有助于利用空间安排合理数量的action item。

为了使用split action bar,我们必须做两件事情:

1)给每个<activity>或者<application>元素添加属性uiOptions="splitActionBarWhenNarrow" ,这个属性只在API Level 14或者更高的API level,旧Level会忽略该属性;

2)为了支持老版本,需要为每一个<activity>元素添加一个<meta-data>元素,声明和“android.support.UI_OPTIONS”相同的值;

例子如下:

1 <manifest ...>
2     <activity uiOptions="splitActionBarWhenNarrow" ... >
3         <meta-data android:name="android.support.UI_OPTIONS"
4                    android:value="splitActionBarWhenNarrow" />
5     </activity>
6 </manifest>

使用split action bar也允许在移除icon和title之后,导航Tabs变成主action bar。为了达到这个效果,必须使用方法setDisplayShowHomeEnabled(false)和 setDisplayShowTitleEnabled(false)action bar icon和title失效。

 

Navigating Up with the App Icon

让app icon在界面的继承关系之间起导航作用。

备注:这个和系统自带的返回键是不一样的,返回键是为了让用户反向浏览历史打开界面的,它依赖于暂时的界面关系,而不是界面的继承结构。

为了使app icon起到Up button的作用,需要调用setDisplayHomeAsUpEnabled()方法:

复制代码
1 @Override
2 protected void onCreate(Bundle savedInstanceState) {
3     super.onCreate(savedInstanceState);
4     setContentView(R.layout.activity_details);
5 
6     ActionBar actionBar = getSupportActionBar();
7     actionBar.setDisplayHomeAsUpEnabled(true);
8     ...
9 }
复制代码

现在icon就开始显示一个Up补字号,然而此时它不会做任何事情,为了让它按下的时候出发特定的操作,有以下两种选择:

1)在manifest文件中声明父Activity。

当父Activity总是一样的时候,这是最佳的选择,在manifest文件中声明父Activity,action bar在用户按下Up button的时候就会自动触发正确操作。从API 4.1(API Level 16)开始,开发者可以在<activity>中使用parentActivityName属性进行声明,为了支持使用support library的老设备,需要一个<meta-data>元素来明确,如下:

复制代码
 1 <application ... >
 2     ...
 3     <!-- The main/home activity (has no parent activity) -->
 4     <activity
 5         android:name="com.example.myfirstapp.MainActivity" ...>
 6         ...
 7     </activity>
 8     <!-- A child of the main activity -->
 9     <activity
10         android:name="com.example.myfirstapp.DisplayMessageActivity"
11         android:label="@string/title_activity_display_message"
12         android:parentActivityName="com.example.myfirstapp.MainActivity" >
13         <!-- Parent activity meta-data to support API level 7+ -->
14         <meta-data
15             android:name="android.support.PARENT_ACTIVITY"
16             android:value="com.example.myfirstapp.MainActivity" />
17     </activity>
18 </application>
复制代码

一旦父Activity在manifest文件被明确,导航就被正确建立起来了。

2)或者,你可以在Activity中覆写方法getSupportParentActivityIntent()和onCreateSupportNavigateUpTaskStack()。

当用户以不同的方式达到该界面的时候,可能该界面的父Activity就不确定了。这个时候用户需要按照来时的路径进行回退导航。(虽然前面说和回退键不一样,但是这里明显看出,其实是一样的)。

两个方法都是在系统在用户需要导航,按下Up button的时候被调用,不同的是,前者是在同一个Task中的时候,这个时候你就需要返回响应的intent以便于打开合适的父Activity;后者是这个task不属于本应用,也就是说是外部的应用打开了你的这个界面,这个时候你就需要使用传进来的TasjStackBuilder构建适合的back stack来供Up button使用。

即使你为你的Activity覆写了getSupportParentActivityIntent(),你也可以在manifest文件中声明缺省的父activity,这些缺省的实现就会在缺省的onCreateSupportNavigateUpTaskStack()方法中合成一个回退stack。

备注:如果你使用一系列的fragment而不是activity构建你的app界面树,上面的做法就没有一样会有效。为了导航fragments,需要重写onSupportNavigateUp()方法来触发正确的fragment事务——一般来说,就是将当前的fragment从栈中弹出来,也就是调用popBackStack()

 

Adding an Action View

action view是当你按下一个action button的时候出现的action button的替代视图。action view在不改变activity或者fragment和不替换action bar的情况下提供了对富action的快速访问。示例图如下:

开发者可以使用actionLayout或者actionViewClass属性来明确一个layout或者widegt类来声明一个action view,例如,为了增加一个SearchView widget:

复制代码
1 <?xml version="1.0" encoding="utf-8"?>
2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
3       xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
4     <item android:id="@+id/action_search"
5           android:title="@string/action_search"
6           android:icon="@drawable/ic_action_search"
7           yourapp:showAsAction="ifRoom|collapseActionView"
8           yourapp:actionViewClass="android.support.v7.widget.SearchView" />
9 </menu>
复制代码

注意到showAsAction属性也包括"collapseActionView"值,这是可选的,后面会详细解释。

如果你需要配置action view(例如需要监听事件),你可以在onCreateOptionsMenu()回调中实现。你可以通过调用静态方法MenuItemCompat.getActionView()获得action view对象,然后将它传送给响应的MenuItem,举个例子:

复制代码
1 @Override
2 public boolean onCreateOptionsMenu(Menu menu) {
3     getMenuInflater().inflate(R.menu.main_activity_actions, menu);
4     MenuItem searchItem = menu.findItem(R.id.action_search);
5     SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
6     // Configure the search info and add any event listeners
7     ...
8     return super.onCreateOptionsMenu(menu);
9 }
复制代码

 

 Handling collapsible action views

为了节省action bar的空间,你可以将action view压缩成一个action button。坍缩的时候,系统或许会把action放入action overflow,但是当用户点击它的时候,它还是会出现在action bar上面。开发者可以通过在showAsAction属性中添加值"collapseActionView"让action view可坍缩,就像上面代码所展示的。

因为当用户选择action的时候系统展开了action view,你就不需要响应其onOptionItemSelected()回调,系统仍会调用这个方法,但是当你返回true(表示你已经处理了这个问题),action view就不会展开了。

系统在你按下回退键或者Up按钮的时候也会坍缩你的action view。

如果你需要根据action view的可见性改变activity的界面,你可以设置一个OnActionExpandListener来监听,例子如下:

复制代码
 1 @Override
 2 public boolean onCreateOptionsMenu(Menu menu) {
 3     getMenuInflater().inflate(R.menu.options, menu);
 4     MenuItem menuItem = menu.findItem(R.id.actionItem);
 5     ...
 6 
 7     // When using the support library, the setOnActionExpandListener() method is
 8     // static and accepts the MenuItem object as an argument
 9     MenuItemCompat.setOnActionExpandListener(menuItem, new OnActionExpandListener() {
10         @Override
11         public boolean onMenuItemActionCollapse(MenuItem item) {
12             // Do something when collapsed
13             return true;  // Return true to collapse action view
14         }
15 
16         @Override
17         public boolean onMenuItemActionExpand(MenuItem item) {
18             // Do something when expanded
19             return true;  // Return true to expand action view
20         }
21     });
22 }
复制代码

 

 Adding an Action Provider

和action view相类似,action provider也是提供一个替代action button的自定义视图。然而不同于action view,action provider控制所有的action行为,并且可以在点击的时候产生一个子menu,示例图如下:

为了声明一个action provider,你可以在menu<item>标签里面为actionViewClass提供一个完整的ActionProvider的名字。

开发者可以通过继承ActionProvider类来实现自己的action provider,但是Android提供了一些内建的providers比如ShareActionProvider,它可以提供一个可以分享内容的可能的app的列表。

因为ActionProvider类定义自己的action行为,你不需要通过onOptionItemSelected()方法区监听动作。然而如果有必要,你还是可以在其中监听click事件,但是一定要返回false以便于action provider能够收到onPerformDefaultAction()回调来执行实际需要执行的任务。

然而,如果action provider提供了一个action的子menu,那么你的activity在用户打开列表或者选择列表的时候就不会调用onOptionItemSelected()。

 

Using the ShareActionProvider

为了使用ShareActionProvider添加一个share action,可以在<item>标签中用ShareActionProvider定义actionProviderClass的值,如下:

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
 3       xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
 4     <item android:id="@+id/action_share"
 5           android:title="@string/share"
 6           yourapp:showAsAction="ifRoom"
 7           yourapp:actionProviderClass="android.support.v7.widget.ShareActionProvider"
 8           />
 9     ...
10 </menu>
复制代码

现在action provider就控制了action item,处理它的显示隐藏以及行为。但是你还是得提供一个title给这个action item以便于它在action overflow中显示。

生下来的唯一要做的事情就是定义你要用来分享的intent。为了这样做,编辑的onCreateOptionMenu()方法,调用方法MenuItemCompat.getActionProvider(),具体如下:

复制代码
 1 private ShareActionProvider mShareActionProvider;
 2 
 3 @Override
 4 public boolean onCreateOptionsMenu(Menu menu) {
 5     getMenuInflater().inflate(R.menu.main_activity_actions, menu);
 6 
 7     // Set up ShareActionProvider's default share intent
 8     MenuItem shareItem = menu.findItem(R.id.action_share);
 9     mShareActionProvider = (ShareActionProvider)
10             MenuItemCompat.getActionProvider(shareItem);
11     mShareActionProvider.setShareIntent(getDefaultIntent());
12 
13     return super.onCreateOptionsMenu(menu);
14 }
15 
16 /** Defines a default (dummy) share intent to initialize the action provider.
17   * However, as soon as the actual content to be used in the intent
18   * is known or changes, you must update the share intent by again calling
19   * mShareActionProvider.setShareIntent()
20   */
21 private Intent getDefaultIntent() {
22     Intent intent = new Intent(Intent.ACTION_SEND);
23     intent.setType("image/*");
24     return intent;
25 }
复制代码

你需要在这个方法里面设置一个默认的intent,但是一旦上下文环境改变,你就需要通过再次调用setShareIntent()方法更新intent。

缺省的,ShareActionProvider会维持一个可以分享内容的列表,根据用户点击分享的次数排序,缺省状态下排序信息是被保存在一个叫做DEFAULT_SHARE_FILE_NAME的私有文件中的,如果你使用的是ShareActionProvider或者它的继承子类,你就可以使用默认文件,什么都不做,但是假如你使用ShareActionProvider来实现多种动作,俺么就需要自己设置历史文件,方法是setShareHistoryFileName(),设置一个xml文件的名字。

 

Creating a custom action provider

创建自定义的action provider允许你在一个独立的模块中复用和管理动态的行为,而不是在你的fragment或者activity中。就像之前提到的,Android已经为分享行为提供了一个ActionProvider:ShareActionProvider。

为了创建自己的action provider,只需要继承ActionProvider类,然后合适的实现一些回调方法即可。最重要的是以下几个方法:

1)ActionProvider()

这个构造方法将APP的Context进来,你需要在这里保存这个变量以便于在其余的回调函数中使用;

2)CreateActionView(MenuItem)

这里是你定义action view的地方,使用从构造方法中获得的Context实例化一个LayoutInflater,然后从一个xml资源文件中获得action view布局,然后添加监听器,例子如下:

复制代码
 1 public View onCreateActionView(MenuItem forItem) {
 2     // Inflate the action view to be shown on the action bar.
 3     LayoutInflater layoutInflater = LayoutInflater.from(mContext);
 4     View view = layoutInflater.inflate(R.layout.action_provider, null);
 5     ImageButton button = (ImageButton) view.findViewById(R.id.button);
 6     button.setOnClickListener(new View.OnClickListener() {
 7         @Override
 8         public void onClick(View v) {
 9             // Do something...
10         }
11     });
12     return view;
13 }
复制代码

3)onPerformDefaultAction()

当menu item是在action overflow中被点击的时候,action provider就会执行一个默认的行为。

然而,如果action provider提供了一个子menu,在调用了onPrepareSubMenu()方法之后,子menu就会显示,即使这个时候action provider处于action overflow中,这个时候onPerformDefaultAction()。

备注:实现了onOptionsItemSelected()方法的activity和fragment是可以通过return true来屏蔽该事件的,这个时候系统就不会调用onPerformDefaultAction()方法了。

 

Adding Navigation Tabs

action bar上的Tabs让用户更容易发现和切换应用界面。action bar提供的tabs可以适应不同的屏幕尺寸,因而非常理想。系统会根据屏幕的尺寸做出最合适的布局。

我们需要提供一个可以放置Fragment的ViewGroup。确保ViewGroup有一个资源ID以便于你可以在代码中引用和切换tabs的时候容纳对应的fragment。如果你的tab填充了整个屏幕,那你的activity就不需要布局文件了。

一旦你决定好了怎么在布局中显示你的fragments,那么基本的添加tab的流程就是:

1)实现ActionBar.TabListener接口。这个接口为tab事件提供了回调接口,比如当用户按下某个tab的时候你得切换过去;

2)对于每一个你要添加的tab,初始化一个ActionBar.Tab然后为它添加ActionBar.Listener,然后要设置tab的title(也可以设置它的icon);

3)然后调用方法addTab()往action bar上面添加tab;

注意到ActionBar.TabListener回调函数并没有写明到底是哪一个fragment被关联到tab,我们需要自己定义它们之间的联系,也就是说,当用户点击一个tab的时候,到底是显示哪一个tab。下面是一个实例化TabListener的例子:

 View Code

注意:开发者不可以为fragment事务主动调用commit()事件,否则会抛出异常,因为系统会帮你调用,你也不能将这样的fragment事务压进栈中。

在这个例子中,当用户选择到这个Tab的时候,就先检测Fragment是不是Null,是的话就去实例化,添加进ft,否则直接attach,取消选择的时候则直接调用detach。

现在要做的就是创建一个ActionBar.Tab,并且把监听器加上去。另外,你必须调用方法setNavigationMode(NAVIGATION_MODE_TABS)来使得tabs可见。

举例如下,下面的代码使用上面的listener添加了两个tabs:

 View Code

如果你的activity停止了,你需要在saved instance state中保存当前选中的tab,以便于重新打开的时候可以跳到正确的tab上去,你可以使用方法getSelectedNavigationIndex()方法获得当前选中的tab的index来进行保存。

注意:保存Fragment的状态是非常重要的,这样当用户切换tab之后又回来,就可以恢复到离开之前的样子,有些状态是默认保存的,但是你或许会需要手动保存一些自定的view。

备注:上面实现ActionBar.TabListener是可能的技术之一。另外一个流行的方法是使用ViewPager,这样用户就可以通过滑动手势切换tab。

 

Adding Drop-down Navigation

作为activity的一种导航模式,action bar提供了一个内建的下拉列表,举个例子,下拉列表可以提供阅览内容的不同排序依据。

当改变阅览内容是重要的但是不经常发生的动作的时候,使用下拉列表是非常有用的。如果非常频繁,这个时候就应该使用导航tab。

使用下拉列表的基本步骤是:

1)创建一个SpinnerAdapter来为下拉列表提供可选择的item;

2)实现ActionBar.OnNavigationListener来定义当用户点击下拉列表框的item的时候的行为;

3)在activity的onCreate()方法中,使用setNavigationMode(NAVIGATION_MODE_LIST)来激活action bar的下拉列表;

4)为下拉列表设置参数,方法如下:

1 actionBar.setListNavigationCallbacks(mSpinnerAdapter, mNavigationCallback);

这个方法使用你的SpinnerAdapter和你的OnNavigationListener;

这个流程相对而言是简单的,主要的工作在于实现SpinnerAdapter和ActionBar.OnNavigationListener。

 

Styling the Action Bar

 如果你想实现一个具有产品特色的视觉设计,action bar是允许你定制显示细节的,包括action bar的颜色,字体颜色,按钮风格等等,这就需要你运用Android的style和theme框架来重新设计action bar的特定风格属性。

注意:请确定你所提供的任何背景图片都是.9图以便于拉伸,.9图需要≤40dp高,30dp宽

例子如下:

 View Code

然后你可以在你的manifest文件中,将这些主题应用于整个app,方式如下:

1 <application android:theme="@style/CustomActionBarTheme" ... />

或者应用于单个的activity:

1 <activity android:theme="@style/CustomActionBarTheme" ... />

注意:任何一个theme和style都要在<style>标签中声明一个父theme,这样就可以获得一些你没有设置的参数的默认值。

 

PS:真是一篇超级冗长的Document,可以实践的实在太多了,我打算亲自试试~~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值