Android自定義標題欄

預覽一下效果：

素材：

新建一個布局title_bar.xml，代碼如下：

<?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:background="@color/colorTitle"
    android:orientation="horizontal">

    <Button
        android:id="@+id/title_back"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/firefox"
        android:textSize="24dp" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title Text"
        android:textColor="#fff"
        android:textSize="24dp" />

    <Button
        android:id="@+id/title_edit"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/chrome" />
</LinearLayout>

現在標題欄布局已經編寫完成了，剩下的就是如何在程序中使用這個標題欄了，修改activity_main.xml中的代碼，如下所示：

<?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="match_parent"
    android:orientation="vertical">

    <include layout="@layout/title_bar" />
</LinearLayout>

只需要通過一行include語句將標題布局引入進來就可以了：

<include layout="@layout/title_bar" />

最后別忘了在MainActivity中將系統自帶的標題欄隱藏掉，代碼如下所示：

public class MainActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_main);
    }
}

使用這種方式，不管有多少布局需要添加標題欄，只需要一行include語句就可以了。

----------------------------------------為自定義UI控件添加動作-----------------------------------------------

引入布局的技巧確實解決了重復編寫布局代碼的問題，但是如果布局中有一些控件要求能夠響應事件，還是需要在每個活動中為這些控件單獨編寫一次事件注冊的代碼。

通過自定義控件可以解決重復代碼的問題。

新建TitleLayout繼承自LinearLayout，讓它成為我們自定義的標題欄，代碼如下：

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title_bar, this);
    }

}

 首先我們重寫了LinearLayout中的帶有兩個參數的構造函數，在布局中引入TitleLayout控件就會調用這個構造函數。

然后在構造函數中需要對標題欄布局進行動態加載，這就需要借助LayoutInflater實現。

通過LayoutInflater的from()方法可以構建出一個LayoutInflater對象，然后調用inflate()方法就可以動態加載一個布局文件。

inflate()方法接受兩個參數，第一個參數是要加載的布局文件的id，第二個參數是給加載好的布局再添加一個父布局。

自定義控件創建之后，需要在布局文件中添加這個自定義控件，修改activity_main.xml中的代碼，如下所示：

<?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="match_parent"
    android:orientation="vertical">

    <com.example.uicustomviews.TitleLayout android:layout_width="match_parent" android:layout_height="wrap_content">

    </com.example.uicustomviews.TitleLayout>
</LinearLayout>

最后嘗試為標題欄中的按鈕注冊點擊事件，修改TitleLayout中的代碼，如下所示：

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        //動態加載布局文件
        LayoutInflater.from(context).inflate(R.layout.title_bar, this);
        Button titleBack = (Button) findViewById(R.id.title_back);
        Button titleEdit = (Button) findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //結束當前Activity
                ((Activity) getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "You clicked Edit button", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

這樣的話，當我們在一個布局中引入TitleLayout，返回按鈕和編輯按鈕的點擊事件已經自動實現好了，節省了很多編寫重復代碼的工作。

總結：自定義UI控件的創建步驟

第一步：使用XML繪制自定義的UI控件

第二步：創建自定義控件，重寫LinearLayout：

　　　　1.引入UI控件：LayoutInflater.from(context).inflate(R.layout.title,this);

　　　　2.引入UI動作：為自定義UI控件添加點擊事件。

第三步：在布局文件中添加這個自定義控件：
　　　　<com.example.uicustomviews.TitleLayout>