超詳細!ActionBar 使用·詳解
一、ActionBar介紹
在Android 3.0中除了我們重點講解的Fragment外,Action Bar也是一個非常重要的互動元素,Action Bar取代了傳統的tittle bar和menu,在程式執行中一直置於頂部,對於Android平板裝置來說螢幕更大它的標題使用Action Bar來設計可以展示更多豐富的內容,方便操控。
二、ActionBar的功能
用圖的方式來講解它的功能
<1> ActionBar的圖示,可顯示軟體圖示,也可用其他圖示代替。當軟體不在最高階頁面時,圖示左側會顯示一個左箭頭,使用者可以通過這個箭頭向上導航;
<2> 如果你的應用要在不同的View中顯示資料,這部分允許使用者來切換檢視。一般的作法是用一個下拉選單或者是Tab選項卡。如果只有一個介面,那這裡可以顯示應用程式的標題或者是更長一點的商標資訊;
<3> 兩個action按鈕,這裡放重要的按鈕功能,為使用者進行某項操作提供直接的訪問;
<4> overflow按鈕,放不下的按鈕會被置於“更多...”選單項中,“更多...”選單項是以下拉形式實現的。
三、ActionBar 奧義·詳解
1、新增ActionBar
ActionBar的新增非常簡單,只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子類就可以了,在Android 3.0及更高的版本中,Activity中都預設包含有ActionBar元件。
2、取消ActionBar
如果需要隱藏Action Bar可以在你的Activity的屬性中設定主題風格為NoTitleBar在你的manifest檔案中
<activity android:theme="@android:style/Theme.NoTitleBar">
還有一種做法,在執行時呼叫hide()方法也可以隱藏ActionBar,呼叫show()方法來顯示ActionBar()。
ActionBar actionBar = getActionBar();
actionBar.hide();
當你隱藏ActionBar時,系統會將Activity的整個內容充滿整個空間。
注意:如果使用一個主題(theme)來移除Activity上得ActionBar,那麼視窗將不再會有ActionBar,因此在執行時也就沒有辦法來新增ActionBar——呼叫getActionBar()方法會返回null值。
3.修改Action Bar的圖示和標題
預設情況下,系統會使用<application>或者<activity>中icon屬性指定的圖片來作為ActionBar的圖示,但是我們也可以改變這一預設行為。如果我們想要使用另外一張圖片來作為ActionBar的圖示,可以在<application>或者<activity>中通過logo屬性來進行指定,而標題中的內容使用label屬性來指定。比如專案的res/drawable目錄下有一張cnblog_icon.png圖片,就可以在AndroidManifest.xml中這樣指定:
<activity android:name=".MainActivity" android:label="召喚ActionBar吧" android:logo="@drawable/cnblog_icon" >
效果圖如下:
4.新增Action按鈕
ActionBar還可以根據應用程式當前的功能來提供與其相關的Action按鈕,這些按鈕都會以圖示或文字的形式直接顯示在ActionBar上。當然,如果按鈕過多,ActionBar上顯示不完,多出的一些按鈕可以隱藏在overflow裡面(最右邊的三個點就是overflow按鈕),點選一下overflow按鈕就可以看到全部的Action按鈕了。
當Activity啟動的時候,系統會呼叫Activity的onCreateOptionsMenu()方法來取出所有的Action按鈕,我們只需要在這個方法中去載入一個menu資源,並把所有的Action按鈕都定義在資原始檔裡面就可以了。 那麼我們先來看下menu資原始檔該如何定義,程式碼如下所示:<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/user_p" android:icon="@drawable/icon_user_p" android:showAsAction="always" android:title="使用者"/> <item android:id="@+id/write_p" android:icon="@drawable/icon_write_p" android:showAsAction="always" android:title="釋出"/> <item android:id="@+id/favo_p" android:icon="@drawable/icon_favo_p" android:showAsAction="never" android:title="收藏"/> </menu>
可以看到,這裡我們通過兩個<item>標籤定義了三個Action按鈕。<item>標籤中又有一些屬性,其中id是該Action按鈕的唯一識別符號,icon用於指定該按鈕的圖示,title用於指定該按鈕可能顯示的文字(在圖示能顯示的情況下,通常不會顯示文字),actionViewClass用來指定一個構建視窗所使用的佈局資源,showAsAction則指定了該按鈕顯示的位置,主要有以下幾種值可選:
fRoom | 會顯示在Item中,但是如果已經有4個或者4個以上的Item時會隱藏在溢位列表中。當然個 |
數並不僅僅侷限於4個,依據螢幕的寬窄而定 | |
never | 永遠不會顯示。只會在溢位列表中顯示,而且只顯示標題,所以在定義item的時候,最好 |
把標題都帶上。 | |
always | 無論是否溢位,總會顯示。 |
withText | withText值示意Action bar要顯示文字標題。Action bar會盡可能的顯示這個 |
標題,但是,如果圖示有效並且受到Action bar空間的限制,文字標題有可 | |
能顯示不全。 | |
collapseActionView | 聲明瞭這個操作視窗應該被摺疊到一個按鈕中,當用戶選擇這個按鈕時,這個操作視窗展開。否則, |
這個操作視窗在預設的情況下是可見的,並且即便在用於不適用的時候,也要佔據操作欄的有效空間。 | |
一般要配合ifRoom一起使用才會有效果。 |
接著,重寫Activity的onCreateOptionsMenu()方法,程式碼如下所示:
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
這部分程式碼很簡單,僅僅是呼叫了MenuInflater的inflate()方法來載入menu資源就可以了。現在重新執行一下程式,結果如下圖所示:
可以看到,menu_search和menu_setting這兩個按鈕已經在ActionBar中顯示出來了,而menu_delete這個按鈕由於showAsAction屬性設定成了never,所以被隱藏到了overflow當中,只要點選一下overflow按鈕就可以看到它了。
這裡我們注意到,顯示在ActionBar上的按鈕都只有一個圖示而已,我們在title中指定的文字並沒有顯示出來。沒錯,title中的內容通常情況下只會在overflow中顯示出來,ActionBar中由於螢幕空間有限,預設是不會顯示title內容的。但是出於以下幾種因素考慮,即使title中的內容無法顯示出來,我們也應該給每個item中都指定一個title屬性:- 當ActionBar中的剩餘空間不足的時候,如果Action按鈕指定的showAsAction屬性是ifRoom的話,該Action按鈕就會出現在overflow當中,此時就只有title能夠顯示了。
- 如果Action按鈕在ActionBar中顯示,使用者可能通過長按該Action按鈕的方式來檢視到title的內容。
5.響應Action按鈕的點選事件
當用戶點選Action按鈕的時候,系統會呼叫Activity的onOptionsItemSelected()方法,通過方法傳入的MenuItem引數,我們可以呼叫它的getItemId()方法和menu資源中的id進行比較,從而辨別出使用者點選的是哪一個Action按鈕,比如:
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.user_p: Toast.makeText(this, "你點選了“使用者”按鍵!", Toast.LENGTH_SHORT).show(); return true; case R.id.write_p: Toast.makeText(this, "你點選了“釋出”按鍵!", Toast.LENGTH_SHORT).show(); return true; case R.id.favo_p: Toast.makeText(this, "你點選了“收藏”按鍵!", Toast.LENGTH_SHORT).show(); return true; default: return super.onOptionsItemSelected(item); } }
可以看到,我們讓每個Action按鈕被點選的時候都彈出一個Toast,現在重新執行一下程式碼,結果如下圖所示:
5.通過Action Bar圖示進行導航
啟用ActionBar圖示導航的功能,可以允許使用者根據當前應用的位置來在不同介面之間切換。比如,A介面展示了一個列表,點選某一項之後進入了B介面,這時B介面就應該啟用ActionBar圖示導航功能,這樣就可以回到A介面。
我們可以通過呼叫setDisplayHomeAsUpEnabled()方法來啟用ActionBar圖示導航功能,比如:setTitle("Yanis"); setContentView(R.layout.activity_main); ActionBar actionBar = getActionBar(); actionBar.setDisplayHomeAsUpEnabled(true);
現在重新執行一下程式,結果如下圖所示:
可以看到,在ActionBar圖示的左側出現了一個向左的箭頭,通常情況下這都表示返回的意思,因此最簡單的實現就是在它的點選事件裡面加入finish()方法就可以了,如下所示:
switch (item.getItemId()) { case android.R.id.home: finish(); return true; ... }當點選ActionBar圖示的時候,系統同樣會呼叫onOptionsItemSelected()方法,並且此時的itemId是android.R.id.home,所以finish()方法也就是加在這裡的了。 現在看上去,ActionBar導航和Back鍵的功能貌似是一樣的。沒錯,如果我們只是簡單地finish了一下,ActionBar導航和Back鍵的功能是完全一樣的,但ActionBar導航的設計初衷並不是這樣的,它和Back鍵的功能還是有一些區別的,舉個例子吧。 上圖中的Conversation List是收件箱的主介面,現在我們點選第一封郵件會進入到Conversation1 details介面,然後點選下一封郵件會進入到Conversation 2 details介面,再點選下一封郵箱會進入到Conversation3 details介面。好的,這個時候如果我們按下Back鍵,應該會回到Conversation 2 details介面,再按一次Back鍵應該回到Conversation1 details介面,再按一次Back鍵才會回到Conversation List。而ActionBar導航則不應該表現出這種行為,無論我們當前在哪一個Conversation details介面,點選一下導航按鈕都應該回到Conversation List介面才對。 這就是ActionBar導航和Back鍵在設計上的區別,那麼該怎樣才能實現這樣的功能呢?其實並不複雜,實現標準的ActionBar導航功能只需三步走。 第一步我們已經實現了,就是呼叫setDisplayHomeAsUpEnabled()方法,並傳入true。
第二步需要在AndroidManifest.xml中配置父Activity,如下所示:
<activity android:name="com.yanis.actionbar.TabActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.yanis.actionbar.MainActivity" /> </activity>
可以看到,這裡通過meta-data標籤指定了MainActivity的父Activity是LaunchActivity,在Android 4.1版本之後,也可以直接使用android:parentActivityName這個屬性來進行指定,如下所示:
<activity android:name="com.yanis.actionbar.TabActivity" android:parentActivityName="com.yanis.actionbar.MainActivity" > </activity>
第三步則需要對android.R.id.home這個事件進行一些特殊處理,如下所示:
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: Intent upIntent = NavUtils.getParentActivityIntent(this); if (NavUtils.shouldUpRecreateTask(this, upIntent)) { TaskStackBuilder.create(this) .addNextIntentWithParentStack(upIntent) .startActivities(); } else { upIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); NavUtils.navigateUpTo(this, upIntent); } return true; ...... } }
其中,呼叫NavUtils.getParentActivityIntent()方法可以獲取到跳轉至父Activity的Intent,然後如果父Activity和當前Activity是在同一個Task中的,則直接呼叫navigateUpTo()方法進行跳轉,如果不是在同一個Task中的,則需要藉助TaskStackBuilder來建立一個新的Task。
這樣,就按照標準的規範成功實現ActionBar導航的功能了。 效果圖如下:6.新增Action View
ActionView是一種可以在ActionBar中替換Action按鈕的控制元件,它可以允許使用者在不切換介面的情況下通過ActionBar完成一些較為豐富的操作。比如說,你需要完成一個搜尋功能,就可以將SeachView這個控制元件新增到ActionBar中。
為了宣告一個ActionView,我們可以在menu資源中通過actionViewClass屬性來指定一個控制元件,還記得前面寫過的嗎:<item android:id="@+id/action_search" android:actionViewClass="android.widget.SearchView" android:showAsAction="always" android:title="搜尋"/>
如果你還希望在程式碼中對SearchView的屬性進行配置(比如新增監聽事件等),完全沒有問題,只需要在onCreateOptionsMenu()方法中獲取該ActionView的例項就可以了,程式碼如下所示:
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); MenuItem searchItem = menu.findItem(R.id.action_search); SearchView searchView = (SearchView) searchItem.getActionView(); // 配置SearchView的屬性 ...... return super.onCreateOptionsMenu(menu); }
除此之外,有些程式可能還希望在ActionView展開和合並的時候顯示不同的介面,其實我們只需要去註冊一個ActionView的監聽器就能實現這樣的功能了,程式碼如下所示:
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); MenuItem searchItem = menu.findItem(R.id.action_search); searchItem.setOnActionExpandListener(new OnActionExpandListener() { @Override public boolean onMenuItemActionExpand(MenuItem item) { Log.d("TAG", "on expand"); return true; } @Override public boolean onMenuItemActionCollapse(MenuItem item) { Log.d("TAG", "on collapse"); return true; } }); return super.onCreateOptionsMenu(menu); }
可以看到,呼叫MenuItem的setOnActionExpandListener()方法就可以註冊一個監聽器了,當SearchView展開的時候就會回撥onMenuItemActionExpand()方法,當SearchView合併的時候就會呼叫onMenuItemActionCollapse()方法,我們在這兩個方法中進行相應的UI操作就可以了。
7.Overflow按鈕不顯示的情況
雖然現在我們已經掌握了不少ActionBar的用法,但是當你真正去使用它的時候還是可能會遇到各種各樣的問題,比如很多人都會碰到overflow按鈕不顯示的情況。明明是同樣的一份程式碼,overflow按鈕在有些手機上會顯示,而在有些手機上偏偏就不顯示,如下圖:
可以看到,ActionBar最右邊的overflow按鈕不見,按一下Menu鍵,隱藏在overflow中的Action按鈕就會從底部出來。
有人總結了一下,overflow按鈕的顯示情況和手機的硬體情況是有關係的,如果手機沒有物理Menu鍵的話,overflow按鈕就可以顯示,如果有物理Menu鍵的話,overflow按鈕就不會顯示出來。比如我們啟動一個有Menu鍵的模擬器,然後將程式碼執行到該模擬器上
實際上,在ViewConfiguration這個類中有一個叫做sHasPermanentMenuKey的靜態變數,系統就是根據這個變數的值來判斷手機有沒有物理Menu鍵的。當然這是一個內部變數,我們無法直接訪問它,但是可以通過反射的方式修改它的值,讓它永遠為false就可以了,程式碼如下所示:
@Override protected void onCreate(Bundle savedInstanceState) { ...... setOverflowShowingAlways(); } private void setOverflowShowingAlways() { try { ViewConfiguration config = ViewConfiguration.get(this); Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey"); menuKeyField.setAccessible(true); menuKeyField.setBoolean(config, false); } catch (Exception e) { e.printStackTrace(); } }
這裡我們在onCreate()方法的最後呼叫了setOverflowShowingAlways()方法,而這個方法的內部就是使用反射的方式將sHasPermanentMenuKey的值設定成false,現在重新執行一下程式碼,結果如下圖所示: