Android ActionBar与Menu - 2 - email中ActionBar分析

 

这里以Email为例，简单分析一下ActionBar在实际中的应用

上面是在模拟器上登录原生Email的截图

 

这里说一下所谓的原生：

原生不是指大家买来手机之后没有修改过任何内容，软件本身的样子。也不是指google的各种亲儿子本身的样子，因为无论是前者还是后者，最起码都是要经过优化和修复bug的，不是亲儿子那就很有可能进行了整容，让你看不出原来的样子

这里的原生是用google发布的源码编译出来的apk，安装到手机或模拟器上面大家就可以看到

 

我们主要看看Email如何使用ActionBar和menu的

页面可以发现，Email既有AcionBar又有menu，menu被放在了底部，先看ActionBar

Email的主Activity是EmailActivity，我就不画类图了，因为总是画不明白，怕误导大家，所以就用类似堆栈log的形式来介绍

Java代码  

1. @Override  
2. protected void onCreate(Bundle savedInstanceState) {  
3.     ……  
4.     initUIController();  
5.     ……  
6. }  
7.   
8. private void initUIController() {  
9.     mUIController = UiUtilities.useTwoPane(this)  
10.             ? new UIControllerTwoPane(this) : new UIControllerOnePane(this);  
11. }  

这里初始化了一个UIController，其中的关系是这样的

UIControllerBase为父类，是一个抽象类，下面有两个实现类分别为UIControllerOnePane和UIControllerTwoPane（实在理解不了为什么这么命名。。。）

UIControllerOnePane为手机UI实现，UIControllerTwoPane为平板UI实现，我们这里只考虑UIControllerOnePane

Java代码  

1. public UIControllerBase(EmailActivity activity) {  
2.     mActivity = activity;  
3.     mFragmentManager = activity.getFragmentManager();  
4.     mRefreshManager = RefreshManager.getInstance(mActivity);  
5.     mActionBarController = createActionBarController(activity);  
6.     if (DEBUG_FRAGMENTS) {  
7.         FragmentManager.enableDebugLogging(true);  
8.     }  
9. }  

这里包含了一个ActionBarController,createActionBarController是抽象方法，下面是UIControllerOnePane的实现

Java代码  

1. @Override  
2. protected ActionBarController createActionBarController(Activity activity) {  
3.     // For now, we just reuse the same action bar controller used for 2-pane.  
4.     // We may change it later.  
5.     return new ActionBarController(activity, activity.getLoaderManager(),  
6.             activity.getActionBar(), new ActionBarControllerCallback());  
7. }  

最关键的就是ActionBarController了，它包含ActionBar所有内容

Java代码  

1. public ActionBarController(Context context, LoaderManager loaderManager,  
2.         ActionBar actionBar, Callback callback) {  
3.     mContext = context;  
4.     mLoaderManager = loaderManager;  
5.     mActionBar = actionBar;  
6.     mCallback = callback;  
7.     mDelayedOperations = new DelayedOperations(Utility.getMainThreadHandler());  
8.     mAllFoldersLabel = mContext.getResources().getString(  
9.             R.string.action_bar_mailbox_list_title);  
10.     mAccountsSelectorAdapter = new AccountSelectorAdapter(mContext);  
11.   
12.     // Configure action bar.  
13.     mActionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_CUSTOM);  
14.   
15.     // Prepare the custom view  
16.     mActionBar.setCustomView(R.layout.action_bar_custom_view);  
17.     mActionBarCustomView = (ViewGroup) mActionBar.getCustomView();  
18.   
19.     // Account spinner  
20.     mAccountSpinnerContainer =  
21.             UiUtilities.getView(mActionBarCustomView, R.id.account_spinner_container);  
22.     mAccountSpinner = UiUtilities.getView(mActionBarCustomView, R.id.account_spinner);  
23.     mAccountSpinnerDefaultBackground = mAccountSpinner.getBackground();  
24.   
25.     mAccountSpinnerLine1View = UiUtilities.getView(mActionBarCustomView, R.id.spinner_line_1);  
26.     mAccountSpinnerLine2View = UiUtilities.getView(mActionBarCustomView, R.id.spinner_line_2);  
27.     mAccountSpinnerCountView = UiUtilities.getView(mActionBarCustomView, R.id.spinner_count);  
28.   
29.     // Account dropdown  
30.     mAccountDropdown = new AccountDropdownPopup(mContext);  
31.     mAccountDropdown.setAdapter(mAccountsSelectorAdapter);  
32.   
33.     mAccountSpinner.setOnClickListener(new View.OnClickListener() {  
34.         @Override public void onClick(View v) {  
35.             if (mAccountsSelectorAdapter.getCount() > 0) {  
36.                 mAccountDropdown.show();  
37.             }  
38.         }  
39.     });  
40. }  

 从上面可以看出，ActionBar实际上也不复杂，只是设置了显示选项和一个CustomView，复杂的内容几乎全部集中在这个CustomView上了

