我們在開發Android介面時常常要在許多頁面中共用風格相似的標題欄，為了減少重複性工作我們可以將標題欄做成一個通用的自定義控制元件。

我將通過兩種形式的自定義方式介紹自定義TitleBar

第一種方式（不涉及自定義屬性）

首先通過在Layout中建一個佈局檔案先確定Title的主要子控制元件titlebar.xml 如下包含2個Button 一個TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:background="@color/bg_title_bar"
    android:orientation="horizontal" >
        <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" />
      <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       />
</LinearLayout>
 

當然如果我們之後不需要頻繁改變上述佈局中各個子控制元件的樣式和內容，就可以直接在JAVA程式碼中獲取並繫結監控器如下;

package com.example.briefvideo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定義的TitleBar控制元件
 * 
 * @author baron 提供監聽器介面，呼叫者可以實現監聽器介面包含左右兩個按鈕的點選事件方法 然後繫結監聽器
 */
public class TitleBarView extends LinearLayout {
	// 右側按鈕屬性
	Button btnRight;
	// 左側按鈕屬性
	Button btnLeft;
	// 標題
	TextView tvTitle;
	BtnClickListener listener;

	public TitleBarView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}
	/**
	 * 初始化元件
	 * 
	 * @param context
	 */
	private void init(Context context) {
		LayoutInflater.from(context).inflate(R.layout.titlebar, this);
		btnLeft = (Button) findViewById(R.id.btn_left);
		btnRight = (Button) findViewById(R.id.btn_right);
		tvTitle = (TextView) findViewById(R.id.title);
	
		btnLeft.setText(leftTxt);
		if(leftable==false){
			btnLeft.setVisibility(View.GONE);	
		}
		btnRight.setText(rightTxt);
		if(rightable==false){
			btnRight.setVisibility(View.GONE);	
		}
		btnLeft.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				listener.leftClick();
			}
		});
		btnRight.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				listener.rightClick();
			}
		});
	}

	/**
	 * 提供載入自定義監聽器方法
	 * 
	 * @param listener
	 */
	public void setTitleBarListener(BtnClickListener listener) {
		this.listener = listener;
	}

	/**
	 * 按鈕點選介面,呼叫者實現
	 */
	public interface BtnClickListener {
		void leftClick();

		void rightClick();
	}

	/**
	 * 設定Titlebar內容（Java程式碼中設定）
	 * 
	 * @param leftDrabable
	 *            左側背景
	 * @param leftTxt
	 *            左側文字
	 * @param titleTxt
	 *            中間標題
	 * @param rightDrawable
	 * @param rightleftTxt
	 *            右側文字
	 */
	public void setTitleBarView(int leftDrabable, String leftTxt,
			String titleTxt, int rightDrawable, String rightTxt) {
		tvTitle.setText(titleTxt);
		btnLeft.setText(leftTxt);
	}

}
 

    <com.example.briefvideo.TitleBarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </com.example.briefvideo.TitleBarView>

第二種方式（利用自定義屬性）

首先依舊是通過在Layout中建一個佈局檔案先確定Title的主要子控制元件titlebar.xml 如下包含2個Button 一個TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:background="@color/bg_title_bar"
    android:orientation="horizontal" >
        <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" />
      <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       />
</LinearLayout>

然後我們在attrs.xml(如果values資料夾中沒有attrs.xml則新建一個)新增自定義的屬性

<resources>
    <declare-styleable name="TitleBarView">  
        <attr name="titleText" format="string"/>  
        <attr name="titleSize" format="dimension"/>  
        <attr name="titleColor" format="color"/>  
        <attr name="leftText" format="string"/> 
        <attr name="leftDrawable" format="reference"/>  
        <attr name="leftTextColor" format="color"/>  
        <attr name="leftBackground" format="reference|color"/>  
        <attr name="leftable" format="boolean"/>  
        <attr name="rightText" format="string"/>  
        <attr name="rightTextColor" format="color"/>
        <attr name="rightDrawable" format="reference"/>   
         <attr name="rightable" format="boolean"/>  
        <attr name="rightBackground" format="reference|color"/>  
    </declare-styleable>
      <!-- between the icon and text. -->
     <attr name="leftText">
        <enum name="maintitle"     value="極致影音" />  
    </attr>
</resources>

/**
 * 自定義的TitleBar控制元件
 * 
 * @author baron 提供監聽器介面，呼叫者可以實現監聽器介面包含左右兩個按鈕的點選事件方法 然後繫結監聽器
 */
public class TitleBarView extends LinearLayout {
// 右側按鈕屬性
Button btnRight;
Drawable rightDrawable;
String rightTxt;
boolean rightable;
// 左側按鈕屬性
Button btnLeft;
Drawable leftDrawable; 
String leftTxt;
boolean leftable;
// 標題
TextView tvTitle;
tring titleTxt;
BtnClickListener listener;

public TitleBarView(Context context, AttributeSet attrs) {
super(context, attrs);
getStyle(context, attrs);
init(context);
}


public void getStyle(Context context, AttributeSet attrs) {
// 獲取在attrs中設定的屬性組
TypedArray array = context.obtainStyledAttributes(attrs,
R.styleable.TitleBarView);
// 右側按鈕屬性
rightTxt = array.getString(R.styleable.TitleBarView_rightText);
rightDrawable = array
.getDrawable(R.styleable.TitleBarView_rightDrawable);
rightable= array.getBoolean(R.styleable.TitleBarView_rightable, true);
// 左側按鈕屬性
leftTxt = array.getString(R.styleable.TitleBarView_leftText);
leftDrawable = array.getDrawable(R.styleable.TitleBarView_leftDrawable);
leftable= array.getBoolean(R.styleable.TitleBarView_rightable, true);
// 標題
titleTxt = array.getString(R.styleable.TitleBarView_titleText);
}


/**
* 初始化元件
* 
* @param context
*/
private void init(Context context) {
LayoutInflater.from(context).inflate(R.layout.titlebar, this);
btnLeft = (Button) findViewById(R.id.btn_left);
btnRight = (Button) findViewById(R.id.btn_right);
tvTitle = (TextView) findViewById(R.id.title);

btnLeft.setText(leftTxt);
if(leftable==false){
btnLeft.setVisibility(View.GONE);<span style="white-space:pre">	</span>
}
btnRight.setText(rightTxt);
if(rightable==false){
btnRight.setVisibility(View.GONE);<span style="white-space:pre">	</span>
}
btnLeft.setOnClickListener(new OnClickListener() {
@Override
		public void onClick(View v) {
			listener.leftClick();
			}
		});
btnRight.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
listener.rightClick();
}
});
}
/**
* 提供載入自定義監聽器方法
* 
* @param listener
*/
public void setTitleBarListener(BtnClickListener listener) {
this.listener = listener;
}

/**
* 按鈕點選介面,呼叫者實現
*/
public interface BtnClickListener {
void leftClick();
void rightClick();
}

/**
* 設定Titlebar內容（Java程式碼中設定）
* 
 * @param leftDrabable
 *            左側背景
* @param leftTxt
*            左側文字
* @param titleTxt
*            中間標題
* @param rightDrawable
* @param rightleftTxt
*            右側文字
*/
public void setTitleBarView(int leftDrabable, String leftTxt,
String titleTxt, int rightDrawable, String rightTxt) {
tvTitle.setText(titleTxt);
btnLeft.setText(leftTxt);
}


}

       <com.example.briefvideo.TitleBarView
        xmlns:titlebarview="http://schemas.android.com/apk/res/com.example.briefvideo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        titlebarview:titleText="極致影音">
    </com.example.briefvideo.TitleBarView>

其中注意，一般我們在使用空間的屬性時前面都會有  android: 這個是名稱空間的指定

我們在XML佈局中使用空間時都必須有<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

其實這裡就是指定一個名稱空間，意思就是android：這個命名的控制元件指向哪裡。

顯然我們要用自己定義的屬性，也要指定名稱空間，否則是無法識別的

如

            xmlns:titlebarview="http://schemas.android.com/apk/res/com.example.briefvideo"
        android:layout_width="match_parent"
        titlebarview:titleText="極致影音"