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 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