Java代码  

1. // Configure action bar.  
2. mActionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_CUSTOM);  
3.   
4. // Prepare the custom view  
5. mActionBar.setCustomView(R.layout.action_bar_custom_view);  
6. mActionBarCustomView = (ViewGroup) mActionBar.getCustomView();  

当点击CustomView时候会有弹出下拉框，mAccountDropdown就发挥作用了

Java代码  

1. private class AccountDropdownPopup extends ListPopupWindow  

设置了mAccountSpinner.setOnClickListener，调用到mAccountDropdownshow()

mAccountDropdownshow显示由mAccountsSelectorAdapter提供

Java代码  

1. public class AccountSelectorAdapter extends CursorAdapter  

其中的数据由CursorWithExtras com.android.email.activity.ActionBarController.mCursor提供

mCursor只在一个地方进行刷新，那就是加载账户邮箱信息的时候

Java代码  

1. /** 
2.  * Load account/mailbox info, and account/recent mailbox list. 
3.  */  
4. private void loadAccountMailboxInfo(final long accountId, final long mailboxId) {  
5.     mLoaderManager.restartLoader(LOADER_ID_ACCOUNT_LIST, null,  
6.             new LoaderCallbacks<Cursor>() {  
7.         @Override  
8.         public Loader<Cursor> onCreateLoader(int id, Bundle args) {  
9.             return AccountSelectorAdapter.createLoader(mContext, accountId, mailboxId);  
10.         }  
11.   
12.         @Override  
13.         public void onLoadFinished(Loader<Cursor> loader, Cursor data) {  
14.             mCursor = (AccountSelectorAdapter.CursorWithExtras) data;  
15.             updateTitle();  
16.         }  
17.   
18.         @Override  
19.         public void onLoaderReset(Loader<Cursor> loader) {  
20.             mCursor = null;  
21.             updateTitle();  
22.         }  
23.     });  
24. }  

我们可以发现，加载完毕之后Cursor更新了，然后updateTitle，不用去看函数也能猜出这里是更新ActionBar

为了刷新列表，调用了下面语句

Java代码  

1. mAccountsSelectorAdapter.swapCursor(mCursor);  

updateTitle就不再进行分析了，里面几乎都是刷新那个CustomView的内容

 

下面看看底部的菜单，之前的学习中，api demos里并没有演示这种情况，我们用hierarchyviewer查看，发现页面上下都是一个ActionBarContainer的容器

上面的ActionBar我们已经知道它是怎么来的了，那下面的呢？原因在于manifest的配置

 

Java代码  

1. <activity  
2.     android:name=".activity.EmailActivity"  
3.     android:uiOptions="splitActionBarWhenNarrow"  
4.     >  
5. </activity>  

splitActionBarWhenNarrow使得ActionBar被拆分成上下两个部分

splitActionBarWhenNarrow用于显示Activity在窄屏设备（如竖屏手机）上运行时的所有menu项。当然，如果手机有menu键的时候，当menu项过多而显示不下的时候按Menu键即可

这时迷题已解，没有什么神秘的地方了，看看menu配置，一目了然

 

Xml代码  

