Android 自訂標題列樣式 (customize titlebar)

Customize Titlebar

當開發一款App時,Android原生的視窗標題列樣式常和App的風格不合,這時可以自訂標題列的樣式讓它符合App的風格。

Titlebar Layout

首先要設計一個標題列的layout內容如下:
titlebar.xml
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#6699ff">
    <TextView
       android:text="@string/app_name"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="#000000"
       android:textSize="20sp"></TextView>
</LinearLayout>

Activity

titlebar.xml只是用來設定標題列的layout,所以仍會有原本呈現內容的layout,例如main.xml。接著在Activity中指定標題列用我們設計的layout來呈現,程式碼如下:
TitlebarDemo.java
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
  setContentView(R.layout.main);
  getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.titlebar);
}
R.layout.titlebar就是指定步驟1所設計的標題列layout。

這時候發佈的話,看起來會像下圖這樣,似乎只是在原標題列上放上自訂的標題,怪怪的,也不能調整高度,所以要改用樣式的方式來指定。

自訂style

為Activiey設計一個theme,叫做 titlebar_style.xml
<resources>
    <style name="TitleBar">
        <item name="android:background">#6699ff</item>
        <item name="android:orientation">horizontal</item>
    </style>
    <style name="TitleBarTheme" parent="android:Theme">
      <item name="android:windowTitleSize">40dip</item>
        <item name="android:windowTitleBackgroundStyle">@style/TitleBar</item>
    </style>
</resources>
要知道還有哪些屬性可用,可以在R.attr中查到。例如,如果要指定一個沒有標題的視窗,可以用android.windowNoTitle屬性,並設值為true即可,但要記得把Activity中的那段指定titlebar的程式碼拿掉才能正常執行。

現在有了theme後還不能執行,要把這theme指定給Activity使用。

設定 AndroidManifest.xml

在AndroidManifest.xml中找到要自訂標題列的Activity,加上theme的屬性。
<activity android:name="TitlebarDemo" android:theme="@style/TitleBarTheme">
到這裡就完成了。結果就像下面的截圖。

美化調整

當然這樣並不好看,所以可以用圖片來代替單調的文字,準備好適當的圖片後,把原titlebar.xml中的TextView刪掉換成ImageView,並用RelativeLayout來讓圖片置中。

titlebar.xml修改如下:
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#6699ff"
  android:orientation="horizontal" android:paddingLeft="5dip">
    <ImageView
      android:layout_height="wrap_content"
      android:src="@drawable/android321"
      android:id="@+id/imgLogo"
      android:layout_width="wrap_content"
      android:layout_centerVertical="true"
      ></ImageView>
</RelativeLayout>
android321是放在/drawable中的圖檔android321.png,記得檔名一律為小寫。
完成後就會像文章一開始的截圖啦。

自訂標題列的layout後,意謂著可以在標題列中加入其他的元件來提供使用者資訊,例如可以加入一個處理進度的圖示,告知使用者處理進度等等。
本文網址:http://blog.tonycube.com/2011/08/customize-titlebar.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。