Android學習:仿微信系列:ActionBar製作

柯振旭 2015 年 3 月 30 日 

1 效果展示

以下就是我們今天要實現的效果圖: 

2 實現難點
2.1隱藏ActionBar標題欄旁邊的應用Logo

在經典的Android應用中,頂部ActionBar左邊有應用的圖示,接著再是應用名,而微信6.0 介面上ActionBar左邊並沒有微信LOGO,因此第一個任務就是把ActionBar的 LOGO去掉。方法如下:開啟專案中

style.xml 檔案,在AppTheme中看到我們應用的主題繼承自 android:Theme.Holo.Light.DarkActionBar(如圖), 

也就是說想要修改 ActionBar的樣式可以去查詢該父主題中擁有哪些屬性,在我們自己的主題檔案中把它覆蓋掉就行了,按住Ctrl(Mac中為Command)點選該父主題,開啟對應的檔案,如下: 

發現該主題中有

name屬性為actionBarStyle的子節點,可知該節點就是控制ActionBar 樣式的,但是該節點的型別為@style,也就是說我們要自己定義一個style型別,於是我們就自己定義一個style,名字隨便取,不如就叫做ActionBarStyle吧,因為是要作為 Action-Bar的樣式,所以讓它繼承自android:Widget.ActionBar。接著在下面新增一個子節點,name屬性為android:displayOptions,值為showTitle,有人會問為什麼是showTitle,我們故技重施,按住Ctrl

(Mac下為Command,每次都這麼說太煩了,以後我們就直接說Ctrl吧),點選這個父樣式,也就是android:Widget.ActionBar,可以看到裡面的displayOptions值是:useLogo|showHome|showTitle,也就是使用Logo,顯示上一層,顯示標題,如此一來就可以舉一反三了,想要有圖示不要標題都可以。完成之後我們的程式碼應該如下: 

其中還有附加一點點修改,帶有註釋我們就不一一解釋了。

2.2 修改Overflow按鈕的圖示

在 API level 11的Android應用中,Android應用右上角會有顯示Overflow 按鈕,預設是三個點,點選時會彈出有選單。微信6.0以上的版本中使用了該Overflow選單,但是它的按鈕圖示並不是三個點,而是一個加號,因此我們現在的任務就是把Overflow按鈕圖示換成微信的加號。我們其實已經知道了AppTheme我們的自定義主題是繼承自安卓內建的主題,在該父主題內部也有name屬性為android:actionOverflowButtonStyle的節點,於是我們就打算覆蓋該節點,並且自定義Overflow按鈕。我們新建一個 style,取名隨便(就叫ActionBarOverflowButtonStyle吧),讓它繼承自android:Widget.ActionButton.Overflow,下面覆蓋它的name屬性為src的節點,值改成你要的圖示資源,如下: 

<style name=”ActionBarOverflowButtonStyle” parent=”android:Widget.ActionButton.Overflow”>
<item name=”android:src”>@drawable/actionbar_add</item>
</style>

2.3 修改Overflow按鈕展開選單背景

雖然我們通過設定 ActionBar背景色,把背景色設定成跟微信一樣的顏色,但是當我們點選Overflow選單展開時,才發現裡面的選單項背景顏色並不是我們期待的跟ActionBar顏色一致,筆者一開始以為應該要在帶有Overflow 字樣的主題中設定,其實這也是誤導初學者的地方,誰能想到設定Overflow展開選單背景的屬性是 ItemBackground呢,而且直接位於APP主題之下。

3 總結

好了,路還很長,今天的就先仿微信的 ActionBar 吧,下次我們就接著完善我們的APP,讓它看起來更像合格的“山寨微信”吧。