Android – 基於 ActionBarCompat(AppCompat) 的 Action Bar Style 設定

ActionBar 已棄用,請改用 Toolbar,詳見「ANDROID – TOOLBAR STEP BY STEP

 

之前介紹的「Android – ActionBarCompat(AppCompat) 的基本套用」,裡面用了「Android Action Bar Style Generator」,讓我們很方便地產生了基本的風格,但相信很多情況下都會希望可以再進一步,將 APP 客製化成有自己的風格,所以本篇就為各位介紹如何設定 XML 或是 程式(coding) 的方式來進行 style 的調整。

ActionBar Style

 

0. 準備 (Prepare)


在開始前,我們先來看一下若是依上面提供給各位的連結,所建立起來的專案,執行後的 Action Bar 畫面

Actionbar Style

就是一個大家都可以取得到的設定風格,請下載這邊為各位準備的 drawable,將之複製到專案中即可。

 

1. 設定背景 – XML (Setting Background – XML)


我們從 「Android Action Bar Style Generator」所下載的中,一定會有個格式為 style_<Style name>.xml 的 xml 檔案,在專案的資源目錄裡,以本範例來說,就是  <Project>\res\values\styles_sample_mosil.xml 這個檔案。其中設定 Action Bar 風格的片段如下

而本篇最主要的背景設定就是屬性名稱為  android:background 的項目,只要將之改為放入的 drawable 即可

在  <Project>\res\values 目錄下的 xml 設定完成後,要記得一件事,因為 Android Action Bar Style Generator 也為我們在 v14 也就是 Android 4.0 以上的版本產生一個風格檔,所以得再去  <Project>\res\values-v14\styles_<Sample name>.xml 為 API14 也就是 Android 4.0 以上的設定進行設定,否則會出現在 2.x 的裝置上沒問題,但 4.x 的裝置沒有任何改變的窘境。

這樣設定完成後,我們就可以看到下方這樣的結果畫面。

ActionBar Style

 

2. 設定背景 – 程式 (Setting Background – Code)


倘若是在程式中想要改變 Action Bar 的背景色,在繼承 ActionBarActivity 的情況下我們可以這麼寫

若是想用純色(pure color)的話,也無需製作像 generator 給我們的 PNG 色塊,只要在 color.xml 這個資源檔裡加入一個色碼

然後,一樣在程式碼中寫下

如此一來,就算在 style.xml 有設定的狀況下,我們仍是可以看到如下畫面

ActionBar Style Pure Color

 

3. 標題文字 – XML (Title – XML)


標題文字的 xml 設定,主要是要讓該 style 繼承  @style/TextAppearance.AppCompat.Widget.ActionBar.Title,所以我們要專為 title 再設定一個風格屬性。

請留意,這邊有一個 my_color 的顏色設定,這邊的設定值是在資源檔的 color.xml 中

再來就進入正題了, 回到我們最主要使用的 Action Bar 風格設定區塊中

這個屬性比較特別一些,倘若您的專案是支援 API 11 以上的話,可以直接用  <item name="android:titleTextStyle">... ,不過~如果只讓 API 11 的裝置可以使用的 APP,其實也就不用再使用 AppComat 這個支援函式庫啦 😛

最後,別忘了在自己的 API14 資源檔 <Project>\res\values-v14\styles_<Sample name>.xml 中進行設定,這樣我們就可以看到這樣的畫面了。

ActionBar Stytle Title

 

4. 標題文字 – 程式 (Title – Code)


Action Bar 的標題,用程式碼來設定也不難,如下

這邊需要透過   Resources.getSystem().getIdentifier("action_bar_title", "id", "android") 來取得 ActionBar Title 的 ID,然後再設定其 TextView 來設定文字顏色,範例中的顏色就直接以系統色碼 – 黑色來取代之,完成結果如下。

ActionBar Stytle Title by Code

 

本部落格採用創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款授權,如欲轉載請記得註明「莫希爾(Mosil) 手札

Loading Facebook Comments ...

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *