Android自定義ToolBar標題欄

我們來看下面這張圖，這個是一個標準的toolbar所包含的全部內容，從左至右從上至下依次：為菜單（返回）按鈕，app圖標，主標題，子標題，標題，搜索按鈕，自添加按鈕，最后一個是啥我也叫不出來，暫且叫它三點按鈕好了

然而在實際開發過程中，我們想要的可能不會是這個樣式，例如：

或者這樣：

還有很多很多，然后我們要怎么實現這個呢？查看toolbar源碼的時候，我發現toolbar是直接繼承ViewGroup的，這樣的話那就好辦了，我們可以講toolbar作為一個容器，也就是我們所熟悉的Layout，直接在里面放東西就好了。說干就干，咱們自定義一個toolbar

（小小的封裝一下，以后用起來方便）

<?xml version="1.0" encoding="utf-8"?>
<com.jack.mc.cyg.cygproject.view.widget.custom_widget.CustomToolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/main_color"
    android:fitsSystemWindows="true"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/MyPopStyle">

    <TextView
        android:id="@+id/lt_main_title_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:singleLine="true"
        android:text="返回"
        android:gravity="center"
        android:drawableLeft="@mipmap/icon_back"
        android:textColor="@color/white"
        android:textSize="16dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/lt_main_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:text="標題"
        android:textSize="20dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/lt_main_title_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:visibility="visible"
        android:drawableRight="@mipmap/icon_add"
        android:textColor="@color/white"
        android:textSize="16dp" />

</com.jack.mc.cyg.cygproject.view.widget.custom_widget.CustomToolbar>


public class CustomToolbar extends Toolbar {

    public CustomToolbar(Context context) {
        super(context);
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private TextView mTvMainTitleLeft;
    private TextView mTvMainTitle;
    private TextView mTvMainTitleRight;

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mTvMainTitleLeft = (TextView) findViewById(R.id.lt_main_title_left);
        mTvMainTitle = (TextView) findViewById(R.id.lt_main_title);
        mTvMainTitleRight = (TextView) findViewById(R.id.lt_main_title_right);
    }

    //設置主title的內容
    public void setMainTitle(String text) {
        this.setTitle(" ");
        mTvMainTitle.setVisibility(View.VISIBLE);
        mTvMainTitle.setText(text);
    }

    //設置主title的內容文字的顏色
    public void setMainTitleColor(int color) {
        mTvMainTitle.setTextColor(color);
    }

    //設置title左邊文字
    public void setMainTitleLeftText(String text) {
        mTvMainTitleLeft.setVisibility(View.VISIBLE);
        mTvMainTitleLeft.setText(text);
    }

    //設置title左邊文字顏色
    public void setMainTitleLeftColor(int color) {
        mTvMainTitleLeft.setTextColor(color);
    }

    //設置title左邊圖標
    public void setMainTitleLeftDrawable(int res) {
        Drawable dwLeft = ContextCompat.getDrawable(getContext(), res);
        dwLeft.setBounds(0, 0, dwLeft.getMinimumWidth(), dwLeft.getMinimumHeight());
        mTvMainTitleLeft.setCompoundDrawables(dwLeft, null, null, null);
    }

    //設置title右邊文字
    public void setMainTitleRightText(String text) {
        mTvMainTitleRight.setVisibility(View.VISIBLE);
        mTvMainTitleRight.setText(text);
    }

    //設置title右邊文字顏色
    public void setMainTitleRightColor(int color) {
        mTvMainTitleRight.setTextColor(color);
    }

    //設置title右邊圖標
    public void setMainTitleRightDrawable(int res) {
        Drawable dwRight = ContextCompat.getDrawable(getContext(), res);
        dwRight.setBounds(0, 0, dwRight.getMinimumWidth(), dwRight.getMinimumHeight());
        mTvMainTitleRight.setCompoundDrawables(null, null, dwRight, null);
    }

    //設置toolbar狀態欄顏色
    public void setToolbarBackground(int res) {
        this.setBackgroundResource(res);
    }

    //設置toolbar左邊圖標
    public void setToolbarLeftBackImageRes(int res) {
        this.setNavigationIcon(res);
    }

    //設置toolbar左邊文字
    public void setToolbarLeftText(String text) {
        this.setNavigationContentDescription(text);
    }

    //設置toolbar的標題
    public void setToolbarTitle(String text) {
        this.setTitle(text);
    }

    //設置toolbar標題的顏色
    public void setToolbarTitleColor(int color) {
        this.setTitleTextColor(color);
    }

    //設置toolbar子標題
    public void setToolbarSubTitleText(String text) {
        this.setSubtitle(text);
    }

    //設置toolbar子標題顏色
    public void setToolbarSubTitleTextColor(int color) {
        this.setSubtitleTextColor(color);
    }

下面我來解釋一下：在這里我們可以看成是有兩個標題欄，一個是toolbar的，另外一個是自己定義的。然后我在自定義的toolbar中實現了一些方法來設置狀態欄，上面xml代碼中有一個需要注意的是：

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

這個是為了去掉toolbar自帶的左邊距。

這個只是做了簡單一點的titlebar，還有更為復雜的你也可以像上述方法那樣，自己往里面添加布局或控件

來自：http://www.jianshu.com/p/8d59d7a01f4c