1. <menu xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item  
3.         android:id="@+id/compose"  
4.         android:orderInCategory="100"  
5.         android:alphabeticShortcut="c"  
6.         android:title="@string/compose_action"  
7.         android:icon="@drawable/ic_menu_compose_normal_holo_light"  
8.         android:showAsAction="ifRoom"  
9.     />  
10.     <item  
11.         android:id="@+id/search"  
12.         android:orderInCategory="200"  
13.         android:alphabeticShortcut="s"  
14.         android:title="@string/search_action"  
15.         android:icon="@drawable/ic_menu_search_holo_light"  
16.         android:showAsAction="ifRoom"  
17.     />  
18.     <item  
19.         android:id="@+id/show_all_mailboxes"  
20.         android:orderInCategory="300"  
21.         android:alphabeticShortcut="c"  
22.         android:title="@string/mailbox_list_account_selector_show_all_folders"  
23.         android:icon="@drawable/ic_menu_move_to_holo_light"  
24.         android:showAsAction="ifRoom"  
25.     />  
26.     <item  
27.         android:id="@+id/refresh"  
28.         android:orderInCategory="400"  
29.         android:alphabeticShortcut="r"  
30.         android:title="@string/refresh_action"  
31.         android:icon="@drawable/ic_menu_refresh_holo_light"  
32.         android:showAsAction="ifRoom"  
33.     />  
34.     <!-- Note the order; we want to show them to the right of delete/move -->  
35.     <item  
36.         android:id="@+id/newer"  
37.         android:orderInCategory="1500"  
38.         android:icon="@drawable/menu_item_newer"  
39.         android:showAsAction="always"  
40.         android:visible="false"  
41.     />  
42.     <item  
43.         android:id="@+id/older"  
44.         android:orderInCategory="1600"  
45.         android:icon="@drawable/menu_item_older"  
46.         android:showAsAction="always"  
47.         android:visible="false"  
48.     />  
49.     <item  
50.         android:id="@+id/mailbox_settings"  
51.         android:orderInCategory="2000"  
52.         android:title="@string/mailbox_settings_action"  
53.         android:icon="@android:drawable/ic_menu_preferences"  
54.     />  
55.     <item  
56.         android:id="@+id/account_settings"  
57.         android:orderInCategory="3000"  
58.         android:title="@string/settings_action"  
59.         android:icon="@android:drawable/ic_menu_preferences"  
60.     />  
61. </menu>  

当我们横屏的时候，menu就会跑到上面去了

 

 

下面是带回退导航的

他能使用户回到上一个页面（并不是上一个activity，回到上一个activity可以通过按back键实现）

 

Java代码  

1. mActionBar.setDisplayOptions(showUp ? ActionBar.DISPLAY_HOME_AS_UP : 0, ActionBar.DISPLAY_HOME_AS_UP);  

在之前的refreshInernal中已经设置过了

 

当我们打开或新建一个邮件的时候，页面会跳转到新的activity

Java代码  

1. public class MessageCompose extends Activity implements OnClickListener, OnFocusChangeListener, DeleteMessageConfirmationDialog.Callback, InsertQuickResponseDialog.Callback  

这里我们看到了，页面依然有回退导航，点击之后能回退到上一个页面，当然，不再是当前的activity了

那么它是如何做到的，代码如下

 

Java代码  

1. @Override  
2. public boolean onOptionsItemSelected(MenuItem item) {  
3.     if (handleCommand(item.getItemId())) {  
4.         return true;  
5.     }  
6.     return super.onOptionsItemSelected(item);  
7. }  
8.   
9. private boolean handleCommand(int viewId) {  
10.     switch (viewId) {  
11.     case android.R.id.home:  
12.         onBack(false /* systemKey */);  
13.         return true;  
14.     ……  
15. }  
16.   
17. /** 
18.  * Handle a tap to the system back key, or the "app up" button in the action bar. 
19.  * @param systemKey whether or not the system key was pressed 
20.  */  
21. private void onBack(boolean systemKey) {  
22.     finish();  
23.     if (isOpenedFromWithinApp()) {  
24.         // If opened from within the app, we just close it.  
25.         return;  
26.     }  
27.   
28.     if (isOpenedFromWidget() || !systemKey) {  
29.         // Otherwise, need to open the main screen for the appropriate account.  
30.         // Note that mAccount should always be set by the time the action bar is set up.  
31.         startActivity(Welcome.createOpenAccountInboxIntent(this, mAccount.mId));  
32.     }  
33. }  

点击回退导航时，触发的menu是android.R.id.home 

剩下的事情就好办了，这里交给了onBack来处理

 

 

至此Email应用的ActionBar和menu就基本分析完了，如果有不准确的地方还希望大家指正

 

 

最后附上别人的几篇翻译，内容很基础，也比api demos多，值得一看

Android 用户界面---操作栏（Action Bar 一）：基本操作

Android 用户界面---操作栏（Action Bar 二）：分离式ActionBar与回退导航

Android 用户界面---操作栏（Action Bar 三）：ActionView

Android 用户界面---操作栏（Action Bar 四）：ActionProvider与Tab

Android 用户界面---操作栏（Action Bar 五）：主要是关于样式